:root {
  /* Compliance vocabulary: pull-quotes. compass rose icon (rendered as an SVG in #d4a04a) IBM Plex Mono" (Google Fonts Interactions:** Interactive Section IntersectionObserver` to trigger sequential text reveals. Each line of output is initially `opacity: 0 IntersectionObserver` with `threshold: 0.15`. On intersection */
  --midnight: #0a0f1c;
  --navy: #121a2e;
  --green: #33ff66;
  --ink: #c8d0e0;
  --amber: #d4a04a;
  --sepia: #8b7355;
  --crimson: #c44040;
  --parchment: #e8e0d2;
  --mono: "IBM Plex Mono", monospace;
  --hand: "Caveat", cursive;
  --body: "Kalam", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 12%, rgba(51,255,102,0.08), transparent 24rem),
    radial-gradient(circle at 72% 34%, rgba(212,160,74,0.08), transparent 28rem),
    linear-gradient(135deg, rgba(18,26,46,0.4), rgba(10,15,28,0.9));
  z-index: 0;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(10,15,28,0.05) 2px, rgba(10,15,28,0.05) 4px);
  mix-blend-mode: screen;
}

main { position: relative; z-index: 1; }

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--midnight);
  overflow: hidden;
}

.boot-panel {
  position: absolute;
  z-index: 6;
  width: min(880px, 88vw);
  padding: 2rem;
  font-family: var(--mono);
  color: var(--green);
  text-shadow: 0 0 8px rgba(51,255,102,0.4);
  letter-spacing: 0.05em;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.boot-panel.done {
  opacity: 0;
  transform: translateY(-32px);
  pointer-events: none;
}

.boot-line {
  width: 0;
  max-width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 1rem;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  border-right: 12px solid var(--green);
}

.line-one { animation: typing-one 1s steps(22) 0.8s forwards, cursor-flicker 1s step-end infinite; }
.line-two { animation: typing-two 1.2s steps(39) 1.55s forwards, cursor-flicker 1s step-end infinite; }

.boot-hint {
  opacity: 0;
  margin-top: 2rem;
  color: rgba(51,255,102,0.55);
  font-size: 0.72rem;
  animation: hint 0.5s ease 2.8s forwards;
}

.hero-reveal {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
  opacity: 0;
  transform: translate(-12%, 18%) rotate(-5deg);
  transition: clip-path 1s cubic-bezier(0.22,1,0.36,1), opacity 1s ease, transform 1s cubic-bezier(0.22,1,0.36,1);
}

.hero-reveal.booted {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  clip-path: polygon(0 4%, 100% 0, 100% 94%, 0 100%);
}

.photo-field, .hero-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(18,26,46,0.2), rgba(18,26,46,0.2)),
    radial-gradient(circle at 32% 38%, rgba(232,224,210,0.28) 0 3%, transparent 3.2%),
    radial-gradient(circle at 38% 42%, rgba(232,224,210,0.2) 0 2.4%, transparent 2.6%),
    radial-gradient(circle at 45% 36%, rgba(232,224,210,0.18) 0 3.2%, transparent 3.4%),
    radial-gradient(circle at 55% 44%, rgba(232,224,210,0.22) 0 2.8%, transparent 3%),
    radial-gradient(circle at 66% 37%, rgba(232,224,210,0.16) 0 3.5%, transparent 3.7%),
    linear-gradient(122deg, #0a0f1c, #121a2e 48%, #8b7355 130%);
  filter: grayscale(0.5) sepia(0.35) contrast(1.1) brightness(0.85);
}

.hero-copy {
  position: relative;
  width: min(1040px, 86vw);
  padding: 5rem 3rem;
}

.terminal-kicker {
  font-family: var(--mono);
  color: var(--green);
  text-shadow: 0 0 8px rgba(51,255,102,0.4);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  letter-spacing: 0.05em;
}

h1, h2 {
  font-family: var(--hand);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 1px 1px 0px rgba(10,15,28,0.3);
  margin: 0;
}

h1 { font-size: clamp(3.4rem, 8vw, 7.5rem); max-width: 940px; }
h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); }

p {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.75;
}

.field-stack {
  position: relative;
  padding: 0 0 8rem;
  margin-top: -5rem;
}

.note-slab {
  position: relative;
  min-height: 74vh;
  width: min(1120px, 92vw);
  margin: -3.5rem auto 0;
  padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem);
  background:
    linear-gradient(90deg, rgba(51,255,102,0.08), transparent 22%),
    linear-gradient(145deg, var(--navy), #0d1425 70%);
  box-shadow: 0 28px 80px rgba(0,0,0,0.42);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}

