:root {
  --midnight: #081526;
  --lacquer: #02070D;
  --indigo: #193652;
  --clay: #8B5E3C;
  --brass: #B08A4A;
  --paper: #E8DDC7;
  --rust: #A7472E;
  --moss: #35483A;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 12%, rgba(25, 54, 82, 0.78), transparent 36rem),
    radial-gradient(circle at 80% 28%, rgba(53, 72, 58, 0.38), transparent 32rem),
    linear-gradient(145deg, var(--lacquer), var(--midnight) 42%, #06101d 74%, var(--lacquer));
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 221, 199, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 221, 199, 0.018) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  transform: translate3d(var(--scan-x, 0px), var(--scan-y, 0px), 0);
  pointer-events: none;
  opacity: 0.6;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .19;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,221,199,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 16%, rgba(176,138,74,.26) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(167,71,46,.22) 0 1px, transparent 1px);
  background-size: 9px 11px, 13px 17px, 21px 23px;
  animation: dust 18s steps(8) infinite;
}

.tracking-skip {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(167, 71, 46, .18) 43%, transparent 45%, rgba(176, 138, 74, .14) 52%, transparent 54%);
}

.tracking-skip.active { animation: tapeSkip .48s steps(2); }

.thread-field {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: visible;
  opacity: .78;
  pointer-events: none;
}

.thread-field path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.2;
  stroke-dasharray: 22 16;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(176, 138, 74, .25));
  transform: translate(calc(var(--thread-x, 0) * 1px), calc(var(--thread-y, 0) * 1px));
}

.thread-field .thread-shadow { stroke: rgba(167, 71, 46, .42); stroke-width: 1; stroke-dasharray: 5 18; }

.continuity { position: relative; z-index: 1; }

.scene {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 6vw, 86px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(68px, auto);
  gap: clamp(14px, 2vw, 28px);
  align-content: center;
}

.module {
  position: relative;
  border: 1px solid rgba(232, 221, 199, .16);
  box-shadow: 0 28px 80px rgba(2, 7, 13, .52), inset 0 1px 0 rgba(232, 221, 199, .08);
  transform: translate3d(0, var(--offset, 28px), 0) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform 1.4s cubic-bezier(.19, 1, .22, 1), opacity 1.2s ease, box-shadow .35s ease;
}

.module.visible { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }

.module:hover { box-shadow: 0 34px 92px rgba(2, 7, 13, .66), inset 0 0 0 1px rgba(176, 138, 74, .22); }

.module::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(176, 138, 74, .18);
  pointer-events: none;
}

.module::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 72%;
  top: 14%;
  left: calc(50% + var(--crack, 8px));
  background: linear-gradient(180deg, transparent, rgba(176, 138, 74, .65), rgba(167, 71, 46, .35), transparent);
  transform: skewX(-12deg);
  opacity: .45;
  pointer-events: none;
}

.night-slab {
  background:
    radial-gradient(circle at 20% 24%, rgba(25, 54, 82, .8), transparent 32%),
    linear-gradient(135deg, rgba(2, 7, 13, .98), rgba(8, 21, 38, .94) 64%, rgba(25, 54, 82, .88));
}

