/* ============================================================
   LAYER Archive — index.html styles
   ============================================================ */

:root {
  --bg: #07090c;
  --bg-soft: #0d1117;
  --panel: rgba(16, 22, 30, 0.86);
  --panel-solid: #10161e;
  --panel-light: #151d28;
  --line: rgba(190, 207, 226, 0.13);
  --line-strong: rgba(213, 226, 242, 0.24);
  --text: #edf3f7;
  --muted: #9caaba;
  --muted-2: #637080;
  --blue: #9ec7ff;
  --amber: #d9a74e;
  --red: #ef675f;
  --green: #73d29b;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --max: 1540px;
  --gutter: clamp(18px, 3vw, 52px);
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(87, 129, 169, 0.18), transparent 32%),
    radial-gradient(circle at 95% 8%, rgba(128, 61, 64, 0.14), transparent 26%),
    linear-gradient(180deg, #06080b 0%, #0a0e14 38%, #07090c 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 72%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.28;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.page-shell {
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  background: rgba(7, 9, 12, 0.82);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.36em;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
}

.logo-mark {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 24px rgba(158, 199, 255, 0.12);
}

.logo-mark::before,
.logo-mark::after {
  content: "";
  position: absolute;
  background: var(--text);
  opacity: 0.75;
}

.logo-mark::before {
  width: 12px;
  height: 1px;
  left: 8px;
  top: 14px;
}

.logo-mark::after {
  width: 1px;
  height: 12px;
  left: 14px;
  top: 8px;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.nav a {
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.nav a:hover {
  color: var(--text);
  text-shadow: 0 0 16px rgba(158, 199, 255, 0.35);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.small-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 18px currentColor;
}

.dot.amber { background: var(--amber); color: var(--amber); }
.dot.red { background: var(--red); color: var(--red); }
.dot.green { background: var(--green); color: var(--green); }
.dot.blue { background: var(--blue); color: var(--blue); }

.mobile-menu {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu span,
.mobile-menu span::before,
.mobile-menu span::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.mobile-menu span::before,
.mobile-menu span::after {
  content: "";
  position: absolute;
  left: 0;
}

.mobile-menu span::before { top: -6px; }
.mobile-menu span::after { top: 6px; }

.status-strip {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(217, 167, 78, 0.11), rgba(255,255,255,0.025), rgba(239,103,95,0.08));
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.status-strip strong {
  color: var(--amber);
  font-weight: 700;
}

.hero {
  position: relative;
  min-height: min(820px, calc(100vh - 90px));
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 9, 12, 0.96) 0%, rgba(7, 9, 12, 0.83) 43%, rgba(7, 9, 12, 0.28) 100%),
    radial-gradient(circle at 78% 38%, rgba(158, 199, 255, 0.2), transparent 24%),
    linear-gradient(130deg, #101722, #07090c 55%);
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,0.025) 49%, transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,0.028) 49px, transparent 50px),
    url("data:image/svg+xml,%3Csvg width='1200' height='800' viewBox='0 0 1200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M830 120h180v560H830z' fill='%23162029'/%3E%3Cpath d='M630 80h210v620H630z' fill='%230d131c'/%3E%3Cpath d='M760 135h35v520h-35zM850 190h25v420h-25zM930 170h35v460h-35z' fill='%2326323e'/%3E%3Cpath d='M500 670h560l-95 55H410z' fill='%23151b23'/%3E%3Cpath d='M600 255h340' stroke='%23526475' stroke-width='2' opacity='.35'/%3E%3Cpath d='M660 370h330' stroke='%23526475' stroke-width='2' opacity='.25'/%3E%3Ccircle cx='740' cy='220' r='5' fill='%23d9a74e' opacity='.8'/%3E%3Ccircle cx='910' cy='320' r='4' fill='%23ef675f' opacity='.8'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center right;
  opacity: 0.6;
  pointer-events: none;
}