.reveal-on-scroll:not(.visible):not(.booted) { opacity: 0; transform: translateY(40px) rotate(-1deg); }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0) rotate(0deg); }

.slab-a { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); transform: rotate(4deg); z-index: 10; }
.slab-b { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 94%); transform: rotate(-3deg); z-index: 20; }
.slab-c { clip-path: polygon(0 6%, 100% 0, 100% 92%, 0 100%); transform: rotate(5deg); z-index: 30; }
.slab-d { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 95%); transform: rotate(-4deg); z-index: 40; }

.note-slab p:not(.terminal-kicker) { max-width: 660px; color: var(--ink); }
.prompt-border { position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--green); box-shadow: 0 0 12px rgba(51,255,102,0.45); }

.thumb {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 5px solid var(--parchment);
  box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset 0 0 30px rgba(10,15,28,0.55);
  filter: sepia(0.7) contrast(1.2);
  background: radial-gradient(circle at 50% 35%, rgba(232,224,210,0.42), transparent 18%), linear-gradient(135deg, #8b7355, #121a2e);
}
.thumb-one { right: 12%; top: 18%; transform: rotate(3deg); }
.thumb-two { left: 8%; bottom: 14%; transform: rotate(-5deg); }
.thumb-three { right: 10%; bottom: 18%; transform: rotate(4deg); }
.thumb-four { right: 16%; top: 16%; transform: rotate(-2deg); }

.circle-note {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.15rem 0.9rem;
  color: var(--amber);
  font: 700 1.35rem var(--hand);
  border: 3px solid var(--crimson);
  border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
  transform: rotate(-4deg);
}

.asterism { color: var(--amber); font: 700 3rem var(--hand); margin-top: 2rem; letter-spacing: 0.2em; }

.scribble { position: absolute; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--crimson); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 0.8s ease-in-out; }
.visible .scribble path, .booted .scribble path { stroke-dashoffset: 0; }
.underline-one { width: min(520px, 60vw); left: 2rem; bottom: 4rem; }
.underline-two { width: min(420px, 58vw); left: 0; bottom: -1rem; }
.arrow { width: 260px; right: 10%; top: 46%; }
.arrow path { stroke: var(--amber); stroke-dasharray: 260; stroke-dashoffset: 260; transition-duration: 1.2s; }

.query-section { min-height: 100vh; display: grid; place-items: center; padding: 8rem 1.5rem; position: relative; }
.compass { position: absolute; top: 7%; right: 12%; width: 92px; opacity: 0.68; transform: rotate(13deg); }
.compass path, .compass circle { fill: none; stroke: var(--amber); stroke-width: 3; }

.terminal-window {
  width: min(680px, 94vw);
  background: rgba(10,15,28,0.96);
  border: 1px solid rgba(51,255,102,0.72);
  border-radius: 8px;
  box-shadow: inset 0 0 60px rgba(10,15,28,0.5), 0 0 50px rgba(51,255,102,0.1), 0 28px 80px rgba(0,0,0,0.52);
  color: var(--green);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(51,255,102,0.4);
  letter-spacing: 0.05em;
  overflow: hidden;
}

.terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(51,255,102,0.03) 2px 4px);
  pointer-events: none;
}

.terminal-bar { position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(51,255,102,0.3); background: rgba(18,26,46,0.75); }
.terminal-bar span { width: 10px; height: 10px; border: 1px solid var(--green); border-radius: 50%; }
.terminal-bar strong { margin-left: auto; font-size: 0.72rem; font-weight: 400; color: rgba(51,255,102,0.74); }
.terminal-output { position: relative; padding: 2rem; min-height: 360px; }
.query-command, .result-line { margin: 0 0 1rem; font-size: clamp(0.85rem, 1.2vw, 1.05rem); line-height: 1.6; }
.query-command i { display: inline-block; width: 12px; height: 2px; margin-left: 6px; background: var(--green); animation: blink 1s step-end infinite; vertical-align: middle; }
.result-line { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: calc(var(--line-index) * 200ms); }
.terminal-window.active .result-line { opacity: 1; transform: translateY(0); }
.result-line span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.terminal-window.active .result-line span { animation: reveal-text 1.8s steps(72) forwards; animation-delay: calc(var(--line-index) * 200ms); }

