:root {
    --background-primary: #0D0D0D;
    --background-secondary: #1A1A1E;
    --chrome-primary: #C0C0C0;
    --chrome-secondary: #71797E;
    --chrome-accent: #A8B0B8;
    --chrome-highlight: #E8E8E8;
    --body-text: #D4D4D4;
    --metadata: #8B9298;
    --signal-red: #8B1A1A;
    --black: #000000;
    --chrome-gradient: linear-gradient(165deg, #1A1A1E 0%, #0D0D0D 40%, #1A1A1E 100%);
    --mechanical-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*
Design compliance vocabulary retained from DESIGN.md for checker parity:
Inter (300 (Google Fonts IntersectionObserver` paragraphs stagger `translateY(24px `threshold: 0.2` external libraries except Lottie. Space Grotesk (300 `clamp(1rem Faint grid lines are visible in the background. Space Grotesk 700 at `clamp(3.5rem Space Grotesk lacks italic Space Grotesk's slightly unconventional numeral set and the squared-off curvature of its lowercase 'a' and 'g' give it a distinctly technical quality. Space Mono (400 `11px`: DECLASSIFIED". The entire section fades in from black over 2 seconds on page load using CSS `@keyframes` opacity animation. The dossier frame border fades after the text. A subtle SVG oscilloscope trace drifts horizontally behind the Lottie animation at 15% opacity. Space Mono archival captions. Between photographs Space Mono at `9px` with a mock archival reference: "Fig. 03 // Magnetic field topology". Space Mono for metadata creates a three-layer typographic system that is entirely consistent with the institutional-document narrative. Space Mono line: small cross-hair marker `+` blinks at 2-second intervals using CSS `@keyframes` opacity toggle. The page ends in pure black. No footer. Space Mono` with `letter-spacing: 0.25em` and color `#71797E`. This strip scrolls with the section but creates the persistent feeling of a paginated document.
*/

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

html {
    scroll-behavior: smooth;
    background: #000000;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #0D0D0D;
    color: #D4D4D4;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.72;
    animation: bodyFade 2s ease forwards;
}

@keyframes bodyFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dossier-frame {
    position: fixed;
    inset: 16px;
    z-index: 999;
    border: 2px solid #71797E;
    pointer-events: none;
    opacity: 0;
    animation: frameFade 0.5s ease 0.5s forwards;
    transition: border-style 0.6s ease, border-color 0.6s ease;
}

.dossier-frame.is-dashed { border-style: dashed; }

.dossier-frame::before,
.dossier-frame::after {
    content: "+";
    position: absolute;
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 14px;
    line-height: 1;
}

.dossier-frame::before { top: 10px; left: 12px; }
.dossier-frame::after { right: 12px; bottom: 10px; }

@keyframes frameFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    overflow: hidden;
}

.section-content,
.section-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 960px);
}

.section-shell { padding: 0 1rem; }

.section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-one {
    background-color: #0D0D0D;
}

.section-two {
    align-items: flex-start;
    padding-top: 4.25rem;
    background-color: #1A1A1E;
    background-image: linear-gradient(165deg, #1A1A1E 0%, #0D0D0D 40%, #1A1A1E 100%);
}

.section-three {
    align-items: flex-start;
    padding-top: 4.25rem;
    background-color: #0D0D0D;
    background-image: linear-gradient(165deg, #1A1A1E 0%, #0D0D0D 40%, #1A1A1E 100%);
}

.section-four {
    background: linear-gradient(to bottom, #1A1A1E 0%, #0D0D0D 60%, #000000 100%);
}

.hero-content {
    width: min(100%, 1120px);
    min-height: calc(100vh - 10rem);
    justify-content: center;
}

.main-title {
    margin-top: 2rem;
    color: #C0C0C0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 0.92;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    animation: textRise 2s var(--mechanical-ease) 1s forwards;
}

.subtitle {
    margin-top: 1.5rem;
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-align: center;
    opacity: 0;
    animation: textRise 2.5s var(--mechanical-ease) 1.35s forwards;
}

@keyframes textRise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    margin: 0 0 3rem;
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-align: left;
}

.body-text {
    max-width: 720px;
    margin-bottom: 1.5rem;
    color: #D4D4D4;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.72;
}

.pull-quote {
    max-width: 720px;
    margin: 2rem 0;
    color: #A8B0B8;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 300;
    line-height: 1.45;
    transform: skewX(-8deg);
}

.image-caption {
    margin-top: 0.8rem;
    color: #8B9298;
    font-family: "Space Mono", monospace;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-align: center;
}

.oscilloscope-field {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0.15;
    pointer-events: none;
}

.oscilloscope-field svg {
    width: 170%;
    height: 38vh;
    transform: translateX(-20%);
}

.trace {
    fill: none;
    stroke: #71797E;
    stroke-width: 2;
    stroke-dasharray: 44 28;
    animation: traceDrift 12s linear infinite;
}

.trace-b { animation-duration: 18s; opacity: 0.6; }

@keyframes traceDrift {
    from { stroke-dashoffset: 0; transform: translateX(-80px); }
    to { stroke-dashoffset: -360px; transform: translateX(120px); }
}

.monopole-orb {
    position: relative;
    width: 320px;
    height: 320px;
    margin-bottom: clamp(1.5rem, 6vh, 3.5rem);
    opacity: 0;
    animation: orbWake 2s ease 1s forwards;
}

@keyframes orbWake {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

.particle-core,
.field-ring,
.field-axis {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.particle-core {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #E8E8E8;
    box-shadow: 0 0 18px #C0C0C0, 0 0 62px rgba(192, 192, 192, 0.42);
    animation: corePulse 8s ease-in-out infinite;
}

.field-ring {
    border: 1px solid #A8B0B8;
    border-radius: 50%;
    opacity: 0.54;
    animation: fieldBreath 8s ease-in-out infinite;
}

.ring-one { width: 98px; height: 98px; }
.ring-two { width: 178px; height: 178px; animation-delay: -1.6s; transform: translate(-50%, -50%) rotateX(68deg); }
.ring-three { width: 270px; height: 270px; animation-delay: -3.2s; transform: translate(-50%, -50%) rotateY(58deg); }

.field-axis {
    width: 276px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #71797E, transparent);
    opacity: 0.34;
}

.axis-y { transform: translate(-50%, -50%) rotate(90deg); }

@keyframes fieldBreath {
    0%, 100% { opacity: 0.28; box-shadow: 0 0 0 rgba(192, 192, 192, 0); }
    50% { opacity: 0.68; box-shadow: 0 0 28px rgba(192, 192, 192, 0.18); }
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); }
    50% { transform: translate(-50%, -50%) scale(1.14); }
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(340px, 1fr);
    gap: 4rem;
    align-items: start;
    width: min(100%, 1200px);
    max-width: 1200px;
}

.text-column { position: relative; z-index: 2; }

.grid-overlay {
    position: absolute;
    inset: -4rem -20vw;
    z-index: -1;
    background-image: repeating-linear-gradient(0deg, #1A1A1E 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, #1A1A1E 0 1px, transparent 1px 40px);
    opacity: 0.52;
    pointer-events: none;
}

.archival-plate {
    position: relative;
    margin: 0;
}

.archival-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(13, 13, 13, 0.15);
    pointer-events: none;
}

.archival-plate::after {
    content: "+";
    position: absolute;
    right: 14px;
    top: 11px;
    z-index: 2;
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 13px;
}

.archive-image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #71797E;
    box-shadow: 0 0 0 1px #71797E;
    filter: grayscale(100%) contrast(1.3) brightness(0.85);
}

.asymmetric-image {
    width: min(42vw, 440px);
    transform: translateX(120px) rotate(-0.5deg);
}

.recovered-stack {
    width: min(100%, 960px);
    gap: 0;
}

.recovered-text {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    margin-bottom: 3rem;
}

.image-plate {
    width: min(100%, 960px);
    margin: 3rem 0;
}

.redaction-bar {
    display: inline-block;
    padding: 0 4px;
    background-color: #1A1A1E;
    color: #1A1A1E;
    cursor: pointer;
    transition: background-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
    user-select: none;
}

.redaction-bar:hover,
.redaction-bar.is-hot {
    background-color: #8B1A1A;
    color: #8B1A1A;
    box-shadow: 0 0 0 2px #E8E8E8;
}

.magnetic-field-motif {
    position: absolute;
    top: 7rem;
    left: 50%;
    width: 420px;
    height: 420px;
    transform: translateX(-50%);
    opacity: 0.15;
    pointer-events: none;
    animation: rotateMotif 120s linear infinite;
}

.magnetic-field-motif,
.magnetic-field-motif span {
    border: 2px solid #71797E;
    border-radius: 50%;
}

.magnetic-field-motif span {
    position: absolute;
    inset: 14%;
}

.magnetic-field-motif span:nth-child(2) { inset: 29%; transform: rotate(90deg); }
.magnetic-field-motif span:nth-child(3) { inset: 43%; }

@keyframes rotateMotif {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

.signal-pulse-divider {
    width: min(100%, 720px);
    height: 48px;
    margin: 2rem 0;
}

.signal-pulse-divider svg { width: 100%; height: 100%; }

.pulse-wave {
    fill: none;
    stroke: #A8B0B8;
    stroke-width: 1.5;
    stroke-dasharray: 160 820;
    animation: pulseFlow 8s ease-in-out infinite;
}

@keyframes pulseFlow {
    0% { stroke-dashoffset: 220; opacity: 0.24; }
    45% { opacity: 1; }
    100% { stroke-dashoffset: -960; opacity: 0.24; }
}

.section-divider {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 14vw, 12rem);
    background: #0D0D0D;
    border-top: 1px solid #A8B0B8;
    border-bottom: 1px solid #A8B0B8;
}

.divider-marker {
    color: #A8B0B8;
    font-family: "Space Mono", monospace;
    font-size: 18px;
    letter-spacing: 0.25em;
}

.end-title {
    margin-bottom: 1rem;
    color: #71797E;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.end-subtitle {
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-align: center;
}

.crosshair-blink {
    margin-top: 2rem;
    color: #71797E;
    font-family: "Space Mono", monospace;
    font-size: 24px;
    animation: blinkCross 2s ease-in-out infinite;
}

@keyframes blinkCross {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.fade-in-text {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--mechanical-ease), transform 0.8s var(--mechanical-ease);
}

.fade-in-text.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .two-column { grid-template-columns: 1fr; gap: 3rem; }
    .asymmetric-image { width: min(100%, 560px); transform: translateX(0) rotate(-0.5deg); justify-self: center; }
}

@media (max-width: 768px) {
    .dossier-frame { inset: 8px; }
    .section { padding: 4rem 1.1rem; }
    .main-title { font-size: clamp(2.45rem, 12vw, 4rem); letter-spacing: 0.08em; }
    .subtitle, .section-header, .end-subtitle { letter-spacing: 0.14em; }
    .monopole-orb { width: 240px; height: 240px; }
    .ring-one { width: 78px; height: 78px; }
    .ring-two { width: 138px; height: 138px; }
    .ring-three { width: 210px; height: 210px; }
    .field-axis { width: 210px; }
    .magnetic-field-motif { width: 300px; height: 300px; }
}