.paper {
  color: var(--lacquer);
  background:
    radial-gradient(circle at 15% 10%, rgba(176,138,74,.2), transparent 28%),
    linear-gradient(145deg, #E8DDC7, #d7c7a9 58%, #cbb58f);
}

.clay { background: linear-gradient(145deg, rgba(139,94,60,.96), rgba(93,58,39,.96)); }
.moss { background: linear-gradient(145deg, rgba(53,72,58,.98), rgba(23,43,38,.96)); }
.indigo { background: linear-gradient(145deg, rgba(25,54,82,.98), rgba(5,16,31,.98)); }

.hero-slab {
  grid-column: 2 / 11;
  min-height: 62vh;
  padding: clamp(28px, 6vw, 72px);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --tilt: -.35deg;
}

.title-wrap { position: absolute; left: clamp(28px, 7vw, 90px); bottom: clamp(42px, 8vw, 92px); }

.domain-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(78px, 15vw, 210px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: .78;
  color: var(--paper);
  text-shadow: 0 8px 28px rgba(2, 7, 13, .55);
}

.title-continu { display: inline-block; animation: inkSettle 1.8s ease both; }
.title-st { display: inline-block; animation: arriveLate 1.2s .8s cubic-bezier(.19, 1, .22, 1) both; }

.dot-joint {
  appearance: none;
  border: 0;
  margin: 0 .01em 0 .02em;
  padding: 0;
  color: var(--brass);
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  display: inline-block;
  filter: drop-shadow(0 0 12px rgba(176, 138, 74, .48));
  animation: dotBreath 4.5s ease-in-out infinite, arriveLate 1.2s .55s cubic-bezier(.19, 1, .22, 1) both;
}

.dot-joint[data-state="moon"] { color: var(--paper); text-shadow: 0 0 20px rgba(232, 221, 199, .62); }
.dot-joint[data-state="burn"] { color: var(--rust); filter: drop-shadow(0 0 11px rgba(167, 71, 46, .6)); }
.dot-joint[data-state="pixel"] { color: transparent; width: .18em; height: .18em; background: var(--brass); transform: translateY(-.12em); }

.subtitle { margin: 24px 0 0; max-width: 520px; color: rgba(232, 221, 199, .72); font-style: italic; font-size: clamp(17px, 2vw, 24px); }

.mono {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.5;
}

.top-tab {
  position: absolute;
  top: -14px;
  left: 28px;
  margin: 0;
  padding: 8px 13px;
  color: var(--lacquer);
  background: var(--brass);
  box-shadow: 0 10px 22px rgba(2,7,13,.28);
}

.vertical-pause {
  position: absolute;
  right: clamp(22px, 4vw, 54px);
  top: 12%;
  bottom: 12%;
  width: 42px;
  border-left: 1px solid rgba(176,138,74,.62);
  border-right: 1px dashed rgba(232,221,199,.18);
  display: grid;
  place-items: center;
  color: rgba(232,221,199,.62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.repair-block { padding: 24px; min-height: 180px; clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.repair-block p:last-child { margin: 18px 0 0; font-size: 15px; line-height: 1.7; }
.small-a { grid-column: 1 / 4; grid-row: 6 / span 2; --tilt: .8deg; }
.small-b { grid-column: 9 / 13; grid-row: 2 / span 2; --tilt: -.7deg; }
.small-c { grid-column: 7 / 10; grid-row: 7 / span 2; --tilt: .45deg; }

.pin-hole, .wax-circle {
  width: 18px; height: 18px; border-radius: 50%; display: block; margin-bottom: 18px;
  background: radial-gradient(circle, var(--lacquer) 0 26%, var(--rust) 30% 44%, transparent 46%);
}

.section-mark {
  grid-column: 2 / 12;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(232,221,199,.68);
}

.seal-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 5px rgba(176,138,74,.12); }
.seal-dot.burn { background: var(--rust); box-shadow: 0 0 0 5px rgba(167,71,46,.14); }
.seal-dot.moon { background: var(--paper); box-shadow: 0 0 20px rgba(232,221,199,.36); }

.wide-block {
  grid-column: 2 / 8;
  padding: clamp(28px, 4vw, 58px);
  min-height: 420px;
  --tilt: -.55deg;
}

.wide-block h2, .archive-slab h2 {
  margin: 18px 0 22px;
  font-family: var(--display);
  font-size: clamp(46px, 7vw, 92px);
  line-height: .9;
  font-weight: 600;
}

.wide-block p:not(.mono), .archive-slab p:not(.mono) { font-size: clamp(17px, 2vw, 22px); line-height: 1.8; max-width: 720px; }

.chipped { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%, 0 20px); }

.thread-module {
  grid-column: 7 / 12;
  min-height: 270px;
  padding: 26px;
  background: linear-gradient(145deg, rgba(2,7,13,.86), rgba(25,54,82,.68));
  overflow: hidden;
  --tilt: .6deg;
}

.contour, .exit-line { width: 100%; height: 78%; }
.contour path, .exit-line path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  opacity: .85;
}
.visible .contour path, .visible .exit-line path { animation: drawLine 2.6s ease forwards; }
.visible .contour path:nth-child(2) { animation-delay: .28s; stroke: rgba(232,221,199,.45); }
.visible .contour path:nth-child(3) { animation-delay: .52s; stroke: rgba(167,71,46,.48); }

.cassette-lines { position: absolute; inset: 22px; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(232,221,199,.08) 19px 20px); mix-blend-mode: screen; }
.drawer { grid-column: 3 / 6; min-height: 230px; --tilt: 1deg; }
.drawer:hover { background: linear-gradient(145deg, rgba(232,221,199,.92), rgba(139,94,60,.78)); color: var(--lacquer); }

