/* jeongchi.boo -- spectral political archive */
/* Palette: #1C1512 (charred walnut), #E8DCC8 (parchment), #2B2118 (archive ink), #9B2335 (bureaucratic red), #3A5068 (microfilm blue), #C4A35A (declassified gold), #7A7168 (pencil graphite), #1A1614 (censor black) */

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

html{
    font-size:16px;
    scroll-behavior:smooth;
    scroll-snap-type:y proximity;
}

body{
    background:#1C1512;
    color:#2B2118;
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Wood grain desk surface */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:linear-gradient(170deg,#2A1F1A 0%,#1C1512 50%,#150F0C 100%);
    pointer-events:none;
    z-index:0;
}

/* Redaction nav */
.redaction-nav{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.redact-bar{
    width:3px;
    height:40px;
    background:#1A1614;
    cursor:pointer;
    transition:width 0.3s ease;
    position:relative;
    overflow:hidden;
}

.redact-bar:hover{
    width:48px;
}

.redact-label{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#C4A35A;
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.3s ease;
}

.redact-bar:hover .redact-label{
    opacity:1;
}

/* Document sections */
.document{
    min-height:100svh;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
    position:relative;
    z-index:1;
}

/* Redaction divider between sections */
.document + .document::before{
    content:'';
    position:absolute;
    top:0;
    left:10%;
    right:15%;
    height:4px;
    background:#1A1614;
}

/* Document panels */
.doc-panel{
    background:#E8DCC8;
    padding:clamp(2rem,4vw,3.5rem);
    max-width:660px;
    box-shadow:2px 3px 12px rgba(0,0,0,0.25);
    position:relative;
    opacity:0;
    transition:opacity 0.7s ease,transform 0.7s ease;
}

.doc-panel.revealed{
    opacity:1;
}

/* Ref numbers */
.doc-ref{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.65rem,0.8vw,0.8rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#7A7168;
    display:block;
    margin-bottom:1.5rem;
}

/* Titles */
.doc-title{
    font-family:'Special Elite',cursive;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.08em;
    color:#2B2118;
    line-height:1.1;
    margin-bottom:1rem;
}

.doc-subtitle{
    font-family:'Lora',serif;
    font-style:italic;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:#3A5068;
}

.doc-heading{
    font-family:'Special Elite',cursive;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.08em;
    color:#2B2118;
    margin-bottom:1rem;
    line-height:1.2;
}

.doc-text{
    color:#2B2118;
    margin-bottom:1rem;
}

/* Redacted text */
.redacted{
    background:#1A1614;
    color:#1A1614;
    padding:0 0.3em;
    transition:color 0.3s ease;
    cursor:pointer;
}

.redacted:hover{
    color:#9B2335;
}

/* Official seal stamp */
.seal-stamp{
    position:absolute;
    top:2rem;
    right:2rem;
    width:60px;
    height:60px;
    border:2px solid #9B2335;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Lora',serif;
    font-weight:700;
    font-size:0.9rem;
    color:#9B2335;
    transform:rotate(15deg);
    opacity:0.7;
}

/* Final document */
.doc-domain{
    font-family:'Special Elite',cursive;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#C4A35A;
    letter-spacing:0.08em;
    margin-top:2rem;
}

.doc-close{
    font-family:'Lora',serif;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:#3A5068;
    margin-top:1rem;
    text-align:center;
}

/* Responsive */
@media(max-width:768px){
    .document{
        padding:2rem 1.5rem;
    }
    .redaction-nav{
        display:none;
    }
    .seal-stamp{
        width:45px;
        height:45px;
        font-size:0.7rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .doc-panel{opacity:1;transition:none}
}