:root {
    --aged-foolscap: #f5e6c8;
    --walnut-bureau: #3d2b1f;
    --typewriter-carbon: #2c1e0e;
    --india-ink-brown: #4a3222;
    --bureaucratic-red: #b83a2a;
    --faded-ledger: #c4a882;
    --filing-tab-yellow: #e8b84a;
    --foxed-margin: #8a7560;
    --carbon-blue: #6a7b8a;

    --font-display: 'Roboto Slab', serif;
    --font-body: 'Special Elite', cursive;
    --font-mono: 'IBM Plex Mono', monospace;
}

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

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--aged-foolscap);
    color: var(--typewriter-carbon);
    line-height: 1.85;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

.desk-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--walnut-bureau);
    background-image: repeating-linear-gradient(87deg, rgba(255, 255, 255, 0.02) 0px, transparent 2px, transparent 8px);
    z-index: -1;
}

/* Main Dossier Container */
.dossier {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--aged-foolscap);
    background-image:
        url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="4" /%3E%3C/filter%3E%3Crect width="100" height="100" fill="url(%23gradient)" filter="url(%23noise)"%3E%3Cfilter id="gradient"%3E%3CfeGaussianBlur in="SourceGraphic" stdDeviation="2"/%3E%3C/filter%3E%3C/rect%3E%3C/svg%3E'),
        radial-gradient(ellipse at center, transparent 40%, rgba(60, 43, 31, 0.12) 100%),
        repeating-linear-gradient(0deg, var(--faded-ledger) 0px, transparent 1.8rem, transparent 1.8rem);
    background-size: 100%, cover, 100%;
    background-attachment: fixed, scroll, scroll;
    position: relative;
}

/* Hero Stamp Section */
.hero-stamp {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stamp-container {
    text-align: center;
    perspective: 1000px;
}

.stamp-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 700;
    color: var(--bureaucratic-red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transform: rotate(-3deg);
    border: 2px solid var(--bureaucratic-red);
    padding: 1.5rem 2rem;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 0 0 3px transparent, 0 0 0 4px var(--bureaucratic-red);
    animation: typewriter 3s steps(12, end) 0.6s forwards;
    opacity: 0;
    letter-spacing: 0.08em;
}

@keyframes typewriter {
    from { opacity: 1; }
    to { opacity: 1; }
}

.stamp-subtitle {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--bureaucratic-red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeIn 400ms ease-out 3.2s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.stamp-divider {
    width: 60%;
    height: 1px;
    background-color: var(--faded-ledger);
    margin: 1.5rem auto;
    opacity: 0;
    animation: drawLine 500ms ease-out 3.6s forwards;
}

@keyframes drawLine {
    from {
        width: 0;
        opacity: 1;
    }
    to {
        width: 60%;
        opacity: 1;
    }
}

.stamp-date {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: var(--foxed-margin);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeIn 400ms ease-out 4s forwards;
}

/* Mission Brief Section */
.mission-brief {
    padding: clamp(4rem, 8vh, 8rem) 0;
    position: relative;
    opacity: 0;
    animation: fadeInSection 400ms ease-out forwards;
}

@keyframes fadeInSection {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.section-label {
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    color: var(--foxed-margin);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    float: right;
}

.section-header-line {
    clear: both;
    border-top: 2px solid var(--faded-ledger);
    border-bottom: 1px solid var(--faded-ledger);
    padding: 0.5rem 0;
    margin-bottom: 2rem;
}

.mission-brief h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--india-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
    position: relative;
}

.mission-brief h2::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--faded-ledger);
    transform: translateY(-50%);
}

.mission-brief p {
    max-width: 680px;
    line-height: 1.85;
}

/* Registry Section */
.registry {
    padding: clamp(4rem, 8vh, 8rem) 0;
    opacity: 0;
    animation: fadeInSection 400ms ease-out forwards;
}

.registry h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--india-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}

.registry-entry {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
    border-left: 2px dashed var(--faded-ledger);
}

.entry-number {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--foxed-margin);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: absolute;
    left: -1.5rem;
    top: 0;
}

.entry-line {
    width: 100%;
    height: 1px;
    background-color: var(--faded-ledger);
    margin-bottom: 1rem;
}

.registry-entry h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 700;
    color: var(--typewriter-carbon);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.entry-description {
    margin-bottom: 0.75rem;
    line-height: 1.85;
}

.entry-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--foxed-margin);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

/* Appendix Section */
.appendix {
    padding: clamp(4rem, 8vh, 8rem) 0;
    border-top: 2px dashed var(--faded-ledger);
    opacity: 0;
    animation: fadeInSection 400ms ease-out forwards;
}

.appendix h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--india-ink-brown);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}

.appendix p {
    margin-bottom: 1rem;
    line-height: 1.85;
    padding-left: 2rem;
}

.appendix sup {
    font-family: var(--font-mono);
    color: var(--foxed-margin);
}

.footer-stamps {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
}

.received-stamp,
.approved-stamp {
    width: 80px;
    height: 80px;
    border: 2px solid var(--bureaucratic-red);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--bureaucratic-red);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transform: rotate(-15deg);
    animation: stampDrop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.approved-stamp {
    animation: stampDrop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms forwards;
    opacity: 0;
}

@keyframes stampDrop {
    from {
        opacity: 0;
        transform: translateY(-20px) rotate(-15deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(-15deg);
    }
}

.stamp-date {
    font-size: 0.55rem;
    margin-top: 0.25rem;
}

/* Filing Footer */
.filing-footer {
    padding: 2rem;
    border-top: 2px dashed var(--faded-ledger);
    margin-top: 3rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    color: var(--foxed-margin);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.8;
}

.filing-footer p {
    margin: 0.5rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .dossier {
        padding: 1rem;
    }

    .stamp-container {
        padding: 0 1rem;
    }

    .registry-entry {
        padding-left: 1.5rem;
    }

    .entry-number {
        left: -1rem;
    }

    .footer-stamps {
        flex-direction: column;
        align-items: center;
    }
}

/* Scroll-triggered animations */
.fade-in-scroll {
    opacity: 0;
    animation: fadeInSection 400ms ease-out forwards;
}