.archive-slab { grid-column: 3 / 11; min-height: 62vh; padding: clamp(32px, 6vw, 76px); overflow: hidden; --tilt: .28deg; }
.rings { position: absolute; inset: auto 8% 5% auto; width: min(44vw, 460px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 18px, rgba(176,138,74,.24) 19px 20px, transparent 21px 34px); opacity: .6; animation: ringDrift 16s ease-in-out infinite; }
.archive-note.one { grid-column: 1 / 4; grid-row: 7 / span 2; --tilt: -1deg; }
.archive-note.two { grid-column: 9 / 12; grid-row: 6 / span 2; --tilt: .7deg; }
.archive-note.three { grid-column: 5 / 8; grid-row: 8 / span 2; --tilt: -.4deg; }

.final-paper { grid-column: 2 / 9; background: linear-gradient(145deg, #E8DDC7, #d6c29e 60%, #8B5E3C); color: var(--lacquer); }
.stamp-tab {
  margin-top: 24px;
  border: 1px solid var(--rust);
  background: rgba(167,71,46,.08);
  color: var(--rust);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 11px 16px;
  transform: rotate(-1deg);
}
.exit-thread { grid-column: 5 / 13; min-height: 230px; align-self: end; }

.flicker { animation: labelFlicker 5.2s steps(1) infinite; }
.glitching { animation: materialGlitch .42s steps(2); }

@keyframes dust { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1%,1%); } 50% { transform: translate(1%,-1%); } 75% { transform: translate(.5%,.7%); } }
@keyframes tapeSkip { 0%,100% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-9px); } 60% { opacity: .5; transform: translateY(6px); } }
@keyframes inkSettle { from { opacity: 0; filter: blur(10px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes arriveLate { from { opacity: 0; transform: translate(-18px, 12px); filter: blur(6px); } to { opacity: 1; transform: translate(0, 0); filter: blur(0); } }
@keyframes dotBreath { 0%,100% { opacity: .74; } 50% { opacity: 1; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes ringDrift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-18px,10px) rotate(8deg); } }
@keyframes labelFlicker { 0%, 92%, 100% { opacity: .88; transform: translateX(0); } 93% { opacity: .28; transform: translateX(2px); } 94% { opacity: 1; transform: translateX(-1px); } }
@keyframes materialGlitch { 0%,100% { transform: translate3d(0,0,0) rotate(var(--tilt, 0deg)); } 30% { transform: translate3d(8px,-2px,0) rotate(var(--tilt, 0deg)); } 60% { transform: translate3d(-5px,3px,0) rotate(var(--tilt, 0deg)); } }

@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; padding: 24px; min-height: auto; }
  .hero { min-height: 100vh; }
  .hero-slab, .small-a, .small-b, .small-c, .section-mark, .wide-block, .thread-module, .drawer, .archive-slab, .archive-note.one, .archive-note.two, .archive-note.three, .final-paper, .exit-thread { grid-column: 1; grid-row: auto; }
  .hero-slab { min-height: 70vh; }
  .title-wrap { left: 24px; right: 24px; }
  .domain-title { font-size: clamp(68px, 20vw, 116px); }
  .vertical-pause { display: none; }
}