.hero::after {
  content: "ARCHIVE ACCESS";
  position: absolute;
  right: clamp(24px, 5vw, 92px);
  top: clamp(90px, 15vw, 190px);
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(237, 243, 247, 0.1);
  color: rgba(237, 243, 247, 0.13);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  transform: rotate(-14deg);
  box-shadow: inset 0 0 80px rgba(158, 199, 255, 0.08);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 840px;
  padding: clamp(44px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

h1 {
  margin: 34px 0 0;
  font-size: clamp(76px, 11vw, 180px);
  line-height: 0.82;
  letter-spacing: -0.08em;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-tagline {
  margin: 26px 0 0;
  font-family: var(--mono);
  color: var(--text);
  font-size: clamp(17px, 1.5vw, 24px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-copy {
  margin: 22px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.7;
}

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

.meta-box {
  min-height: 96px;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(7, 9, 12, 0.52);
  backdrop-filter: blur(12px);
}

.meta-box span {
  display: block;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.meta-box strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.35;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(237, 243, 247, 0.44);
}

.btn-primary {
  background: var(--text);
  color: #07090c;
  border-color: var(--text);
}

.btn-secondary {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.section {
  margin-top: 28px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(13, 17, 23, 0.72);
  box-shadow: 0 18px 70px rgba(0,0,0,0.22);
  backdrop-filter: blur(18px);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.kicker {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h2 {
  margin: 8px 0 0;
  font-size: clamp(28px, 3vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.view-all {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 24px;
}

.latest-card {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  min-height: 310px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    #0b1017;
}

.file-cover {
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(180deg, rgba(237,243,247,0.9), rgba(164,177,190,0.85)),
    linear-gradient(45deg, transparent 0 46%, rgba(0,0,0,0.16) 47% 52%, transparent 53%);
  color: #0b1017;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
}

.file-cover::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: 52%;
  height: 28px;
  background: #0b1017;
  transform: rotate(-6deg);
}

.file-cover .case-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.file-cover .case-num {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-size: 94px;
  line-height: 0.8;
  letter-spacing: -0.08em;
  font-weight: 800;
}

.file-cover .stamp {
  position: absolute;
  right: 14px;
  top: 74px;
  transform: rotate(8deg);
  border: 2px solid rgba(239, 103, 95, 0.72);
  color: rgba(239, 103, 95, 0.82);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.latest-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.latest-content h3,
.card h3,
.profile-card h3,
.lexicon-card h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.portrait {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: #111820;
}

.portrait-img {
  width: 100%;
  height: auto;
  object-fit: initial;
  object-position: initial;
  border-radius: 18px;
  display: block;
}

.portrait-unstable {
  position: relative;
}

.portrait-img-glitch {
  animation: nia-glitch 8s infinite;
}

@keyframes nia-glitch {
  0%, 89%, 100% { opacity: 1; transform: none; filter: none; }
  90% { opacity: 0.85; transform: translateX(2px); filter: hue-rotate(15deg) brightness(1.1); }
  91% { opacity: 1; transform: translateX(-1px); filter: none; }
  93% { clip-path: inset(20% 0 60% 0); transform: translateX(3px); opacity: 0.7; }
  94% { clip-path: none; transform: none; opacity: 1; }
  96% { opacity: 0.9; transform: translateY(1px); filter: brightness(1.15) contrast(1.1); }
  97% { opacity: 1; transform: none; filter: none; }
}

.portrait-unstable::after {
  content: "RECORD UNSTABLE";
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--amber);
  letter-spacing: 0.1em;
  opacity: 0;
  animation: record-tag 8s infinite;
}

@keyframes record-tag {
  0%, 88%, 98%, 100% { opacity: 0; }
  90%, 96% { opacity: 1; }
}

.profile-classify {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  line-height: 1.5;
  border-left: 2px solid var(--blue);
  padding-left: 8px;
  min-height: 2.8em;
}

.profile-note {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: auto 0 10px;
  padding: 6px 8px;
  background: rgba(217, 167, 78, 0.08);
  border-radius: 4px;
}

.profile-card h3,
.lexicon-card h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.latest-content p,
.card p,
.profile-card p,
.lexicon-card p,
.timeline-note,
.media-card p {
  color: var(--muted);
  line-height: 1.65;
}

.latest-content p {
  font-size: 17px;
  max-width: 580px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: 100%;
}

.archive-tile {
  min-height: 138px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.archive-tile:hover,
.card:hover,
.profile-card:hover,
.lexicon-card:hover,
.media-card:hover {
  transform: translateY(-4px);
  border-color: rgba(158, 199, 255, 0.35);
  background: rgba(255,255,255,0.055);
}

.tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 16px;
}

.archive-tile strong {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.archive-tile span {
  display: block;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.45;
}

.archive-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 42px);
  background:
    radial-gradient(circle at 85% 20%, rgba(158,199,255,0.08), transparent 32%),
    rgba(13, 17, 23, 0.72);
}

.archive-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,0.025) 49px, transparent 50px);
  pointer-events: none;
  opacity: 0.5;
}

.archive-content {
  position: relative;
  z-index: 1;
}

.split-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}

.section-title {
  margin: 8px 0 0;
  font-size: clamp(42px, 5vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.07em;
  font-weight: 850;
}

.map-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
}

.investigation-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

.active-file {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    #0b1017;
  overflow: hidden;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(240px, 310px) 1fr;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.active-file:hover {
  transform: translateY(-3px);
  border-color: rgba(158,199,255,0.32);
  box-shadow: 0 24px 70px rgba(0,0,0,0.36);
}

.active-cover {
  position: relative;
  min-height: 430px;
  background:
    radial-gradient(circle at 60% 20%, rgba(158,199,255,0.14), transparent 28%),
    linear-gradient(160deg, #111a23, #080c12 60%);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.active-cover::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(213,226,242,0.16);
  border-radius: 18px;
  background:
    linear-gradient(175deg, rgba(237,243,247,0.92) 0 38%, transparent 38.2%),
    linear-gradient(170deg, transparent 0 48%, rgba(237,243,247,0.08) 48.4% 60%, transparent 60.4%),
    linear-gradient(180deg, rgba(237,243,247,0.05), rgba(237,243,247,0.015));
  box-shadow: inset 0 0 50px rgba(158,199,255,0.04);
  opacity: 0.92;
}

.active-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.035) 39px, transparent 40px);
  pointer-events: none;
}

.cover-label {
  position: absolute;
  top: 44px;
  left: 42px;
  z-index: 2;
  color: #071018;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.cover-stamp {
  position: absolute;
  top: 110px;
  right: 42px;
  z-index: 2;
  color: rgba(239,103,95,0.88);
  border: 2px solid rgba(239,103,95,0.74);
  padding: 10px 15px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transform: rotate(8deg);
  mix-blend-mode: multiply;
}

.cover-number {
  position: absolute;
  z-index: 2;
  left: 40px;
  bottom: 34px;
  color: rgba(237,243,247,0.88);
  font-size: clamp(96px, 8vw, 148px);
  line-height: 0.76;
  letter-spacing: -0.09em;
  font-weight: 850;
  text-shadow: 0 20px 55px rgba(0,0,0,0.48);
}

.file-main {
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}

.file-title {
  margin: 0;
  font-size: clamp(34px, 3vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.file-copy {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.75;
  max-width: 760px;
}

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

.file-stats div {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px;
  background: rgba(255,255,255,0.026);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.file-stats strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.read-button {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(255,255,255,0.04);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.active-file:hover .read-button {
  background: rgba(237,243,247,0.92);
  color: #07090c;
  border-color: rgba(237,243,247,0.92);
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
}

.map-card {
  min-height: 207px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    #0b1017;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.map-card:hover {
  transform: translateY(-4px);
  border-color: rgba(158,199,255,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.34);
}

.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    radial-gradient(circle at 70% 18%, var(--accent), transparent 25%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.03) 39px, transparent 40px);
  pointer-events: none;
}

.map-card::after {
  content: attr(data-letter);
  position: absolute;
  right: 20px;
  bottom: 6px;
  color: rgba(237,243,247,0.055);
  font-size: 128px;
  line-height: 0.8;
  font-weight: 850;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.map-card.documents { --accent: rgba(158,199,255,0.22); }
.map-card.persons   { --accent: rgba(217,167,78,0.20); }
.map-card.timeline  { --accent: rgba(239,103,95,0.18); }
.map-card.lexicon   { --accent: rgba(115,210,155,0.18); }

.map-icon {
  position: relative;
  z-index: 1;
  width: 45px;
  height: 45px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 15px;
  background: rgba(0,0,0,0.16);
  box-shadow: inset 0 0 22px rgba(158,199,255,0.035);
}

.persons  .map-icon { color: var(--amber); }
.timeline .map-icon { color: var(--red); }
.lexicon  .map-icon { color: var(--green); }

.map-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
}

.documents .map-pattern {
  background:
    linear-gradient(90deg, transparent 0 54%, rgba(158,199,255,0.12) 54% 55%, transparent 55%),
    linear-gradient(180deg, transparent 0 32%, rgba(237,243,247,0.09) 32% 33%, transparent 33%),
    linear-gradient(180deg, transparent 0 55%, rgba(237,243,247,0.07) 55% 56%, transparent 56%);
}

.persons .map-pattern {
  background:
    radial-gradient(circle at 20% 28%, rgba(217,167,78,0.16) 0 18px, transparent 19px),
    radial-gradient(circle at 52% 22%, rgba(237,243,247,0.12) 0 16px, transparent 17px),
    radial-gradient(circle at 82% 34%, rgba(217,167,78,0.12) 0 18px, transparent 19px),
    linear-gradient(180deg, transparent 0 60%, rgba(237,243,247,0.06) 60% 61%, transparent 61%);
}

.timeline .map-pattern {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(239,103,95,0.20) 18% 19%, transparent 19%),
    linear-gradient(90deg, transparent 0 46%, rgba(217,167,78,0.18) 46% 47%, transparent 47%),
    linear-gradient(90deg, transparent 0 74%, rgba(158,199,255,0.16) 74% 75%, transparent 75%),
    linear-gradient(180deg, transparent 0 48%, rgba(237,243,247,0.08) 48% 49%, transparent 49%);
}

.lexicon .map-pattern {
  background:
    linear-gradient(180deg, transparent 0 22%, rgba(115,210,155,0.10) 22% 23%, transparent 23%),
    linear-gradient(180deg, transparent 0 42%, rgba(237,243,247,0.07) 42% 43%, transparent 43%),
    linear-gradient(180deg, transparent 0 63%, rgba(115,210,155,0.08) 63% 64%, transparent 64%);
}

.map-body {
  position: relative;
  z-index: 1;
}

.map-title {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.map-copy {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.map-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.link-strip {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(7,9,12,0.42);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.strip-label {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-right: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.03);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card {
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #0b1017;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.card-image {
  height: 150px;
  background:
    radial-gradient(circle at 30% 25%, rgba(158,199,255,0.18), transparent 24%),
    linear-gradient(135deg, #1b2735, #0c1118 68%);
  position: relative;
  overflow: hidden;
}

.card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 32px, rgba(255,255,255,0.07) 33px, transparent 34px),
    linear-gradient(0deg, rgba(0,0,0,0.6), transparent 55%);
}

.card:nth-child(2) .card-image { background: radial-gradient(circle at 68% 20%, rgba(217,167,78,0.2), transparent 24%), linear-gradient(135deg, #221b16, #0c1118 70%); }
.card:nth-child(3) .card-image { background: radial-gradient(circle at 42% 30%, rgba(239,103,95,0.22), transparent 26%), linear-gradient(135deg, #261315, #0c1118 70%); }
.card:nth-child(4) .card-image { background: radial-gradient(circle at 58% 20%, rgba(115,210,155,0.16), transparent 26%), linear-gradient(135deg, #14241d, #0c1118 70%); }

.card-number {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 56px;
  color: rgba(237, 243, 247, 0.22);
  font-weight: 800;
  letter-spacing: -0.08em;
}

.card-body {
  padding: 18px;
}

.card-body p {
  min-height: 78px;
  margin: 12px 0 18px;
}

.case-files-section {
  padding: clamp(24px, 3vw, 42px);
}

.case-files-section .section-head {
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 28px;
}

.section-copy {
  max-width: 780px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.case-files-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.case-file-card {
  min-height: 540px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b1017;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.case-file-card:hover {
  transform: translateY(-5px);
  border-color: rgba(158,199,255,0.38);
  box-shadow: 0 22px 70px rgba(0,0,0,0.4);
}

.case-file-card.is-locked { color: inherit; }

.case-thumb {
  position: relative;
  height: 245px;
  overflow: hidden;
  background: #101722;
  flex: none;
}

.case-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(0.78) contrast(1.03) brightness(0.72);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.case-file-card:hover .case-thumb::before {
  transform: scale(1.07);
  filter: saturate(0.88) contrast(1.05) brightness(0.82);
}

.case-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,9,12,0.08) 0%, rgba(7,9,12,0.34) 48%, rgba(7,9,12,0.92) 100%),
    linear-gradient(90deg, rgba(7,9,12,0.48), transparent 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0, rgba(255,255,255,0.055) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.035) 39px, transparent 40px);
  pointer-events: none;
}

.case-thumb.checksum::before {
  background-image:
    radial-gradient(circle at 58% 40%, rgba(158,199,255,0.16), transparent 24%),
    url("data:image/svg+xml,%3Csvg width='900' height='540' viewBox='0 0 900 540' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='900' height='540' fill='%230b1118'/%3E%3Cg opacity='.7'%3E%3Cpath d='M0 380h900v160H0z' fill='%23101822'/%3E%3Cpath d='M600 150h260v210H600z' fill='%2317212c'/%3E%3Cpath d='M620 172h220v20H620zM620 218h220v14H620zM620 260h220v14H620z' fill='%232d3a48' opacity='.7'/%3E%3Cpath d='M90 85h360v66H90z' fill='%23202b37'/%3E%3Cpath d='M120 108h190' stroke='%239ec7ff' stroke-width='6' opacity='.42'/%3E%3Ccircle cx='210' cy='330' r='32' fill='%23202b37'/%3E%3Cpath d='M170 530c20-120 80-120 95 0' fill='%23151d27'/%3E%3Ccircle cx='395' cy='335' r='36' fill='%23202b37'/%3E%3Cpath d='M350 530c25-130 90-125 105 0' fill='%23151d27'/%3E%3Ccircle cx='520' cy='330' r='30' fill='%23202b37'/%3E%3Cpath d='M480 530c20-120 80-120 96 0' fill='%23151d27'/%3E%3Cpath d='M100 330h420' stroke='%235a6572' opacity='.35'/%3E%3Cpath d='M40 432h820' stroke='%236d7887' opacity='.25'/%3E%3C/g%3E%3C/svg%3E");
}

.case-thumb.dead::before {
  background-image:
    radial-gradient(circle at 62% 30%, rgba(217,167,78,0.16), transparent 26%),
    url("data:image/svg+xml,%3Csvg width='900' height='540' viewBox='0 0 900 540' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='900' height='540' fill='%230c1117'/%3E%3Cg opacity='.72'%3E%3Cpath d='M0 390h900v150H0z' fill='%23111920'/%3E%3Cpath d='M80 90h220v360H80z' fill='%23131b24'/%3E%3Cpath d='M105 120h55v280h-55zM175 120h55v280h-55zM245 120h35v280h-35z' fill='%23202a35'/%3E%3Cpath d='M455 170h250v120H455z' fill='%2317202a' stroke='%23566773' opacity='.7'/%3E%3Cpath d='M480 200h170M480 226h145M480 252h190' stroke='%239ec7ff' opacity='.25'/%3E%3Crect x='390' y='340' width='350' height='90' rx='6' fill='%23182028'/%3E%3Cpath d='M415 368h280M415 392h220' stroke='%23d9a74e' opacity='.34'/%3E%3Ccircle cx='610' cy='330' r='34' fill='%23202a35'/%3E%3Cpath d='M562 530c25-140 100-130 118 0' fill='%23151d27'/%3E%3C/g%3E%3C/svg%3E");
}

.case-thumb.ghost::before {
  background-image:
    radial-gradient(circle at 45% 30%, rgba(239,103,95,0.17), transparent 28%),
    url("data:image/svg+xml,%3Csvg width='900' height='540' viewBox='0 0 900 540' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='900' height='540' fill='%230b0f15'/%3E%3Cg opacity='.74'%3E%3Cpath d='M0 410h900v130H0z' fill='%23111920'/%3E%3Cpath d='M50 120h820v70H50z' fill='%23131b24'/%3E%3Cpath d='M110 210h90v200h-90zM335 210h90v200h-90zM560 210h90v200h-90zM780 210h90v200h-90z' fill='%23162029'/%3E%3Cpath d='M210 312C310 250 392 280 455 332C525 390 620 380 700 320' fill='none' stroke='%239ec7ff' stroke-width='2' opacity='.32'/%3E%3Ccircle cx='380' cy='286' r='6' fill='%23ef675f'/%3E%3Ccircle cx='560' cy='370' r='5' fill='%23d9a74e'/%3E%3Ccircle cx='700' cy='320' r='4' fill='%239ec7ff'/%3E%3Ccircle cx='455' cy='348' r='28' fill='%23202a35'/%3E%3Cpath d='M420 530c20-120 75-120 92 0' fill='%23151d27'/%3E%3C/g%3E%3C/svg%3E");
}

.case-thumb.blind::before {
  background-image:
    radial-gradient(circle at 60% 45%, rgba(115,210,155,0.13), transparent 28%),
    url("data:image/svg+xml,%3Csvg width='900' height='540' viewBox='0 0 900 540' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='900' height='540' fill='%230a1013'/%3E%3Cg opacity='.75'%3E%3Cpath d='M110 60h680v420H110z' fill='%23111920'/%3E%3Cpath d='M210 95h480v350H210z' fill='%230c1118'/%3E%3Cpath d='M260 130h380v280H260z' fill='%23141d25'/%3E%3Cpath d='M310 165h280v210H310z' fill='%230b0f15'/%3E%3Cpath d='M110 60l200 105M790 60L590 165M110 480l200-105M790 480L590 375' stroke='%23657580' opacity='.35'/%3E%3Cpath d='M450 160v220M340 270h220' stroke='%2373d29b' opacity='.22'/%3E%3Ccircle cx='452' cy='270' r='5' fill='%2373d29b'/%3E%3C/g%3E%3C/svg%3E");
}

.thumb-topline {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(237,243,247,0.62);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.case-number {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 18px;
  color: rgba(237,243,247,0.35);
  font-size: clamp(58px, 5vw, 86px);
  line-height: 0.78;
  letter-spacing: -0.08em;
  font-weight: 850;
}

.thumb-status {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  color: rgba(237,243,247,0.54);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.case-file-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.case-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.case-title {
  margin: 18px 0 0;
  font-size: clamp(27px, 2.1vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.case-description {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.case-file-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.case-file-meta div {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
  background: rgba(255,255,255,0.026);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-file-meta strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.case-open-link {
  margin-top: auto;
  padding-top: 26px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-file-card:hover .case-open-link { color: var(--text); }

.profile-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.033);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
}

.profile-card p {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.profile-card h3 {
  margin-top: 18px;
  font-size: 24px;
}

.profile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.profile-meta div {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lexicon-card {
  padding: 22px;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.042), rgba(255,255,255,0.014)),
    #0b1017;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lexicon-card h3 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.sequence-timeline {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(239,103,95,0.07), transparent 36%),
    radial-gradient(circle at 20% 0%, rgba(158,199,255,0.08), transparent 34%),
    rgba(13,17,23,0.72);
}

.sequence-timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,0.025) 49px, transparent 50px),
    linear-gradient(90deg, transparent 0 49.8%, rgba(239,103,95,0.15) 49.9% 50.1%, transparent 50.2%);
  pointer-events: none;
  opacity: 0.7;
}

.sequence-timeline > * {
  position: relative;
  z-index: 1;
}

.drift-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.drift-card {
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7,9,12,0.48);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.drift-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent, var(--blue));
  opacity: 0.58;
}

.drift-card.blue  { --accent: var(--blue); }
.drift-card.amber { --accent: var(--amber); }
.drift-card.red   { --accent: var(--red); }
.drift-card.green { --accent: var(--green); }

.drift-card span {
  display: block;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drift-card strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.3;
}

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.timeline-column {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(7,9,12,0.48);
  overflow: hidden;
}

.column-head {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
}

.column-label {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.column-title {
  margin: 0;
  font-size: clamp(25px, 2vw, 38px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.column-desc {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

.event-list {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.event-card {
  position: relative;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    #0b1017;
  padding: 18px;
  overflow: hidden;
}

.event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.025) 39px, transparent 40px);
  opacity: 0.5;
}

.event-card.official { border-left: 3px solid rgba(158,199,255,0.55); }
.event-card.raw      { border-left: 3px solid rgba(217,167,78,0.55); }
.event-card.conflict { border-left: 3px solid rgba(239,103,95,0.64); }

.event-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
}

.time {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.raw .time      { color: var(--amber); }
.conflict .time { color: var(--red); }

.event-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.event-text {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.event-source {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.drift-column {
  position: relative;
  min-height: 100%;
  border: 1px solid rgba(239,103,95,0.2);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 22%, rgba(239,103,95,0.16), transparent 26%),
    rgba(7,9,12,0.38);
  overflow: hidden;
}

.drift-column::before {
  content: "";
  position: absolute;
  top: 24px; bottom: 24px; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(239,103,95,0.72), rgba(217,167,78,0.55), transparent);
}

.drift-column::after {
  content: "DRIFT";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  color: rgba(237,243,247,0.08);
  font-family: var(--mono);
  font-size: 50px;
  letter-spacing: 0.18em;
  pointer-events: none;
}

.drift-node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  min-height: 42px;
  border: 1px solid rgba(239,103,95,0.34);
  border-radius: 999px;
  background: rgba(7,9,12,0.86);
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 9px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}

.drift-node.n1 { top: 102px;    color: var(--amber); }
.drift-node.n2 { top: 252px;    color: var(--red); }
.drift-node.n3 { top: 414px;    color: var(--blue); }
.drift-node.n4 { bottom: 88px;  color: var(--green); }

.drift-mobile-row { display: contents; }

.note-band {
  margin-top: 18px;
  border: 1px solid rgba(217,167,78,0.25);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 20%, rgba(217,167,78,0.13), transparent 26%),
    rgba(7,9,12,0.48);
  padding: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

.note-code {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(217,167,78,0.34);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  background: rgba(217,167,78,0.05);
}

.note-band p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}

.note-band strong { color: var(--text); }

.media-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.media-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b1017;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.media-thumb {
  height: 130px;
  background:
    radial-gradient(circle at 40% 36%, rgba(158,199,255,0.24), transparent 24%),
    linear-gradient(135deg, #182333, #0b1017);
  position: relative;
}

.media-thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: rgba(237,243,247,0.75);
}

.media-card div:last-child { padding: 14px; }
.media-card h3 { margin: 8px 0 0; font-size: 15px; line-height: 1.3; }

.subscribe {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  min-height: 260px;
  background:
    radial-gradient(circle at 85% 20%, rgba(158,199,255,0.2), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018));
}

.subscribe::before {
  content: "VERITAS IN RECORDIS";
  position: absolute;
  left: 38px; bottom: 22px;
  font-family: var(--mono);
  letter-spacing: 0.25em;
  font-size: 12px;
  color: rgba(237,243,247,0.12);
}

.subscribe h2 { max-width: 760px; }
.subscribe p  { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.subscribe-form {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  min-width: min(520px, 100%);
}

.subscribe-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 32px 0 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 1921px) {
  :root { --max: 1820px; --gutter: 64px; }
  .hero { min-height: 940px; }
  .hero-content { max-width: 980px; }
  .active-file { min-height: 510px; grid-template-columns: 360px 1fr; }
  .active-cover { min-height: 510px; }
  .map-card { min-height: 247px; }
  .event-card { min-height: 150px; }
  .event-title { font-size: 23px; }
  .event-text { font-size: 17px; }
  .card-image { height: 190px; }
  .card { min-height: 390px; }
  .case-thumb { height: 310px; }
  .case-file-card { min-height: 650px; }
  .portrait { height: auto; }
  .media-thumb { height: 170px; }
}

@media (max-width: 1180px) {
  .topbar-inner { grid-template-columns: auto auto; }
  .nav, .header-actions .small-status { display: none; }
  .mobile-menu { display: inline-flex; }
  .topbar-inner { justify-content: space-between; }
  .two-col { grid-template-columns: 1fr; }
  .split-head, .investigation-grid { grid-template-columns: 1fr; }
  .map-title-wrap { align-items: flex-start; }
  .active-file { grid-template-columns: 280px 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-file-card { min-height: 500px; }
  .drift-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-grid { grid-template-columns: 1fr; }
  .drift-column { min-height: 128px; }
  .drift-column::before { top: 50%; bottom: auto; left: 24px; right: 24px; width: auto; height: 1px; }
  .drift-column::after { transform: translate(-50%, -50%); font-size: 40px; }
  .drift-mobile-row {
    position: relative; z-index: 1;
    min-height: 128px; padding: 18px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; align-items: center;
  }
  .drift-node { position: relative; left: auto; top: auto !important; bottom: auto !important; transform: none; width: 100%; }
  .media-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subscribe { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .page-shell { padding-bottom: 44px; }
  .status-strip { align-items: flex-start; border-radius: 18px; flex-direction: column; }
  .hero { min-height: auto; }
  .hero-content { padding: 42px 24px; }
  h1 { font-size: clamp(66px, 20vw, 120px); }
  .hero-meta { grid-template-columns: 1fr; }
  .latest-card { grid-template-columns: 1fr; }
  .file-cover { min-height: 220px; }
  .active-file { grid-template-columns: 1fr; }
  .active-cover { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .file-stats, .map-grid { grid-template-columns: 1fr; }
  .map-card { min-height: 190px; }
  .read-button { margin-top: 26px; }
  .archive-grid, .grid-3 { grid-template-columns: 1fr; }
  .drift-strip, .file-stats, .map-grid, .note-band { grid-template-columns: 1fr; }
  .event-inner { grid-template-columns: 1fr; gap: 10px; }
  .event-card { min-height: auto; }
  .drift-mobile-row { grid-template-columns: 1fr 1fr; }
  .note-code { width: 58px; height: 58px; }
  .case-files-grid { grid-template-columns: 1fr; }
  .case-thumb { height: 230px; }
  .case-file-card { min-height: auto; }
  .case-file-meta { grid-template-columns: 1fr; }
  .media-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { align-items: flex-start; flex-direction: column; }
  .footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --gutter: 14px; }
  .topbar-inner { padding: 12px var(--gutter); }
  .logo { font-size: 17px; letter-spacing: 0.22em; }
  .logo-mark { width: 26px; height: 26px; }
  .hero::after { display: none; }
  .hero-tagline { font-size: 14px; letter-spacing: 0.11em; }
  .hero-copy, .latest-content p, .subscribe p { font-size: 15px; }
  .hero-actions, .subscribe-form { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .btn { width: 100%; }
  .section { border-radius: 22px; padding: 20px; }
  .grid-4, .media-row { grid-template-columns: 1fr; }
  .case-files-section { padding: 20px; }
  .profile-meta { grid-template-columns: 1fr; }
  .sequence-timeline::before { background: repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,0.025) 49px, transparent 50px); }
  .column-head, .event-list { padding: 16px; }
  .drift-mobile-row { min-height: auto; }
}



/* ================================================================
   PAGE: page-read
================================================================ */

body.page-read {
  background:
    radial-gradient(circle at 18% -10%, rgba(87,129,169,.18), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(217,167,78,.10), transparent 28%),
        radial-gradient(circle at 54% 46%, rgba(239,103,95,.08), transparent 34%),
        linear-gradient(180deg, #06080b 0%, #0a0e14 42%, #07090c 100%);
}

.topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--line);
      background: rgba(7,9,12,.82);
      backdrop-filter: blur(20px);
    }

.topbar-inner {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 16px var(--gutter);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }

.logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      letter-spacing: .36em;
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
    }

.logo-mark {
      width: 30px;
      height: 30px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      position: relative;
      box-shadow: inset 0 0 24px rgba(158,199,255,.12);
    }

.logo-mark::before,
    .logo-mark::after {
      content: "";
      position: absolute;
      background: var(--text);
      opacity: .75;
    }

.logo-mark::before { width: 12px; height: 1px; left: 8px; top: 14px; }

.logo-mark::after { width: 1px; height: 12px; left: 14px; top: 8px; }

.nav {
      display: flex;
      justify-content: center;
      gap: clamp(14px, 2vw, 28px);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .11em;
    }

.nav a:hover,
    .nav a.active { color: var(--text); }

.access-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      white-space: nowrap;
    }

.dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 18px currentColor;
      flex: none;
    }

.dot.green { background: var(--green); color: var(--green); }

.dot.amber { background: var(--amber); color: var(--amber); }

.dot.red { background: var(--red); color: var(--red); }

.dot.blue { background: var(--blue); color: var(--blue); }

.dot.violet { background: var(--violet); color: var(--violet); }

.shell {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 28px var(--gutter) 72px;
    }

.season-hero {
      position: relative;
      min-height: 560px;
      border: 1px solid var(--line);
      border-radius: 30px;
      overflow: hidden;
      background:
        linear-gradient(105deg, rgba(7,9,12,.98) 0%, rgba(7,9,12,.88) 48%, rgba(7,9,12,.38) 100%),
        radial-gradient(circle at 82% 34%, rgba(158,199,255,.18), transparent 24%),
        linear-gradient(135deg, #101722, #07090c 62%);
      box-shadow: 0 30px 90px rgba(0,0,0,.46);
    }

.season-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        url("data:image/svg+xml,%3Csvg width='1500' height='760' viewBox='0 0 1500 760' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.58'%3E%3Cpath d='M940 110h260v520H940z' fill='%23162029'/%3E%3Cpath d='M810 172h95v390H810z' fill='%230d131c'/%3E%3Cpath d='M575 220C710 236 778 312 835 390C902 482 1004 535 1155 546' fill='none' stroke='%239ec7ff' stroke-width='2' opacity='.28'/%3E%3Cpath d='M590 330C710 322 790 380 870 458C952 538 1040 586 1210 590' fill='none' stroke='%23d9a74e' stroke-width='2' opacity='.20'/%3E%3Ccircle cx='610' cy='224' r='6' fill='%23edf3f7' opacity='.64'/%3E%3Ccircle cx='710' cy='260' r='5' fill='%239ec7ff'/%3E%3Ccircle cx='812' cy='360' r='7' fill='%23ef675f'/%3E%3Ccircle cx='900' cy='474' r='5' fill='%23edf3f7' opacity='.72'/%3E%3Ccircle cx='1042' cy='536' r='6' fill='%23d9a74e'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,.025) 53px, transparent 54px);
      background-position: center right;
      background-size: cover;
      opacity: .78;
      pointer-events: none;
    }

.season-hero::after {
      content: "SEASON 01";
      position: absolute;
      right: clamp(28px, 6vw, 110px);
      bottom: clamp(24px, 5vw, 70px);
      color: rgba(237,243,247,.07);
      font-family: var(--mono);
      font-size: clamp(42px, 7vw, 132px);
      letter-spacing: .06em;
      pointer-events: none;
    }

.hero-content {
      position: relative;
      z-index: 1;
      min-height: inherit;
      padding: clamp(42px, 6vw, 92px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 1120px;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

h1 {
      margin: 30px 0 0;
      max-width: 1050px;
      font-size: clamp(64px, 8vw, 142px);
      line-height: .88;
      letter-spacing: -.085em;
      font-weight: 850;
      text-transform: uppercase;
    }

.hero-copy {
      margin: 28px 0 0;
      max-width: 780px;
      color: var(--muted);
      font-size: clamp(17px, 1.25vw, 22px);
      line-height: 1.75;
    }

.hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 36px;
    }

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      cursor: pointer;
      background: rgba(255,255,255,.04);
      color: var(--text);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

.btn:hover { transform: translateY(-2px); border-color: rgba(237,243,247,.44); }

.btn-primary { background: var(--text); color: #07090c; border-color: var(--text); }

.btn-locked { color: var(--muted-2); cursor: not-allowed; opacity: .72; }

.hero-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 44px;
      max-width: 1080px;
    }

.meta-box {
      min-height: 94px;
      padding: 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: rgba(7,9,12,.52);
      backdrop-filter: blur(12px);
    }

.meta-box span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

.meta-box strong {
      display: block;
      margin-top: 10px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 14px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

.section {
      margin-top: 28px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(13,17,23,.72);
      backdrop-filter: blur(20px);
      box-shadow: 0 22px 80px rgba(0,0,0,.28);
      padding: clamp(24px, 3vw, 42px);
    }

.section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 26px;
    }

.kicker {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .18em;
      margin-bottom: 8px;
    }

h2 {
      margin: 0;
      font-size: clamp(38px, 5vw, 82px);
      line-height: .94;
      letter-spacing: -.07em;
      font-weight: 850;
    }

.section-copy {
      max-width: 820px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.72;
    }

.season-status {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 30px;
    }

.status-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(7,9,12,.42);
      padding: 20px;
      min-height: 132px;
    }

.status-card span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

.status-card strong {
      display: block;
      margin-top: 10px;
      font-size: clamp(30px, 3.2vw, 54px);
      line-height: .95;
      letter-spacing: -.06em;
    }

.chapters-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

.chapter-card {
      min-height: 415px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #0b1017;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

.chapter-card.open:hover {
      transform: translateY(-5px);
      border-color: rgba(158,199,255,.38);
      box-shadow: 0 22px 70px rgba(0,0,0,.4);
    }

.chapter-card.locked {
      opacity: .78;
    }

.chapter-card.locked::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.025) 17px, transparent 18px);
    }

.chapter-thumb {
      position: relative;
      height: 170px;
      overflow: hidden;
      background: #101722;
      flex: none;
    }

.chapter-thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      filter: saturate(.78) contrast(1.03) brightness(.72);
      transition: transform .35s ease, filter .35s ease;
    }

.chapter-card.open:hover .chapter-thumb::before {
      transform: scale(1.07);
      filter: saturate(.88) contrast(1.05) brightness(.82);
    }

.chapter-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(7,9,12,.08) 0%, rgba(7,9,12,.34) 48%, rgba(7,9,12,.92) 100%),
        linear-gradient(90deg, rgba(7,9,12,.48), transparent 48%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.035) 39px, transparent 40px);
      pointer-events: none;
    }

.thumb-01::before { background-image: radial-gradient(circle at 52% 36%, rgba(158,199,255,.18), transparent 25%), linear-gradient(135deg,#16202a,#07090c); }

.thumb-02::before { background-image: radial-gradient(circle at 62% 30%, rgba(217,167,78,.18), transparent 26%), linear-gradient(135deg,#1b1713,#07090c); }

.thumb-03::before { background-image: radial-gradient(circle at 45% 30%, rgba(239,103,95,.18), transparent 28%), linear-gradient(135deg,#1b1118,#07090c); }

.thumb-04::before { background-image: radial-gradient(circle at 60% 45%, rgba(115,210,155,.14), transparent 28%), linear-gradient(135deg,#0e1a18,#07090c); }

.thumb-05::before { background-image: radial-gradient(circle at 44% 40%, rgba(182,160,255,.15), transparent 28%), linear-gradient(135deg,#161326,#07090c); }

.thumb-06::before { background-image: radial-gradient(circle at 72% 28%, rgba(158,199,255,.14), transparent 28%), linear-gradient(135deg,#101722,#07090c); }

.thumb-07::before { background-image: radial-gradient(circle at 55% 42%, rgba(217,167,78,.12), transparent 30%), linear-gradient(135deg,#1b1713,#07090c); }

.thumb-08::before { background-image: radial-gradient(circle at 38% 35%, rgba(239,103,95,.13), transparent 28%), linear-gradient(135deg,#191019,#07090c); }

.thumb-09::before { background-image: radial-gradient(circle at 64% 38%, rgba(115,210,155,.12), transparent 30%), linear-gradient(135deg,#0d1815,#07090c); }

.thumb-10::before { background-image: radial-gradient(circle at 50% 30%, rgba(237,243,247,.13), transparent 28%), linear-gradient(135deg,#151b23,#07090c); }

.chapter-number {
      position: absolute;
      z-index: 2;
      left: 18px;
      bottom: 15px;
      color: rgba(237,243,247,.35);
      font-size: 72px;
      line-height: .78;
      letter-spacing: -.08em;
      font-weight: 850;
    }

.thumb-code {
      position: absolute;
      z-index: 2;
      top: 14px;
      left: 14px;
      right: 14px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: rgba(237,243,247,.62);
      font-family: var(--mono);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

.chapter-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

.badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

.chapter-title {
      margin: 16px 0 0;
      font-size: clamp(24px, 1.7vw, 34px);
      line-height: 1.02;
      letter-spacing: -.055em;
    }

.chapter-description {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.62;
    }

.chapter-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 18px;
    }

.chapter-meta div {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: rgba(255,255,255,.026);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.45;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

.chapter-meta strong {
      display: block;
      margin-top: 5px;
      color: var(--text);
      font-size: 11px;
      text-transform: none;
      letter-spacing: 0;
    }

.chapter-action {
      margin-top: auto;
      padding-top: 22px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

.chapter-card.open:hover .chapter-action { color: var(--text); }

.chapter-card.locked .chapter-action { color: var(--amber); }

.subscribe-band {
      margin-top: 26px;
      border: 1px solid rgba(217,167,78,.28);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 82% 20%, rgba(217,167,78,.16), transparent 28%),
        linear-gradient(135deg, rgba(217,167,78,.075), rgba(13,17,23,.74));
      padding: clamp(24px, 3vw, 38px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

.subscribe-band h3 {
      margin: 8px 0 0;
      font-size: clamp(30px, 4vw, 62px);
      line-height: .98;
      letter-spacing: -.06em;
    }

.subscribe-band p {
      max-width: 840px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.72;
    }

.season-coming {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 84% 16%, rgba(182,160,255,.13), transparent 28%),
        linear-gradient(135deg, rgba(158,199,255,.045), rgba(13,17,23,.72));
    }

.season-coming::before {
      content: "SEASON 02";
      position: absolute;
      right: clamp(22px, 4vw, 70px);
      bottom: -14px;
      color: rgba(237,243,247,.045);
      font-family: var(--mono);
      font-size: clamp(46px, 8vw, 132px);
      font-weight: 850;
      letter-spacing: -.06em;
      pointer-events: none;
    }

.coming-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

.coming-card {
      min-height: 170px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.025) 35px, transparent 36px),
        rgba(7,9,12,.45);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.coming-card span {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

.coming-card strong {
      display: block;
      margin-top: 14px;
      color: var(--text);
      font-size: clamp(24px, 2.2vw, 38px);
      line-height: 1;
      letter-spacing: -.055em;
    }

.coming-card p {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

.footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 32px 0 0;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
    }

@media (min-width: 1921px) {
      :root { --max: 2100px; --gutter: 72px; }
      .season-hero { min-height: 700px; }
      .chapter-thumb { height: 215px; }
      .chapter-card { min-height: 500px; }
      .chapter-description { font-size: 17px; }
    }

@media (max-width: 1400px) {
      .chapters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

@media (max-width: 1040px) {
      .nav { display: none; }
      .topbar-inner { grid-template-columns: auto auto; justify-content: space-between; }
      .hero-meta, .season-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chapters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .coming-grid { grid-template-columns: 1fr; }
      .subscribe-band { grid-template-columns: 1fr; }
    }

@media (max-width: 720px) {
      :root { --gutter: 14px; }
      .topbar-inner { padding: 12px var(--gutter); }
      .logo { font-size: 17px; letter-spacing: .22em; }
      .logo-mark { width: 26px; height: 26px; }
      .access-pill { display: none; }
      .shell { padding-top: 18px; }
      .season-hero { min-height: auto; border-radius: 22px; }
      .hero-content { padding: 34px 20px; }
      .season-hero::after { display: none; }
      h1 { font-size: clamp(48px, 15vw, 82px); line-height: .9; letter-spacing: -.065em; }
      .hero-meta, .season-status, .chapters-grid { grid-template-columns: 1fr; }
      .section { padding: 20px; border-radius: 22px; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .chapter-card { min-height: auto; }
      .chapter-meta { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; }
      .btn { width: 100%; }
      .footer { flex-direction: column; }
    }



/* ================================================================
   PAGE: page-lore
================================================================ */

body.page-lore {
  background:
    radial-gradient(circle at 16% -10%, rgba(87, 129, 169, 0.18), transparent 32%),
        radial-gradient(circle at 88% 4%, rgba(217, 167, 78, 0.10), transparent 28%),
        radial-gradient(circle at 52% 42%, rgba(239, 103, 95, 0.08), transparent 34%),
        linear-gradient(180deg, #06080b 0%, #0a0e14 44%, #07090c 100%);
}

a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 4px;
    }

.page-shell {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 0 var(--gutter) 72px;
    }

.topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(20px);
      background: rgba(7, 9, 12, 0.82);
      border-bottom: 1px solid var(--line);
    }

.topbar-inner {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 16px var(--gutter);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }

.logo {
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: 0.36em;
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
    }

.logo-mark {
      width: 30px;
      height: 30px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      position: relative;
      box-shadow: inset 0 0 24px rgba(158, 199, 255, 0.12);
    }

.logo-mark::before,
    .logo-mark::after {
      content: "";
      position: absolute;
      background: var(--text);
      opacity: 0.75;
    }

.logo-mark::before { width: 12px; height: 1px; left: 8px; top: 14px; }

.logo-mark::after { width: 1px; height: 12px; left: 14px; top: 8px; }

.nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.11em;
    }

.nav a { transition: color 0.18s ease, text-shadow 0.18s ease; }

.nav a:hover, .nav a.active { color: var(--text); text-shadow: 0 0 16px rgba(158, 199, 255, 0.35); }

.header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
    }

.pill,
    .small-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

.dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--muted);
      box-shadow: 0 0 18px currentColor;
      flex: none;
    }

.dot.amber { background: var(--amber); color: var(--amber); }

.dot.red { background: var(--red); color: var(--red); }

.dot.green { background: var(--green); color: var(--green); }

.dot.blue { background: var(--blue); color: var(--blue); }

.dot.violet { background: var(--violet); color: var(--violet); }

.mobile-menu {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.035);
      color: var(--text);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

.mobile-menu span,
    .mobile-menu span::before,
    .mobile-menu span::after {
      display: block;
      width: 18px;
      height: 1px;
      background: currentColor;
      position: relative;
    }

.mobile-menu span::before,
    .mobile-menu span::after { content: ""; position: absolute; left: 0; }

.mobile-menu span::before { top: -6px; }

.mobile-menu span::after { top: 6px; }

.hero {
      position: relative;
      margin-top: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      background:
        linear-gradient(110deg, rgba(7, 9, 12, 0.98) 0%, rgba(7, 9, 12, 0.88) 48%, rgba(7, 9, 12, 0.34) 100%),
        radial-gradient(circle at 82% 34%, rgba(158,199,255,0.18), transparent 24%),
        linear-gradient(135deg, #101722, #07090c 62%);
      min-height: 580px;
      box-shadow: var(--shadow);
    }

.hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        url("data:image/svg+xml,%3Csvg width='1500' height='760' viewBox='0 0 1500 760' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.54'%3E%3Cpath d='M940 110h260v520H940z' fill='%23162029'/%3E%3Cpath d='M810 172h95v390h-95z' fill='%230d131c'/%3E%3Cpath d='M575 220C710 236 778 312 835 390C902 482 1004 535 1155 546' fill='none' stroke='%239ec7ff' stroke-width='2' opacity='.26'/%3E%3Cpath d='M590 330C710 322 790 380 870 458C952 538 1040 586 1210 590' fill='none' stroke='%23d9a74e' stroke-width='2' opacity='.18'/%3E%3Ccircle cx='610' cy='224' r='6' fill='%23edf3f7' opacity='.64'/%3E%3Ccircle cx='710' cy='260' r='5' fill='%239ec7ff'/%3E%3Ccircle cx='812' cy='360' r='7' fill='%23ef675f'/%3E%3Ccircle cx='900' cy='474' r='5' fill='%23edf3f7' opacity='.72'/%3E%3Ccircle cx='1042' cy='536' r='6' fill='%23d9a74e'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,0.025) 53px, transparent 54px);
      background-position: center right;
      background-size: cover;
      opacity: 0.78;
      pointer-events: none;
    }

.hero::after {
      content: "LEXICON";
      position: absolute;
      right: clamp(28px, 6vw, 120px);
      bottom: clamp(22px, 5vw, 70px);
      color: rgba(237,243,247,0.07);
      font-family: var(--mono);
      font-size: clamp(56px, 8vw, 140px);
      letter-spacing: 0.08em;
      pointer-events: none;
    }

.hero-content {
      position: relative;
      z-index: 1;
      padding: clamp(42px, 6vw, 92px);
      max-width: 1050px;
      min-height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

h1 {
      margin: 30px 0 0;
      max-width: 1100px;
      font-size: clamp(58px, 7vw, 122px);
      line-height: 0.94;
      letter-spacing: -0.075em;
      font-weight: 850;
      text-transform: uppercase;
    }

.hero-copy {
      margin: 28px 0 0;
      max-width: 780px;
      color: var(--muted);
      font-size: clamp(17px, 1.25vw, 22px);
      line-height: 1.75;
    }

.hero-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-top: 44px;
      max-width: 1020px;
    }

.hero-stat {
      min-height: 106px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(7,9,12,0.48);
      backdrop-filter: blur(14px);
    }

.hero-stat span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

.hero-stat strong {
      display: block;
      margin-top: 12px;
      font-size: clamp(18px, 1.3vw, 24px);
      line-height: 1.18;
    }

.toolbar {
      margin-top: 28px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(13,17,23,0.72);
      backdrop-filter: blur(18px);
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 16px;
      align-items: center;
    }

.search {
      min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
    }

.search span {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
    }

.search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

.filter-btn {
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

.filter-btn:hover,
    .filter-btn.active {
      background: rgba(158,199,255,0.12);
      border-color: rgba(158,199,255,0.38);
      color: var(--text);
    }

.filter-btn[aria-pressed="true"] {
      background: rgba(158,199,255,0.12);
      border-color: rgba(158,199,255,0.38);
      color: var(--text);
    }

.section {
      margin-top: 28px;
      padding: clamp(24px, 3vw, 40px);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(13,17,23,0.72);
      box-shadow: 0 18px 70px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
    }

.section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;
    }

.kicker {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

h2 {
      margin: 8px 0 0;
      font-size: clamp(32px, 4vw, 72px);
      line-height: 0.98;
      letter-spacing: -0.065em;
    }

.view-all {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

.featured-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
      gap: 22px;
    }

.featured-term {
      min-height: 510px;
      padding: clamp(26px, 3vw, 42px);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 0% 4%, rgba(217,167,78,0.14), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
        #0b1017;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

.featured-term::after {
      content: "021";
      position: absolute;
      right: 24px;
      bottom: 12px;
      font-size: clamp(96px, 10vw, 180px);
      letter-spacing: -0.08em;
      color: rgba(237,243,247,0.055);
      font-weight: 850;
      pointer-events: none;
    }

.featured-term h3 {
      margin: 22px 0 0;
      max-width: 820px;
      font-size: clamp(42px, 5vw, 92px);
      line-height: 0.92;
      letter-spacing: -0.075em;
      text-transform: uppercase;
    }

.featured-term p {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.72;
      max-width: 720px;
    }

.definition-stack {
      display: grid;
      gap: 14px;
    }

.definition-box {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,0.035);
    }

.definition-box strong {
      display: block;
      color: var(--text);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

.definition-box p {
      margin: 0;
      color: var(--muted);
      line-height: 1.68;
      font-size: 16px;
    }

.grid-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

.grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

.term-card {
      min-height: 320px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
        #0b1017;
      display: flex;
      flex-direction: column;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
      position: relative;
      overflow: hidden;
    }

.term-card:hover {
      transform: translateY(-4px);
      border-color: rgba(158,199,255,0.36);
      background: rgba(255,255,255,0.055);
    }

.term-card.is-hidden,
    .locked-card.is-hidden,
    .category-block.is-hidden {
      display: none;
    }

.term-card::after {
      content: attr(data-num);
      position: absolute;
      right: 16px;
      top: 10px;
      font-family: var(--mono);
      font-size: 54px;
      letter-spacing: -0.06em;
      color: rgba(237,243,247,0.045);
      font-weight: 800;
      pointer-events: none;
    }

.term-card h3 {
      margin: 18px 0 0;
      font-size: clamp(23px, 2vw, 34px);
      line-height: 1.04;
      letter-spacing: -0.045em;
      text-transform: uppercase;
      max-width: 94%;
    }

.term-card p {
      color: var(--muted);
      line-height: 1.65;
      margin: 16px 0 22px;
      flex: 1;
    }

.official-plain {
      display: grid;
      gap: 10px;
      margin-top: auto;
    }

.micro-definition {
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0,0,0,0.16);
      font-size: 12px;
      line-height: 1.55;
      color: var(--muted);
    }

.micro-definition b {
      display: block;
      color: var(--text);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

.term-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

.category-block + .category-block {
      margin-top: 34px;
    }

.category-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

.category-title h3 {
      margin: 0;
      font-size: clamp(22px, 2.2vw, 38px);
      letter-spacing: -0.045em;
    }

.category-title span {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

.locked-card {
      min-height: 260px;
      padding: 22px;
      border: 1px dashed rgba(239,103,95,0.35);
      border-radius: var(--radius-lg);
      background:
        repeating-linear-gradient(135deg, rgba(239,103,95,0.05) 0 8px, rgba(255,255,255,0.01) 8px 16px),
        rgba(255,255,255,0.022);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--muted);
    }

.locked-card h3 {
      margin: 18px 0 0;
      color: var(--text);
      font-size: 26px;
      letter-spacing: -0.04em;
      text-transform: uppercase;
    }

.graph-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
      gap: 22px;
    }

.relationship-chain {
      display: none;
      gap: 10px;
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.relationship-chain span {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
    }

.connection-map {
      min-height: 430px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 28% 28%, rgba(158,199,255,0.12), transparent 22%),
        radial-gradient(circle at 68% 56%, rgba(217,167,78,0.12), transparent 24%),
        rgba(255,255,255,0.025);
      position: relative;
      overflow: hidden;
    }

.connection-map::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(32deg, transparent 0 48%, rgba(158,199,255,0.18) 49%, transparent 50%),
        linear-gradient(145deg, transparent 0 42%, rgba(217,167,78,0.16) 43%, transparent 44%),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,0.024) 43px, transparent 44px);
      opacity: 0.84;
    }

.node {
      position: absolute;
      padding: 10px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(7,9,12,0.78);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    }

.node.n1 { left: 9%; top: 18%; }

.node.n2 { left: 42%; top: 32%; color: var(--amber); }

.node.n3 { left: 64%; top: 16%; }

.node.n4 { left: 24%; top: 65%; }

.node.n5 { left: 58%; top: 68%; color: var(--red); }

.node.n6 { left: 73%; top: 48%; color: var(--blue); }

.map-side {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,0.032);
      padding: 22px;
    }

.map-side h3 {
      margin: 0;
      font-size: 30px;
      letter-spacing: -0.045em;
    }

.map-side p {
      color: var(--muted);
      line-height: 1.7;
    }

.subscribe {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 30px;
      align-items: center;
      min-height: 240px;
      background:
        radial-gradient(circle at 85% 20%, rgba(158,199,255,0.18), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018));
    }

.subscribe p {
      max-width: 680px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.7;
    }

.subscribe-form {
      display: flex;
      gap: 10px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(0,0,0,0.18);
      min-width: min(520px, 100%);
    }

.subscribe-form input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      padding: 0 16px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

.form-status {
      min-height: 18px;
      margin-top: 12px;
      color: var(--green);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

.btn:hover { transform: translateY(-2px); border-color: rgba(237,243,247,0.44); }

.btn-primary { background: var(--text); color: #07090c; border-color: var(--text); }

.btn-locked,
    .view-all.locked {
      color: var(--muted-2);
      cursor: not-allowed;
      opacity: 0.72;
    }

.no-results {
      display: none;
      margin-top: 18px;
      padding: 18px;
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius-md);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.025);
    }

.no-results.is-visible {
      display: block;
    }

.footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 32px 0 0;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
    }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (min-width: 1921px) {
      :root { --max: 1860px; --gutter: 68px; }
      .hero { min-height: 680px; }
      .term-card { min-height: 360px; }
      .connection-map { min-height: 520px; }
    }

@media (max-width: 1180px) {
      .topbar-inner { grid-template-columns: auto auto; justify-content: space-between; }
      .nav, .header-actions .small-status { display: none; }
      .mobile-menu { display: inline-flex; }
      .topbar.open .nav {
        position: absolute;
        left: var(--gutter);
        right: var(--gutter);
        top: calc(100% + 1px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 0 0 18px 18px;
        background: rgba(7, 9, 12, 0.96);
        backdrop-filter: blur(20px);
      }
      .topbar.open .nav a {
        padding: 14px;
        border-radius: 12px;
      }
      .topbar.open .nav a:hover {
        background: rgba(255,255,255,0.045);
      }
      .hero-grid, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .featured-layout, .graph-panel, .subscribe { grid-template-columns: 1fr; }
      .toolbar { grid-template-columns: 1fr; }
      .filters { justify-content: flex-start; }
    }

@media (max-width: 820px) {
      .page-shell { padding-bottom: 44px; }
      .hero { min-height: auto; }
      .hero-content { padding: 42px 24px; }
      h1 { font-size: clamp(48px, 15vw, 96px); }
      .hero-grid, .grid-3 { grid-template-columns: 1fr; }
      .section-head, .category-title { align-items: flex-start; flex-direction: column; }
      .connection-map { min-height: 360px; }
      .footer { align-items: flex-start; flex-direction: column; }
    }

@media (max-width: 560px) {
      :root { --gutter: 14px; }
      .topbar-inner { padding: 12px var(--gutter); }
      .logo { font-size: 17px; letter-spacing: 0.22em; }
      .logo-mark { width: 26px; height: 26px; }
      .topbar.open .nav { grid-template-columns: 1fr; }
      .hero::after { display: none; }
      .hero-copy, .subscribe p { font-size: 15px; }
      .section { border-radius: 22px; padding: 20px; }
      .grid-4 { grid-template-columns: 1fr; }
      .subscribe-form { flex-direction: column; border-radius: 22px; }
      .btn { width: 100%; }
      .connection-map { display: none; }
      .relationship-chain { display: grid; }
      .node { font-size: 8px; padding: 8px; }
    }



/* ================================================================
   PAGE: page-checksum
================================================================ */

body.page-checksum {
  background:
    radial-gradient(circle at 20% -10%, rgba(87,129,169,.18), transparent 32%),
        radial-gradient(circle at 95% 8%, rgba(128,61,64,.14), transparent 26%),
        linear-gradient(180deg, #06080b 0%, #0a0e14 38%, #07090c 100%);
}

.topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--line);
      background: rgba(7,9,12,.82);
      backdrop-filter: blur(20px);
    }

.topbar-inner {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 16px var(--gutter);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }

.logo { display:flex; align-items:center; gap:12px; font-family:var(--mono); letter-spacing:.36em; font-size:20px; font-weight:700; }

.logo-mark { width:30px; height:30px; border:1px solid var(--line-strong); border-radius:50%; position:relative; box-shadow: inset 0 0 24px rgba(158,199,255,.12); }

.logo-mark::before, .logo-mark::after { content:""; position:absolute; background:var(--text); opacity:.75; }

.logo-mark::before { width:12px; height:1px; left:8px; top:14px; }

.logo-mark::after { width:1px; height:12px; left:14px; top:8px; }

.nav { display:flex; justify-content:center; gap:clamp(14px,2vw,28px); color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.11em; }

.nav a:hover { color:var(--text); }

.top-status { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:var(--muted); font-family:var(--mono); font-size:12px; white-space:nowrap; }

.dot { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 18px currentColor; }

.shell { width:min(100%, calc(var(--max) + var(--gutter) * 2)); margin:0 auto; padding:0 var(--gutter) 72px; }

.file-hero {
      position: relative;
      margin-top: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 560px;
      background:
        linear-gradient(90deg, rgba(7,9,12,.98) 0%, rgba(7,9,12,.88) 45%, rgba(7,9,12,.24) 100%),
        radial-gradient(circle at 75% 28%, rgba(158,199,255,.18), transparent 24%),
        linear-gradient(135deg, #101722, #07090c 62%);
      box-shadow: 0 30px 90px rgba(0,0,0,.46);
    }

.file-hero::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        url("data:image/svg+xml,%3Csvg width='1300' height='650' viewBox='0 0 1300 650' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M790 65h220v520H790z' fill='%23162029'/%3E%3Cpath d='M620 35h190v560H620z' fill='%230d131c'/%3E%3Cpath d='M735 120h35v410h-35zM835 170h25v320h-25zM930 135h36v390h-36z' fill='%2326323e'/%3E%3Cpath d='M500 560h560l-100 55H410z' fill='%23151b23'/%3E%3Cpath d='M610 255h350' stroke='%23526475' stroke-width='2' opacity='.32'/%3E%3Cpath d='M650 370h320' stroke='%23526475' stroke-width='2' opacity='.22'/%3E%3Ccircle cx='720' cy='214' r='5' fill='%23d9a74e' opacity='.8'/%3E%3Ccircle cx='910' cy='316' r='4' fill='%23ef675f' opacity='.8'/%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.025) 49px, transparent 50px);
      background-size: cover;
      background-position: center right;
      opacity: .62;
    }

.file-hero-content { position:relative; z-index:1; max-width:980px; min-height:560px; padding:clamp(42px,6vw,92px); display:flex; flex-direction:column; justify-content:center; }

.eyebrow { width:fit-content; display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }

h1 { margin:32px 0 0; font-size:clamp(68px,10vw,164px); line-height:.84; letter-spacing:-.08em; text-transform:uppercase; }

.subtitle { margin-top:22px; font-family:var(--mono); font-size:clamp(15px,1.4vw,22px); letter-spacing:.18em; text-transform:uppercase; color:var(--text); }

.dek { margin-top:26px; max-width:760px; color:var(--muted); font-size:clamp(17px,1.35vw,22px); line-height:1.68; }

.hero-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:38px; }

.hero-meta div { min-height:90px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(7,9,12,.54); }

.hero-meta span { display:block; color:var(--muted-2); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

.hero-meta strong { display:block; margin-top:10px; font-family:var(--mono); font-size:14px; line-height:1.35; }

.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.btn { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 22px; border:1px solid var(--line-strong); border-radius:999px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.04); color:var(--text); transition:transform .18s ease, border-color .18s ease, background .18s ease; }

.btn:hover { transform:translateY(-2px); border-color:rgba(237,243,247,.44); background:rgba(255,255,255,.065); }

.btn-primary { background:var(--text); color:#07090c; border-color:var(--text); }

.btn-locked { color:var(--muted-2); cursor:not-allowed; opacity:.72; }

.reading-grid { display:grid; grid-template-columns:minmax(240px,320px) minmax(0,820px) minmax(220px,300px); gap:28px; align-items:start; margin-top:28px; }

.side-panel, .right-panel { position:sticky; top:92px; display:grid; gap:16px; }

.panel-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(13,17,23,.74); padding:18px; backdrop-filter:blur(18px); }

.panel-title { color:var(--muted-2); font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px; }

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

.data-list div { padding:10px 0; border-top:1px solid var(--line); }

.data-list div:first-child { border-top:0; padding-top:0; }

.data-list span { display:block; color:var(--muted-2); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

.data-list strong { display:block; margin-top:5px; font-size:14px; color:var(--body); line-height:1.35; }

.chip-list { display:flex; flex-wrap:wrap; gap:8px; }

.chip { display:inline-flex; padding:7px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.035); }

.reader {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(18,25,35,.94), rgba(11,16,23,.94));
      box-shadow: 0 18px 70px rgba(0,0,0,.25);
      overflow: hidden;
    }

.chapter-head { padding: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); }

.kicker { color:var(--muted-2); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.16em; margin-bottom:12px; }

.chapter-head h2 { margin:0; color:var(--text); font-family:var(--sans); font-size:clamp(34px,4vw,62px); line-height:.96; letter-spacing:-.06em; }

.chapter-head p { max-width:720px; margin:16px 0 0; color:var(--muted); font-family:var(--sans); font-size:16px; line-height:1.65; }

.chapter-body { padding: clamp(28px, 4vw, 58px); }

.chapter-body { color:var(--body); font-family:var(--serif); font-size:clamp(18px,1.12vw,21px); line-height:1.86; }

.chapter-body p { margin:0 0 1.25em; }

.chapter-body > p:first-of-type::first-letter { float:left; font-size:4.8em; line-height:.82; padding:.08em .12em 0 0; color:var(--text); font-family:var(--sans); font-weight:800; }

.single-word { color:var(--text); font-family:var(--sans)!important; font-size:clamp(34px,4vw,64px)!important; line-height:1.05!important; letter-spacing:-.05em; margin:1.2em 0!important; }

.number-break { margin:1.2em 0; padding:28px; border:1px solid rgba(217,167,78,.28); border-radius:18px; text-align:center; color:var(--amber); font-family:var(--mono); font-size:clamp(44px,6vw,86px); letter-spacing:.08em; background:rgba(217,167,78,.06); }

.system-insert { margin:2.1em 0; padding:22px; border:1px solid var(--line-strong); border-radius:18px; background:rgba(7,9,12,.68); font-family:var(--mono); color:var(--text); }

.system-insert p { margin:.65em 0 0; font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--body); }

.insert-label { color:var(--muted-2); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }

.analysis-return { border-color:rgba(158,199,255,.32); box-shadow: inset 0 0 40px rgba(158,199,255,.045); }

.metadata-note { border-color:rgba(217,167,78,.34); box-shadow: inset 0 0 40px rgba(217,167,78,.045); }

.hold-notice { border-color:rgba(239,103,95,.28); box-shadow: inset 0 0 40px rgba(239,103,95,.04); }

.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }

.metric-grid div { padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }

.metric-grid span { display:block; color:var(--muted-2); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }

.metric-grid strong { display:block; margin-top:8px; font-size:22px; color:var(--text); }

.terminal-message { margin:2em 0; padding:18px 20px; border-radius:16px; border:1px solid rgba(115,210,155,.25); background:rgba(115,210,155,.055); font-family:var(--mono); }

.terminal-message span { display:block; color:var(--green); font-size:10px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:8px; }

.terminal-message strong { display:block; color:var(--text); font-size:16px; line-height:1.5; }

.artifact-card { margin:2em 0; border:1px solid rgba(217,167,78,.34); border-radius:18px; background:linear-gradient(135deg, rgba(217,167,78,.09), rgba(255,255,255,.018)); overflow:hidden; font-family:var(--mono); }

.artifact-top, .artifact-foot { display:flex; justify-content:space-between; gap:14px; padding:12px 16px; color:var(--muted-2); font-size:10px; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--line); }

.artifact-foot { border-top:1px solid var(--line); border-bottom:0; }

.artifact-body { padding:28px 18px; text-align:center; color:var(--amber); font-size:clamp(22px,3vw,42px); letter-spacing:.05em; }

.chapter-end { margin:3em 0 1em; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; letter-spacing:.12em; }

.record-status { margin-top:28px; border:1px solid rgba(239,103,95,.28); border-radius:var(--radius-xl); background:linear-gradient(135deg, rgba(239,103,95,.075), rgba(13,17,23,.74)); padding:26px; }

.record-status h2 { margin:0; font-size:clamp(28px,3vw,48px); letter-spacing:-.05em; }

.record-status p { max-width:820px; color:var(--muted); line-height:1.65; margin:10px 0 0; }

.next-file { margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-xl); background:rgba(13,17,23,.74); padding:26px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }

.next-file h2 { margin:0; font-size:clamp(28px,3vw,48px); letter-spacing:-.05em; }

.next-file p { color:var(--muted); line-height:1.65; margin:8px 0 0; }

.footer { display:flex; justify-content:space-between; gap:20px; padding:32px 0 0; color:var(--muted-2); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }

@media (min-width: 1921px) { :root { --max:1840px; --gutter:68px; } .reading-grid { grid-template-columns:minmax(280px,360px) minmax(0,920px) minmax(260px,340px); } .chapter-body { font-size:22px; } }

@media (max-width: 1200px) { .nav { display:none; } .topbar-inner { grid-template-columns:auto auto; justify-content:space-between; } .reading-grid { grid-template-columns:1fr; } .side-panel, .right-panel { position:static; } .side-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .right-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-meta { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width: 760px) { .topbar-inner { gap:14px; } .logo { font-size:17px; letter-spacing:.22em; } .top-status { font-size:10px; padding:8px 10px; } .file-hero { min-height:auto; border-radius:22px; } .file-hero-content { min-height:auto; padding:34px 20px; } h1 { font-size:clamp(42px,13.4vw,58px); line-height:.92; letter-spacing:-.055em; } .subtitle { letter-spacing:.1em; } .hero-meta, .side-panel, .right-panel, .metric-grid, .next-file { grid-template-columns:1fr; } .reader { border-radius:22px; } .chapter-head,.chapter-body { padding:24px 20px; } .chapter-body { font-size:17px; line-height:1.8; } .chapter-body > p:first-of-type::first-letter { font-size:3.6em; } .artifact-top, .artifact-foot, .footer { flex-direction:column; } .actions { flex-direction:column; } .btn { width:100%; } }



/* ================================================================
   PAGE: page-dead-record
================================================================ */

body.page-dead-record {
  background:
    radial-gradient(circle at 18% -10%, rgba(87,129,169,.18), transparent 32%),
    radial-gradient(circle at 94% 7%, rgba(128,61,64,.16), transparent 26%),
    radial-gradient(circle at 52% 30%, rgba(217,167,78,.07), transparent 32%),
    linear-gradient(180deg,#06080b 0%,#0a0e14 38%,#07090c 100%);
}

.page-shell {width:min(100%,calc(var(--max) + var(--gutter)*2));margin:0 auto;padding:0 var(--gutter) 72px}

.topbar {position:sticky;top:0;z-index:50;backdrop-filter:blur(20px);background:rgba(7,9,12,.82);border-bottom:1px solid var(--line)}

.topbar-inner {width:min(100%,calc(var(--max) + var(--gutter)*2));margin:0 auto;padding:16px var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}

.logo {display:flex;align-items:center;gap:12px;letter-spacing:.36em;font-family:var(--mono);font-size:20px;font-weight:700}

.logo-mark {width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;position:relative;box-shadow:inset 0 0 24px rgba(158,199,255,.12)}

.logo-mark::before,.logo-mark::after {content:"";position:absolute;background:var(--text);opacity:.75}

.logo-mark::before {width:12px;height:1px;left:8px;top:14px}

.logo-mark::after {width:1px;height:12px;left:14px;top:8px}

.nav {display:flex;justify-content:center;align-items:center;gap:clamp(14px,2vw,28px);color:var(--muted);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.11em}

.nav a {transition:color .18s ease,text-shadow .18s ease}

.nav a:hover,.nav a.active {color:var(--text);text-shadow:0 0 16px rgba(158,199,255,.35)}

.header-actions {display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}

.small-status,.pill {display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

.dot {width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 18px currentColor;flex:none}

.dot.amber {background:var(--amber);color:var(--amber)}

.dot.red {background:var(--red);color:var(--red)}

.dot.green {background:var(--green);color:var(--green)}

.dot.blue {background:var(--blue);color:var(--blue)}

.dot.violet {background:var(--violet);color:var(--violet)}

.mobile-menu {display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);align-items:center;justify-content:center;cursor:pointer}

.mobile-menu span,.mobile-menu span::before,.mobile-menu span::after {display:block;width:18px;height:1px;background:currentColor;position:relative}

.mobile-menu span::before,.mobile-menu span::after {content:"";position:absolute;left:0}

.mobile-menu span::before {top:-6px}

.mobile-menu span::after {top:6px}

.hero {position:relative;min-height:620px;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(100deg,rgba(7,9,12,.98),rgba(7,9,12,.88) 48%,rgba(7,9,12,.34)),radial-gradient(circle at 76% 38%,rgba(158,199,255,.18),transparent 26%),linear-gradient(130deg,#111823,#07090c 60%);box-shadow:var(--shadow)}

.hero::before {content:"";position:absolute;inset:0;pointer-events:none;opacity:.74;background:url("data:image/svg+xml,%3Csvg width='1500' height='820' viewBox='0 0 1500 820' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.56'%3E%3Cpath d='M900 120h280v560H900z' fill='%23162029'/%3E%3Cpath d='M760 180h110v420H760z' fill='%230d131c'/%3E%3Cpath d='M545 230C690 250 760 328 830 420C900 512 1015 570 1185 580' fill='none' stroke='%239ec7ff' stroke-width='2' opacity='.25'/%3E%3Cpath d='M585 345C705 335 790 394 875 470C970 558 1050 608 1230 610' fill='none' stroke='%23d9a74e' stroke-width='2' opacity='.18'/%3E%3Ccircle cx='595' cy='233' r='6' fill='%23edf3f7' opacity='.64'/%3E%3Ccircle cx='704' cy='278' r='5' fill='%239ec7ff'/%3E%3Ccircle cx='810' cy='382' r='7' fill='%23ef675f'/%3E%3Ccircle cx='920' cy='510' r='5' fill='%23edf3f7' opacity='.72'/%3E%3Ccircle cx='1060' cy='570' r='6' fill='%23d9a74e'/%3E%3C/g%3E%3C/svg%3E"),repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.025) 53px,transparent 54px);background-position:center right;background-size:cover}

.hero::after {content:"DEAD RECORD";position:absolute;right:clamp(24px,5vw,90px);bottom:clamp(20px,4vw,58px);font-family:var(--mono);font-size:clamp(46px,7vw,132px);letter-spacing:.04em;color:rgba(237,243,247,.06);pointer-events:none}

.hero-content {position:relative;z-index:1;max-width:1040px;min-height:inherit;padding:clamp(44px,6vw,96px);display:flex;flex-direction:column;justify-content:center}

.eyebrow {display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em}

h1 {margin:30px 0 0;max-width:1050px;font-size:clamp(62px,8vw,138px);line-height:.88;letter-spacing:-.085em;font-weight:850;text-transform:uppercase}

.hero-copy {margin:28px 0 0;max-width:780px;color:var(--muted);font-size:clamp(17px,1.25vw,22px);line-height:1.75}

.hero-actions {display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

.btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--line-strong);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;background:rgba(255,255,255,.04);color:var(--text);transition:transform .18s ease,border-color .18s ease,background .18s ease}

.btn:hover {transform:translateY(-2px);border-color:rgba(237,243,247,.44)}

.btn-primary {background:var(--text);color:#07090c;border-color:var(--text)}

.btn-locked {color:var(--muted-2);cursor:not-allowed;opacity:.72}

.hero-meta {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:44px}

.meta-box {min-height:90px;padding:16px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(7,9,12,.52);backdrop-filter:blur(12px)}

.meta-box span {display:block;color:var(--muted-2);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

.meta-box strong {display:block;margin-top:10px;color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.35;overflow-wrap:anywhere}

.reading-layout {display:grid;grid-template-columns:320px minmax(0,840px) 280px;gap:26px;align-items:start;margin-top:28px}

.side-panel {position:sticky;top:88px;border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(13,17,23,.72);backdrop-filter:blur(18px);padding:22px}

.side-panel h2 {margin:0 0 18px;font-size:18px;letter-spacing:-.02em}

.side-group {padding:16px 0;border-top:1px solid var(--line)}

.side-group:first-of-type {border-top:0;padding-top:0}

.side-label {font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}

.side-value {color:var(--text);font-size:14px;line-height:1.55}

.side-links {display:flex;flex-wrap:wrap;gap:8px}

.chapter-card {border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(13,17,23,.82);box-shadow:0 18px 70px rgba(0,0,0,.22);backdrop-filter:blur(18px);overflow:hidden}

.chapter-head {padding:34px 38px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}

.chapter-head .kicker {color:var(--muted-2);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

.chapter-head h2 {margin:10px 0 0;font-size:clamp(34px,4vw,68px);line-height:.98;letter-spacing:-.07em;text-transform:uppercase}

.chapter-head p {color:var(--muted);line-height:1.7;max-width:680px}

.chapter-prose {padding:38px;font-family:var(--serif);font-size:18px;line-height:1.82;color:#dce5ec}

.chapter-prose p {margin:0 0 1.15em}

.chapter-prose p.dialogue {color:#e7eef4}

.chapter-prose p.record-line {font-family:var(--mono);font-size:13px;line-height:1.75;color:#cbd7e3;border-left:2px solid var(--blue);padding-left:14px;background:rgba(158,199,255,.035);border-radius:0 10px 10px 0;padding-top:8px;padding-bottom:8px}

.chapter-prose p.chapter-end {text-align:center;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-top:36px}

.system-insert,.notebook-insert {margin:34px 0;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.018));font-family:var(--sans);color:var(--muted)}

.system-insert.warning {border-color:rgba(217,167,78,.28);background:linear-gradient(135deg,rgba(217,167,78,.1),rgba(255,255,255,.018))}

.system-insert.danger {border-color:rgba(239,103,95,.3);background:linear-gradient(135deg,rgba(239,103,95,.1),rgba(255,255,255,.018))}

.system-insert.checksum {border-color:rgba(182,160,255,.3);background:linear-gradient(135deg,rgba(182,160,255,.1),rgba(255,255,255,.018))}

.insert-head {display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:14px}

.system-insert blockquote,.notebook-insert blockquote {margin:0;color:var(--text);font-family:var(--mono);font-size:15px;line-height:1.75}

.system-insert p {margin:0;color:var(--muted);line-height:1.65}

.insert-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.insert-grid div {border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(0,0,0,.14)}

.insert-grid span {display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

.insert-grid strong {display:block;margin-top:8px;color:var(--text);font-size:16px}

.notebook-insert {background:linear-gradient(135deg,rgba(237,243,247,.07),rgba(255,255,255,.018));border-color:rgba(237,243,247,.24)}

.record-status {margin-top:28px;border:1px solid rgba(217,167,78,.28);border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(217,167,78,.075),rgba(13,17,23,.74));padding:26px}

.record-status h2 {margin:0;font-size:clamp(28px,3vw,48px);letter-spacing:-.05em}

.record-status p {max-width:820px;color:var(--muted);line-height:1.65;margin:10px 0 0}

.next-file {margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-xl);background:radial-gradient(circle at 85% 18%,rgba(158,199,255,.18),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.018));padding:30px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}

.next-file h2 {margin:8px 0 0;font-size:clamp(28px,3vw,52px);letter-spacing:-.06em}

.next-file p {color:var(--muted);line-height:1.7;max-width:760px}

.footer {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 0 0;color:var(--muted-2);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.09em}

.footer-links {display:flex;gap:18px;flex-wrap:wrap}

@media (min-width:1921px) {:root{--max:1860px;--gutter:68px}.reading-layout{grid-template-columns:360px minmax(0,980px) 320px}.chapter-prose{font-size:20px}.hero{min-height:720px}}

@media (max-width:1240px) {.reading-layout{grid-template-columns:280px minmax(0,1fr)}.right-panel{display:none}.hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:960px) {.topbar-inner{grid-template-columns:auto auto;justify-content:space-between}.nav,.header-actions .small-status{display:none}.mobile-menu{display:inline-flex}.topbar.open .nav{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 1px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:10px;border:1px solid var(--line);border-radius:0 0 18px 18px;background:rgba(7,9,12,.96);backdrop-filter:blur(20px)}.topbar.open .nav a{padding:14px;border-radius:12px}.topbar.open .nav a:hover{background:rgba(255,255,255,.045)}.reading-layout{grid-template-columns:1fr}.side-panel{position:relative;top:auto}.hero-meta{grid-template-columns:1fr 1fr}.next-file{grid-template-columns:1fr}}

@media (max-width:620px) {:root{--gutter:14px}.topbar-inner{padding:12px var(--gutter)}.logo{font-size:17px;letter-spacing:.22em}.logo-mark{width:26px;height:26px}.topbar.open .nav{grid-template-columns:1fr}.hero{min-height:auto}.hero-content{padding:34px 20px}h1{font-size:clamp(46px,14vw,72px);line-height:.92;letter-spacing:-.06em}.hero::after{display:none}.hero-meta,.insert-grid{grid-template-columns:1fr}.chapter-head,.chapter-prose{padding:24px 20px}.chapter-prose{font-size:16px}.side-panel,.chapter-card,.record-status,.next-file{border-radius:22px}.hero-actions{flex-direction:column}.btn{width:100%}}

.page-shell {
  width: min(100%, calc(var(--max) + var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

.hero,
.chapter-hero {
  position: relative;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 560px;
  background:
    linear-gradient(90deg, rgba(7,9,12,.98) 0%, rgba(7,9,12,.88) 45%, rgba(7,9,12,.24) 100%),
    radial-gradient(circle at 75% 28%, rgba(158,199,255,.18), transparent 24%),
    linear-gradient(135deg, #101722, #07090c 62%);
  box-shadow: 0 30px 90px rgba(0,0,0,.46);
}

.hero::before,
.chapter-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .62;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg width='1300' height='650' viewBox='0 0 1300 650' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M790 65h220v520H790z' fill='%23162029'/%3E%3Cpath d='M620 35h190v560H620z' fill='%230d131c'/%3E%3Cpath d='M735 120h35v410h-35zM835 170h25v320h-25zM930 135h36v390h-36z' fill='%2326323e'/%3E%3Cpath d='M500 560h560l-100 55H410z' fill='%23151b23'/%3E%3Cpath d='M610 255h350' stroke='%23526475' stroke-width='2' opacity='.32'/%3E%3Cpath d='M650 370h320' stroke='%23526475' stroke-width='2' opacity='.22'/%3E%3Ccircle cx='720' cy='214' r='5' fill='%23d9a74e' opacity='.8'/%3E%3Ccircle cx='910' cy='316' r='4' fill='%23ef675f' opacity='.8'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.025) 49px, transparent 50px);
  background-size: cover;
  background-position: center right;
}

.hero::after,
.chapter-hero::after {
  display: none !important;
}

.hero-content,
.chapter-hero-content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  min-height: 560px;
  padding: clamp(42px,6vw,92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero h1,
.chapter-hero h1 {
  margin: 32px 0 0;
  font-size: clamp(68px,10vw,164px);
  line-height: .84;
  letter-spacing: -.08em;
  word-spacing: .08em;
  text-transform: uppercase;
}

.hero-copy,
.chapter-teaser,
.dek {
  margin-top: 26px;
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(17px,1.35vw,22px);
  line-height: 1.68;
}

.subtitle {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: clamp(15px,1.4vw,22px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 38px;
  max-width: none;
}

.meta-box {
  min-height: 90px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7,9,12,.54);
  backdrop-filter: none;
}

.meta-box span {
  display: block;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.meta-box strong {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.35;
}

@media (min-width:1921px) {
  :root {
    --max: 1840px;
    --gutter: 68px;
  }

  .hero,
  .chapter-hero {
    min-height: 560px;
  }

  .hero-content,
  .chapter-hero-content {
    min-height: 560px;
  }
}

@media (max-width: 960px) {
  .hero-meta {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .hero,
  .chapter-hero {
    min-height: auto;
  }

  .hero-content,
  .chapter-hero-content {
    min-height: auto;
    padding: 34px 20px;
  }

  .hero h1,
  .chapter-hero h1 {
    font-size: clamp(46px,14vw,72px);
    line-height: .92;
    letter-spacing: -.06em;
    word-spacing: .05em;
  }

  .hero-meta {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }
}



/* ================================================================
   PAGE: page-ghost-authority
================================================================ */

body.page-ghost-authority {
  background:
    radial-gradient(circle at 16% -10%, rgba(87, 129, 169, 0.18), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(217, 167, 78, 0.10), transparent 28%),
        radial-gradient(circle at 54% 46%, rgba(239, 103, 95, 0.08), transparent 34%),
        linear-gradient(180deg, #06080b 0%, #0a0e14 44%, #07090c 100%);
}

.page-shell {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 0 var(--gutter) 72px;
    }

.topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(20px);
      background: rgba(7, 9, 12, 0.82);
      border-bottom: 1px solid var(--line);
    }

.topbar-inner {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 16px var(--gutter);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }

.logo {
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: 0.36em;
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
    }

.logo-mark {
      width: 30px;
      height: 30px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      position: relative;
      box-shadow: inset 0 0 24px rgba(158, 199, 255, 0.12);
    }

.logo-mark::before,
    .logo-mark::after {
      content: "";
      position: absolute;
      background: var(--text);
      opacity: 0.75;
    }

.logo-mark::before { width: 12px; height: 1px; left: 8px; top: 14px; }

.logo-mark::after { width: 1px; height: 12px; left: 14px; top: 8px; }

.nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.11em;
    }

.nav a { transition: color 0.18s ease, text-shadow 0.18s ease; }

.nav a:hover, .nav a.active { color: var(--text); text-shadow: 0 0 16px rgba(158, 199, 255, 0.35); }

.header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
    }

.pill,
    .small-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

.dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--muted);
      box-shadow: 0 0 18px currentColor;
      flex: none;
    }

.dot.amber { background: var(--amber); color: var(--amber); }

.dot.red { background: var(--red); color: var(--red); }

.dot.green { background: var(--green); color: var(--green); }

.dot.blue { background: var(--blue); color: var(--blue); }

.dot.violet { background: var(--violet); color: var(--violet); }

.mobile-menu {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.035);
      color: var(--text);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

.mobile-menu span,
    .mobile-menu span::before,
    .mobile-menu span::after {
      display: block;
      width: 18px;
      height: 1px;
      background: currentColor;
      position: relative;
    }

.mobile-menu span::before,
    .mobile-menu span::after { content: ""; position: absolute; left: 0; }

.mobile-menu span::before { top: -6px; }

.mobile-menu span::after { top: 6px; }

.chapter-hero {
      position: relative;
      margin-top: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 620px;
      background:
        linear-gradient(105deg, rgba(7, 9, 12, 0.98) 0%, rgba(7, 9, 12, 0.88) 48%, rgba(7, 9, 12, 0.34) 100%),
        radial-gradient(circle at 82% 34%, rgba(158,199,255,0.18), transparent 24%),
        linear-gradient(135deg, #101722, #07090c 62%);
      box-shadow: var(--shadow);
    }

.chapter-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        url("data:image/svg+xml,%3Csvg width='1500' height='800' viewBox='0 0 1500 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.55'%3E%3Cpath d='M920 120h260v560H920z' fill='%23162029'/%3E%3Cpath d='M790 190h98v420H790z' fill='%230d131c'/%3E%3Cpath d='M565 230C700 246 778 316 835 394C902 486 1004 542 1168 552' fill='none' stroke='%239ec7ff' stroke-width='2' opacity='.25'/%3E%3Cpath d='M590 340C710 332 790 390 870 468C952 548 1045 596 1220 604' fill='none' stroke='%23d9a74e' stroke-width='2' opacity='.20'/%3E%3Ccircle cx='610' cy='236' r='6' fill='%23edf3f7' opacity='.64'/%3E%3Ccircle cx='710' cy='270' r='5' fill='%239ec7ff'/%3E%3Ccircle cx='812' cy='370' r='7' fill='%23ef675f'/%3E%3Ccircle cx='900' cy='484' r='5' fill='%23edf3f7' opacity='.72'/%3E%3Ccircle cx='1042' cy='546' r='6' fill='%23d9a74e'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, transparent 0 52px, rgba(255,255,255,0.025) 53px, transparent 54px);
      background-position: center right;
      background-size: cover;
      opacity: 0.78;
      pointer-events: none;
    }

.chapter-hero::after {
      content: "GHOST AUTHORITY";
      position: absolute;
      right: clamp(28px, 6vw, 110px);
      bottom: clamp(24px, 5vw, 70px);
      color: rgba(237,243,247,0.07);
      font-family: var(--mono);
      font-size: clamp(42px, 6vw, 118px);
      letter-spacing: 0.06em;
      pointer-events: none;
      text-transform: uppercase;
    }

.chapter-hero-content {
      position: relative;
      z-index: 1;
      padding: clamp(42px, 6vw, 92px);
      max-width: 1060px;
      min-height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.035);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

h1 {
      margin: 30px 0 0;
      max-width: 980px;
      font-size: clamp(64px, 8vw, 142px);
      line-height: 0.9;
      letter-spacing: -0.075em;
      font-weight: 850;
      text-transform: uppercase;
    }

.subtitle {
      margin: 26px 0 0;
      font-family: var(--mono);
      color: var(--text);
      font-size: clamp(15px, 1.3vw, 22px);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

.chapter-teaser {
      margin: 24px 0 0;
      max-width: 820px;
      color: var(--muted);
      font-size: clamp(17px, 1.25vw, 22px);
      line-height: 1.75;
    }

.hero-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 42px;
      max-width: 1080px;
    }

.meta-box {
      min-height: 90px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(7,9,12,0.5);
      backdrop-filter: blur(14px);
    }

.meta-box span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

.meta-box strong {
      display: block;
      margin-top: 10px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 14px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

.read-layout {
      display: grid;
      grid-template-columns: 290px minmax(0, 820px) 290px;
      gap: 24px;
      align-items: start;
      margin-top: 28px;
    }

.side-panel {
      position: sticky;
      top: 86px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(13, 17, 23, 0.72);
      box-shadow: 0 18px 70px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      padding: 20px;
    }

.side-block + .side-block {
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

.side-title {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

.side-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

.side-list li,
    .mini-record {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

.side-list b,
    .mini-record b {
      display: block;
      color: var(--text);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      margin-bottom: 5px;
    }

.article-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(13,17,23,0.84);
      box-shadow: 0 18px 70px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

.article-header {
      padding: clamp(26px, 4vw, 46px);
      border-bottom: 1px solid var(--line);
      background: rgba(0,0,0,0.14);
    }

.article-header h2 {
      margin: 0;
      font-size: clamp(34px, 4vw, 62px);
      line-height: 0.98;
      letter-spacing: -0.06em;
    }

.article-header p {
      margin: 18px 0 0;
      color: var(--muted);
      line-height: 1.7;
      max-width: 680px;
    }

.chapter-body {
      padding: clamp(26px, 4vw, 54px);
    }

.chapter-body p {
      margin: 0 0 1.45em;
      color: #d5dde6;
      font-family: var(--serif);
      font-size: clamp(18px, 1.18vw, 21px);
      line-height: 1.86;
    }

.chapter-body p:first-of-type::first-letter {
      float: left;
      font-family: var(--sans);
      font-size: 4.1em;
      line-height: 0.76;
      margin: 0.1em 0.12em 0 0;
      color: var(--text);
      font-weight: 800;
    }

.system-insert,
    .analysis-card,
    .document-extract {
      margin: 34px 0;
      padding: 22px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 100% 0%, rgba(158,199,255,0.10), transparent 28%),
        rgba(255,255,255,0.035);
      box-shadow: 0 18px 48px rgba(0,0,0,0.22);
    }

.system-insert {
      border-left: 3px solid var(--blue);
    }

.system-insert .insert-text {
      margin-top: 12px;
      font-family: var(--mono);
      color: var(--text);
      font-size: clamp(15px, 1.1vw, 18px);
      line-height: 1.55;
      letter-spacing: 0.02em;
      text-transform: none;
    }

.insert-label {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

.analysis-card {
      border-left: 3px solid var(--amber);
      background:
        radial-gradient(circle at 100% 0%, rgba(217,167,78,0.13), transparent 28%),
        rgba(255,255,255,0.035);
    }

.metrics {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

.metrics div {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(0,0,0,0.18);
    }

.metrics span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.metrics strong {
      display: block;
      margin-top: 8px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.2;
    }

.document-extract {
      border-left: 3px solid var(--red);
      background:
        repeating-linear-gradient(135deg, rgba(239,103,95,0.045) 0 8px, rgba(255,255,255,0.01) 8px 16px),
        rgba(255,255,255,0.028);
    }

.document-extract p {
      margin: 14px 0 0;
      font-family: var(--mono);
      color: var(--text);
      font-size: 15px;
      line-height: 1.7;
    }

.chapter-end {
      margin: 54px 0 10px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(0,0,0,0.18);
      color: var(--muted);
      font-family: var(--mono);
      text-align: center;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.record-status {
      margin-top: 28px;
      padding: clamp(24px, 3vw, 38px);
      border: 1px solid rgba(217,167,78,0.28);
      border-radius: var(--radius-xl);
      background: linear-gradient(135deg, rgba(217,167,78,0.075), rgba(13,17,23,0.74));
    }

.record-status h2 {
      margin: 8px 0 0;
      font-size: clamp(28px, 3vw, 48px);
      letter-spacing: -0.05em;
    }

.record-status p {
      max-width: 820px;
      color: var(--muted);
      line-height: 1.65;
      margin: 10px 0 0;
    }

.next-panel {
      margin-top: 18px;
      padding: clamp(24px, 3vw, 38px);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 85% 20%, rgba(158,199,255,0.18), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018));
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
    }

.next-panel h2 {
      margin: 8px 0 0;
      font-size: clamp(32px, 4vw, 62px);
      line-height: 0.98;
      letter-spacing: -0.06em;
    }

.next-panel p {
      max-width: 780px;
      color: var(--muted);
      line-height: 1.7;
    }

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
      white-space: nowrap;
    }

.btn:hover { transform: translateY(-2px); border-color: rgba(237,243,247,0.44); }

.btn-primary { background: var(--text); color: #07090c; border-color: var(--text); }

.btn-locked {
      color: var(--muted-2);
      cursor: not-allowed;
      opacity: 0.72;
    }

.footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 32px 0 0;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
    }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (min-width: 1921px) {
      :root { --max: 1860px; --gutter: 68px; }
      .chapter-hero { min-height: 740px; }
      .read-layout { grid-template-columns: 330px minmax(0, 920px) 330px; }
    }

@media (max-width: 1320px) {
      .read-layout {
        grid-template-columns: 260px minmax(0, 1fr);
      }
      .right-panel {
        display: none;
      }
    }

@media (max-width: 980px) {
      .topbar-inner { grid-template-columns: auto auto; justify-content: space-between; }
      .nav, .header-actions .small-status { display: none; }
      .mobile-menu { display: inline-flex; }
      .topbar.open .nav {
        position: absolute;
        left: var(--gutter);
        right: var(--gutter);
        top: calc(100% + 1px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 0 0 18px 18px;
        background: rgba(7, 9, 12, 0.96);
        backdrop-filter: blur(20px);
      }
      .topbar.open .nav a {
        padding: 14px;
        border-radius: 12px;
      }
      .topbar.open .nav a:hover {
        background: rgba(255,255,255,0.045);
      }
      .hero-meta, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .read-layout { grid-template-columns: 1fr; }
      .side-panel { position: relative; top: auto; }
      .left-panel { order: 2; }
      .article-card { order: 1; }
      .next-panel { grid-template-columns: 1fr; }
    }

@media (max-width: 620px) {
      :root { --gutter: 14px; }
      .topbar-inner { padding: 12px var(--gutter); }
      .logo { font-size: 17px; letter-spacing: 0.22em; }
      .logo-mark { width: 26px; height: 26px; }
      .topbar.open .nav { grid-template-columns: 1fr; }
      .chapter-hero { min-height: auto; }
      .chapter-hero-content { padding: 42px 22px; }
      .chapter-hero::after { display: none; }
      h1 { font-size: clamp(38px, 12vw, 62px); line-height: 0.94; letter-spacing: -0.055em; }
      .subtitle { font-size: 13px; letter-spacing: 0.12em; }
      .hero-meta, .metrics { grid-template-columns: 1fr; }
      .chapter-body p { font-size: 18px; line-height: 1.78; }
      .system-insert, .analysis-card, .document-extract { padding: 18px; }
      .btn { width: 100%; }
      .footer { align-items: flex-start; flex-direction: column; }
    }

.page-shell {
      width: min(100%, calc(var(--max) + var(--gutter) * 2));
      margin: 0 auto;
      padding: 0 var(--gutter) 72px;
    }

.hero,
    .chapter-hero {
      position: relative;
      margin-top: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 560px;
      background:
        linear-gradient(90deg, rgba(7,9,12,.98) 0%, rgba(7,9,12,.88) 45%, rgba(7,9,12,.24) 100%),
        radial-gradient(circle at 75% 28%, rgba(158,199,255,.18), transparent 24%),
        linear-gradient(135deg, #101722, #07090c 62%);
      box-shadow: 0 30px 90px rgba(0,0,0,.46);
    }

.hero::before,
    .chapter-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .62;
      pointer-events: none;
      background:
        url("data:image/svg+xml,%3Csvg width='1300' height='650' viewBox='0 0 1300 650' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M790 65h220v520H790z' fill='%23162029'/%3E%3Cpath d='M620 35h190v560H620z' fill='%230d131c'/%3E%3Cpath d='M735 120h35v410h-35zM835 170h25v320h-25zM930 135h36v390h-36z' fill='%2326323e'/%3E%3Cpath d='M500 560h560l-100 55H410z' fill='%23151b23'/%3E%3Cpath d='M610 255h350' stroke='%23526475' stroke-width='2' opacity='.32'/%3E%3Cpath d='M650 370h320' stroke='%23526475' stroke-width='2' opacity='.22'/%3E%3Ccircle cx='720' cy='214' r='5' fill='%23d9a74e' opacity='.8'/%3E%3Ccircle cx='910' cy='316' r='4' fill='%23ef675f' opacity='.8'/%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.025) 49px, transparent 50px);
      background-size: cover;
      background-position: center right;
    }

.hero::after,
    .chapter-hero::after {
      display: none !important;
    }

.hero-content,
    .chapter-hero-content {
      position: relative;
      z-index: 1;
      max-width: 980px;
      min-height: 560px;
      padding: clamp(42px,6vw,92px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.hero h1,
    .chapter-hero h1 {
      margin: 32px 0 0;
      font-size: clamp(68px,10vw,164px);
      line-height: .84;
      letter-spacing: -.08em;
      word-spacing: .08em;
      text-transform: uppercase;
    }

.hero-copy,
    .chapter-teaser,
    .dek {
      margin-top: 26px;
      max-width: 760px;
      color: var(--muted);
      font-size: clamp(17px,1.35vw,22px);
      line-height: 1.68;
    }

.subtitle {
      margin-top: 22px;
      font-family: var(--mono);
      font-size: clamp(15px,1.4vw,22px);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text);
    }

.hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

.hero-meta {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 12px;
      margin-top: 38px;
      max-width: none;
    }

.meta-box {
      min-height: 90px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(7,9,12,.54);
      backdrop-filter: none;
    }

.meta-box span {
      display: block;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

.meta-box strong {
      display: block;
      margin-top: 10px;
      font-family: var(--mono);
      font-size: 14px;
      line-height: 1.35;
    }

@media (min-width:1921px) {
      :root {
        --max: 1840px;
        --gutter: 68px;
      }

      .hero,
      .chapter-hero {
        min-height: 560px;
      }

      .hero-content,
      .chapter-hero-content {
        min-height: 560px;
      }
    }

@media (max-width: 960px) {
      .hero-meta {
        grid-template-columns: 1fr 1fr;
      }
    }

@media (max-width: 620px) {
      .hero,
      .chapter-hero {
        min-height: auto;
      }

      .hero-content,
      .chapter-hero-content {
        min-height: auto;
        padding: 34px 20px;
      }

      .hero h1,
      .chapter-hero h1 {
        font-size: clamp(46px,14vw,72px);
        line-height: .92;
        letter-spacing: -.06em;
        word-spacing: .05em;
      }

      .hero-meta {
        grid-template-columns: 1fr;
      }

      .hero-actions {
        flex-direction: column;
      }
    }