:root {
  /* Typography note: IBM Plex Mono* Mono** from Google Fonts only for tiny cable IDs. */
  --terracotta: #B75E3C;
  --clay: #6F2F24;
  --parchment: #F3DEC2;
  --lacquer: #14100D;
  --brass: #C8A15A;
  --rose: #8E3F45;
  --mauve: #B9A0A5;
  --ink: #2A1A15;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--terracotta);
  color: var(--parchment);
  font-family: Inter, "IBM Plex Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

.console {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(86px, 8vw) 1fr minmax(240px, 22vw);
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(18px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 74% 18%, rgba(185,160,165,.16), transparent 28%),
    linear-gradient(115deg, rgba(111,47,36,.56), transparent 40%),
    var(--terracotta);
  isolation: isolate;
}

.grid-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(200,161,90,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,161,90,.15) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 7.9%, rgba(20,16,13,.18) 8% 8.1%, transparent 8.2% 100%);
  background-size: 100% 13.5vh, 8.333% 100%, 100% 100%;
  opacity: .62;
}

.ghost-script {
  position: absolute;
  left: 18vw;
  top: 9vh;
  color: rgba(243,222,194,.09);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8vw;
  letter-spacing: .08em;
  transform: rotate(-7deg) scaleX(-1);
  white-space: nowrap;
  z-index: -1;
}

.spine, .intel-rail, .plaque, .ticker {
  border: 1px solid rgba(200,161,90,.54);
  box-shadow: 0 24px 60px rgba(20,16,13,.28), inset 0 0 0 1px rgba(243,222,194,.06);
}

.spine {
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(20,16,13,.96), rgba(42,26,21,.91));
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.moon-seal {
  width: 54px;
  aspect-ratio: 1;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, var(--rose) 0 28%, transparent 29%), conic-gradient(from 0deg, transparent 0 8%, rgba(200,161,90,.7) 9% 10%, transparent 11% 100%);
}

.moon-seal span {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  box-shadow: -6px 0 0 var(--parchment);
  opacity: .88;
}

.chapters { display: grid; gap: 16px; width: 100%; }

.chapter {
  appearance: none;
  border: 0;
  border-left: 1px solid rgba(200,161,90,.45);
  background: transparent;
  color: rgba(243,222,194,.58);
  padding: 10px 4px;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .6s ease, border-color .6s ease, transform .6s ease;
}

.chapter b { display: block; color: var(--brass); font-size: 18px; }
.chapter small { writing-mode: vertical-rl; font-size: 9px; }
.chapter.active, .chapter:hover { color: var(--parchment); border-color: var(--brass); transform: translateX(4px); }

.spine-code, .rail-label, .ticker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.spine-code { color: rgba(200,161,90,.7); line-height: 1.8; writing-mode: vertical-rl; }

.treaty-table { display: grid; place-items: center; min-width: 0; }

.plaque {
  position: relative;
  width: min(100%, 910px);
  min-height: 76vh;
  clip-path: polygon(5% 0, 95% 0, 100% 9%, 100% 91%, 95% 100%, 5% 100%, 0 91%, 0 9%);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(200,161,90,.34) 49.85% 50.15%, transparent 50.3%),
    radial-gradient(ellipse at 50% 18%, rgba(200,161,90,.17), transparent 34%),
    linear-gradient(145deg, #14100D 0%, #2A1A15 58%, #14100D 100%);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(28px, 5vw, 72px);
  transition: clip-path 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s ease;
  overflow: hidden;
}

.plaque::before, .plaque::after {
  content: "";
  position: absolute;
  inset: 22px;
  pointer-events: none;
  border: 1px solid rgba(200,161,90,.42);
  clip-path: polygon(7% 0, 93% 0, 100% 12%, 100% 88%, 93% 100%, 7% 100%, 0 88%, 0 12%);
}

.plaque::after { inset: 42px; opacity: .36; }

.plaque-frame {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 45deg, rgba(200,161,90,.09) 0 4deg, transparent 4deg 18deg);
  mask: radial-gradient(ellipse at center, transparent 0 35%, #000 72%);
}

.parchment-cable {
  position: absolute;
  top: 21%;
  left: 50%;
  width: min(74%, 650px);
  padding: 14px 22px;
  transform: translate(-50%, -120px);
  background: linear-gradient(90deg, transparent, var(--parchment) 6% 94%, transparent);
  color: var(--ink);
  text-align: center;
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-size: clamp(18px, 2vw, 28px);
  opacity: .92;
  animation: cableArrival 2.8s cubic-bezier(.2,.8,.2,1) .5s forwards;
}

.hero-stamp { text-align: center; animation: stampIn 1.8s ease .9s both; }
.kicker, .article { font-family: Cinzel, Georgia, serif; color: var(--brass); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; }

h1 {
  margin: 14px 0 8px;
  font-family: Limelight, Copperplate, "Cinzel Decorative", Georgia, serif;
  color: var(--brass);
  font-size: clamp(46px, 8vw, 118px);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(243,222,194,.1), 0 18px 36px rgba(0,0,0,.45);
}

.subline, .chamber-copy p:last-child {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(243,222,194,.78);
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
}

.chamber-copy { margin-top: clamp(38px, 6vh, 72px); text-align: center; transition: opacity .45s ease, transform .45s ease; }
.chamber-copy.changing { opacity: 0; transform: translateY(10px); }