.darkroom {
  min-height: 120vh;
  padding: clamp(5rem, 9vw, 9rem) 5vw 7rem;
  background: linear-gradient(150deg, #121a2e, #0a0f1c 62%);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  position: relative;
}
.darkroom-heading { position: relative; width: min(860px, 88vw); margin: 0 auto 3rem; }
.photo-table { position: relative; min-height: 760px; width: min(1120px, 94vw); margin: 0 auto; }
.polaroid {
  position: absolute;
  width: min(300px, 42vw);
  margin: 0;
  padding: 8px 8px 1.1rem;
  background: var(--parchment);
  color: var(--sepia);
  box-shadow: 0 18px 42px rgba(0,0,0,0.48);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.6s ease;
}
.polaroid:hover { transform: scale(1.08) rotate(0deg); z-index: 10; }
.evidence-photo { height: 220px; filter: grayscale(0.6) sepia(0.4); background-blend-mode: multiply; box-shadow: inset 0 0 55px rgba(18,26,46,0.4); transition: filter 0.6s ease; }
.polaroid:hover .evidence-photo { filter: grayscale(0) sepia(0.15); }
.photo-one { background: radial-gradient(circle at 35% 42%, #e8e0d2 0 8%, transparent 9%), radial-gradient(circle at 58% 44%, #e8e0d2 0 7%, transparent 8%), linear-gradient(135deg, #8b7355, #121a2e); }
.photo-two { background: radial-gradient(circle at 50% 28%, #e8e0d2 0 9%, transparent 10%), linear-gradient(15deg, transparent 44%, rgba(232,224,210,0.28) 45% 52%, transparent 53%), linear-gradient(135deg, #121a2e, #8b7355); }
.photo-three { background: repeating-radial-gradient(circle at 50% 45%, rgba(232,224,210,0.25) 0 8px, transparent 9px 28px), linear-gradient(135deg, #8b7355, #121a2e); }
.photo-four { background: linear-gradient(90deg, transparent 0 18%, rgba(232,224,210,0.22) 18% 21%, transparent 21% 46%, rgba(232,224,210,0.18) 46% 49%, transparent 49%), linear-gradient(135deg, #121a2e, #8b7355); }
.photo-five { background: radial-gradient(ellipse at 40% 60%, rgba(232,224,210,0.28), transparent 25%), repeating-linear-gradient(90deg, rgba(232,224,210,0.18) 0 6px, transparent 7px 18px), linear-gradient(135deg, #8b7355, #121a2e); }
.polaroid figcaption { margin: 0.85rem 0.2rem 0; font: 400 1.12rem var(--body); line-height: 1.35; }
.p1 { left: 4%; top: 4%; transform: rotate(-3deg); }
.p2 { left: 36%; top: 0; transform: rotate(2deg); }
.p3 { right: 4%; top: 16%; transform: rotate(-2deg); }
.p4 { left: 18%; top: 48%; transform: rotate(3deg); }
.p5 { right: 18%; top: 54%; transform: rotate(-4deg); }
.terminal-cursor { width: 12px; height: 2px; background: var(--green); margin: 4rem auto 0; animation: blink 1s step-end infinite; box-shadow: 0 0 8px rgba(51,255,102,0.4); }

@keyframes typing-one { to { width: 24ch; } }
@keyframes typing-two { to { width: 42ch; } }
@keyframes hint { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes cursor-flicker { 50% { border-color: transparent; } }
@keyframes reveal-text { to { max-width: 100%; } }

@media (max-width: 760px) {
  .hero-copy { padding: 4rem 1.5rem; }
  .note-slab { width: 96vw; padding: 4rem 1.5rem; }
  .thumb { opacity: 0.45; }
  .arrow { display: none; }
  .terminal-output { padding: 1.25rem; }
  .result-line span { white-space: normal; max-width: 100%; }
  .terminal-window.active .result-line span { animation: none; }
  .photo-table { min-height: 1550px; }
  .polaroid { width: min(320px, 82vw); left: 50% !important; right: auto !important; }
  .p1 { top: 0; transform: translateX(-50%) rotate(-3deg); }
  .p2 { top: 300px; transform: translateX(-50%) rotate(2deg); }
  .p3 { top: 600px; transform: translateX(-50%) rotate(-2deg); }
  .p4 { top: 900px; transform: translateX(-50%) rotate(3deg); }
  .p5 { top: 1200px; transform: translateX(-50%) rotate(-4deg); }
  .polaroid:hover { transform: translateX(-50%) scale(1.04) rotate(0deg); }
}