h2 {
  max-width: 760px;
  margin: 12px auto;
  color: var(--parchment);
  font-family: Limelight, Copperplate, Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 66px);
  line-height: 1.05;
  letter-spacing: .055em;
}

.seal-diagram {
  position: absolute;
  right: 8%;
  bottom: 9%;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(200,161,90,.54);
  background: radial-gradient(circle, rgba(142,63,69,.85) 0 24%, transparent 25%), conic-gradient(from var(--spin, 0deg), rgba(200,161,90,.65) 0 7%, transparent 7% 17%, rgba(185,160,165,.34) 17% 23%, transparent 23% 100%);
  transition: border-radius 1s ease, clip-path 1s ease;
}

.seal-core { position: absolute; inset: 39%; border-radius: 50%; background: var(--parchment); box-shadow: 0 0 26px rgba(185,160,165,.42); }
.seal-diagram i { position: absolute; left: 50%; top: 50%; width: 1px; height: 66px; background: rgba(200,161,90,.58); transform-origin: 0 0; }
.seal-diagram i:nth-child(2) { transform: rotate(30deg); } .seal-diagram i:nth-child(3) { transform: rotate(90deg); } .seal-diagram i:nth-child(4) { transform: rotate(150deg); } .seal-diagram i:nth-child(5) { transform: rotate(210deg); } .seal-diagram i:nth-child(6) { transform: rotate(270deg); } .seal-diagram i:nth-child(7) { transform: rotate(330deg); }
.seal-diagram:hover { border-color: var(--parchment); animation: pulseSeal .9s ease; }

.intel-rail { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); background: rgba(20,16,13,.82); padding: 14px; display: grid; gap: 14px; align-content: stretch; }
.rail-card { position: relative; min-height: 0; border: 1px solid rgba(200,161,90,.38); background: linear-gradient(160deg, rgba(243,222,194,.08), rgba(111,47,36,.2)); padding: 28px 12px 12px; overflow: hidden; }
.rail-label { position: absolute; top: 10px; left: 12px; color: var(--brass); }
.map-lines, .cables, .alliance-viz svg { width: 100%; height: 100%; min-height: 120px; }
.map-lines path, .cables path { fill: none; stroke: var(--mauve); stroke-width: 1.4; opacity: .7; }
.map-lines .lat { stroke: var(--brass); opacity: .25; }
.cable { stroke-dasharray: 15 10; animation: cableFlow 6s linear infinite; }
.c2 { animation-direction: reverse; stroke: var(--brass) !important; opacity: .62 !important; }
.cables circle { fill: var(--rose); stroke: var(--brass); }
.alliance-viz line { stroke: rgba(200,161,90,.42); stroke-width: 1; }
.alliance-viz circle { fill: var(--rose); stroke: var(--parchment); stroke-width: 1; transition: cx 1s ease, cy 1s ease; }

.ticker {
  position: absolute;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: 10px;
  height: 27px;
  overflow: hidden;
  display: flex;
  gap: 38px;
  align-items: center;
  background: rgba(20,16,13,.74);
  color: rgba(243,222,194,.66);
  white-space: nowrap;
}
.ticker span { animation: tickerMove 18s linear infinite; }

.scroll-dossier { position: relative; z-index: 4; margin-top: 100vh; }
.chamber { height: 100vh; }

body[data-chamber="cable"] .plaque { clip-path: polygon(3% 0, 97% 0, 100% 6%, 97% 100%, 3% 100%, 0 94%, 0 6%); }
body[data-chamber="alliances"] .plaque { clip-path: polygon(9% 0, 91% 0, 100% 15%, 94% 100%, 6% 100%, 0 85%, 0 15%); transform: translateY(-6px); }
body[data-chamber="accord"] .plaque { clip-path: polygon(7% 0, 93% 0, 100% 10%, 100% 90%, 93% 100%, 7% 100%, 0 90%, 0 10%); }
body[data-chamber="alliances"] .seal-diagram { border-radius: 18%; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
body[data-chamber="accord"] .seal-diagram { border-radius: 50%; }

@keyframes cableArrival { to { transform: translate(-50%, 0); } }
@keyframes stampIn { from { opacity: 0; transform: scale(.94); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes cableFlow { to { stroke-dashoffset: -90; } }
@keyframes tickerMove { to { transform: translateX(-180px); } }
@keyframes pulseSeal { 50% { box-shadow: 0 0 0 9px rgba(200,161,90,.16), 0 0 40px rgba(185,160,165,.35); } }

@media (max-width: 900px) {
  .console { grid-template-columns: 68px 1fr; grid-template-rows: 1fr auto; padding-bottom: 52px; }
  .intel-rail { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, 1fr); max-height: 165px; }
  .rail-card { min-height: 116px; }
  .plaque { min-height: 60vh; }
  .ghost-script { font-size: 14vw; left: 6vw; }
}

@media (max-width: 620px) {
  .console { grid-template-columns: 1fr; gap: 10px; }
  .spine { display: none; }
  .intel-rail { display: none; }
  .plaque { min-height: calc(100vh - 76px); }
  .parchment-cable { width: 88%; top: 15%; }
  .seal-diagram { width: 92px; right: 9%; bottom: 6%; }
}