:root {
    --ink: #1F2423;
    --paper: #F3E6C8;
    --blue: #315F8C;
    --brass: #A4783A;
    --red: #B9473A;
    --grey: #8E8A7D;
    --aged: #DCC79A;
    --black-brown: #2B2722;
    --scroll: 0;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #2B2722; }

body {
    margin: 0;
    min-height: 520vh;
    color: var(--ink);
    font-family: "DM Sans", "Inter", sans-serif;
    background: var(--black-brown);
    overflow-x: hidden;
}

.desk-plane {
    position: fixed;
    inset: 0;
    overflow: hidden;
    perspective: 1200px;
    background:
        radial-gradient(circle at 28% 22%, rgba(243, 230, 200, 0.96), rgba(220, 199, 154, 0.76) 34%, rgba(164, 120, 58, 0.34) 66%, rgba(43, 39, 34, 0.86)),
        linear-gradient(115deg, #F3E6C8, #DCC79A 52%, #8E8A7D 130%);
    transform-style: preserve-3d;
}

.desk-plane::before {
    content: "";
    position: absolute;
    inset: -12%;
    background:
        repeating-linear-gradient(8deg, rgba(31,36,35,0.035) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(92deg, rgba(49,95,140,0.025) 0 1px, transparent 1px 11px);
    mix-blend-mode: multiply;
    opacity: 0.7;
    transform: rotateX(8deg) rotateZ(calc(-1deg + var(--scroll) * 0.006deg)) scale(1.08);
}

.lamp-vignette, .grain-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lamp-vignette {
    background: radial-gradient(circle at 34% 24%, rgba(243,230,200,0.9), rgba(243,230,200,0.18) 35%, rgba(31,36,35,0.36) 78%, rgba(43,39,34,0.72));
    mix-blend-mode: multiply;
}

.grain-field {
    opacity: 0.34;
    background-image:
        radial-gradient(rgba(31,36,35,0.18) 0.7px, transparent 0.7px),
        radial-gradient(rgba(255,255,255,0.28) 0.8px, transparent 0.8px);
    background-size: 7px 9px, 13px 11px;
    filter: contrast(130%);
}

.drawer-act {
    position: absolute;
    width: min(1180px, 94vw);
    height: min(740px, 82vh);
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    opacity: var(--act-opacity, 0);
    transform: translate3d(calc(-50% + var(--act-x, 0px)), calc(-50% + var(--act-y, 0px)), 0) rotateX(5deg) rotateZ(var(--act-rot, 0deg));
    transition: opacity 420ms ease-out;
}

.drawer-act.is-active { --act-opacity: 1; }

.act-opening { --act-rot: -2.5deg; }
.act-inventory { --act-rot: 2deg; }
.act-process { --act-rot: -1deg; }
.act-catalog { --act-rot: 1.6deg; }
.act-closing { --act-rot: -1.8deg; }

.paper-object {
    position: absolute;
    filter: drop-shadow(0 22px 22px rgba(43,39,34,0.28));
    transform: translate3d(calc(var(--local-x, 0px) + var(--drift-x, 0px)), calc(var(--local-y, 0px) + var(--drift-y, 0px)), 0) rotate(var(--rot, 0deg));
    transition: transform 260ms ease-out;
}

.folio-sheet, .index-card, .folder-panel, .receipt-slip, .catalog-card, .annotation {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18), transparent 18%),
        repeating-linear-gradient(0deg, transparent 0 25px, rgba(49,95,140,0.08) 26px, transparent 27px),
        #F3E6C8;
    border: 1px solid rgba(31,36,35,0.18);
    box-shadow: inset 0 0 42px rgba(164,120,58,0.15);
}

.title-sheet {
    width: 58%;
    min-height: 420px;
    left: 16%;
    top: 12%;
    padding: 56px 62px;
    --rot: -3deg;
}

h1, h2, h3 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    color: var(--black-brown);
    margin: 0;
    line-height: 0.92;
}

h1 {
    font-size: clamp(76px, 12vw, 178px);
    letter-spacing: -0.06em;
    text-shadow: 0 2px 0 rgba(255,255,255,0.32), 0 -1px 0 rgba(31,36,35,0.2), 7px 7px 0 rgba(49,95,140,0.13);
}

h2 { font-size: clamp(42px, 6.5vw, 92px); letter-spacing: -0.045em; }
h3 { font-size: clamp(29px, 3vw, 46px); }
p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; }

.deck-note { max-width: 600px; color: #1F2423; }
.date-stamp, .label-strip, .folder-tab, .final-tab {
    font-family: "DM Sans", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 12px;
}

.date-stamp {
    display: inline-block;
    color: var(--blue);
    border: 2px solid rgba(49,95,140,0.7);
    padding: 7px 11px 6px;
    transform: rotate(-1.8deg);
    opacity: 0;
}

.date-stamp.red { color: var(--red); border-color: rgba(185,71,58,0.68); }
.is-active .date-stamp { animation: stampBloom 760ms ease-out 220ms forwards; }

.pressed-line {
    height: 2px;
    width: 72%;
    background: rgba(31,36,35,0.26);
    box-shadow: 0 2px 0 rgba(255,255,255,0.28);
    margin-top: 28px;
}

.tape {
    position: absolute;
    width: 156px;
    height: 34px;
    background: rgba(220,199,154,0.66);
    border-left: 1px dashed rgba(31,36,35,0.16);
    border-right: 1px dashed rgba(31,36,35,0.16);
    box-shadow: 0 8px 12px rgba(43,39,34,0.13);
}
.tape-top { top: -17px; left: 38%; transform: rotate(2deg); }

.index-card {
    width: 300px;
    right: 8%;
    bottom: 12%;
    padding: 32px;
    --rot: 5deg;
}

.label-strip {
    display: inline-block;
    background: #DCC79A;
    color: #2B2722;
    padding: 7px 10px;
    box-shadow: 3px 4px 0 rgba(31,36,35,0.14);
}
.label-strip.blue { background: rgba(49,95,140,0.18); color: #315F8C; }

.hand-mark, .annotation b {
    font-family: "Nanum Pen Script", cursive;
    color: var(--red);
    font-size: 34px;
    font-weight: 400;
    display: block;
    transform: rotate(-5deg);
}

.folder-tab, .final-tab {
    position: absolute;
    background: #A4783A;
    color: #F3E6C8;
    padding: 12px 20px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 10px 18px rgba(43,39,34,0.19);
}
.tab-left { left: 2%; top: 6%; transform: rotate(-6deg); }

.folder-panel {
    left: 6%; top: 10%; width: 58%; min-height: 510px; padding: 76px 54px 48px; --rot: 1.8deg;
    background-color: #DCC79A;
}
.folder-panel .folder-tab { top: -43px; left: 40px; }

.artifact-list { padding: 0; margin: 34px 0 0; list-style: none; }
.artifact-list li { border-top: 1px dotted rgba(31,36,35,0.34); padding: 14px 0; font-size: 18px; }
.artifact-list span { color: #315F8C; font-weight: 700; margin-right: 18px; }

.vellum-overlay {
    right: 10%; top: 18%; width: 410px; height: 470px; --rot: -7deg;
    background: rgba(243,230,200,0.45);
    border: 1px solid rgba(49,95,140,0.24);
    backdrop-filter: blur(1px);
    box-shadow: inset 0 0 60px rgba(255,255,255,0.28), 0 28px 28px rgba(43,39,34,0.18);
}
.vellum-overlay p { color: #315F8C; margin: 48px; font-family: "Nanum Pen Script", cursive; font-size: 42px; transform: rotate(-8deg); }
.wax-circle { width: 170px; height: 112px; border: 4px solid #B9473A; border-radius: 50%; opacity: 0.58; margin: 90px auto; transform: rotate(-16deg); }

.receipt-slip { right: 22%; bottom: 7%; width: 190px; padding: 24px 22px; --rot: 9deg; background: #F3E6C8; }
.receipt-slip span { font-size: 11px; letter-spacing: .1em; color: #8E8A7D; }
.receipt-slip p { margin: 9px 0; border-bottom: 1px dotted rgba(31,36,35,0.28); font-size: 15px; }

.drawer-runner {
    position: absolute; left: -10%; right: -10%; height: 210px; top: 52%; transform: rotate(-1deg);
    background: linear-gradient(90deg, rgba(49,95,140,0.08), rgba(31,36,35,0.12), rgba(164,120,58,0.08));
    border-top: 2px solid rgba(31,36,35,0.15); border-bottom: 2px solid rgba(31,36,35,0.12);
}
.runner-b { top: 18%; transform: rotate(2deg); }

.broadside { left: 12%; top: 13%; width: 66%; min-height: 500px; padding: 58px 70px; --rot: 2.5deg; }
.paperclip { position: absolute; right: 58px; top: -16px; width: 42px; height: 96px; border: 7px solid #315F8C; border-left-width: 5px; border-radius: 24px; opacity: .7; transform: rotate(12deg); }
.carbon-text { position: absolute; left: 68px; bottom: 38px; color: rgba(49,95,140,0.2); font-size: 32px; letter-spacing: .02em; transform: translate(8px, 6px); }
.notebook-edge { left: 6%; top: 8%; width: 60px; height: 560px; background: #F3E6C8; --rot: -3deg; border-right: 1px solid rgba(31,36,35,.18); }
.notebook-edge span { display: block; width: 22px; height: 22px; margin: 48px auto; border-radius: 50%; background: #2B2722; opacity: .62; }
.annotation { right: 12%; bottom: 12%; width: 260px; padding: 28px; --rot: -11deg; background: rgba(243,230,200,.86); }

.catalog-card { padding: 40px; width: 470px; min-height: 300px; }
.act-catalog .catalog-card:first-of-type { left: 11%; top: 16%; --rot: -4deg; width: 560px; }
.small-card { right: 18%; top: 11%; --rot: 7deg; background-color: #DCC79A; }
.narrow-card { right: 8%; bottom: 12%; --rot: -3deg; width: 330px; min-height: 230px; }

.closing-sheet { left: 22%; top: 16%; width: 58%; min-height: 460px; padding: 64px 76px; --rot: -2deg; }
.archive-link { display: inline-block; margin-top: 22px; color: #315F8C; font-weight: 700; text-decoration: none; border-bottom: 2px solid #315F8C; }
.brad { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #DCC79A, #A4783A 58%, #2B2722); box-shadow: 0 2px 0 rgba(31,36,35,.25); }
.brad-one { top: 28px; left: 34px; } .brad-two { top: 28px; right: 34px; }
.final-tab { right: 12%; bottom: 13%; background: #315F8C; transform: rotate(5deg); }

.ruler-strip { position: absolute; right: -40px; top: 12%; width: 90px; height: 74%; background: rgba(164,120,58,0.45); transform: rotate(3deg); box-shadow: inset 16px 0 0 rgba(243,230,200,0.18); }
.ruler-strip span { display: block; height: 14%; border-bottom: 2px solid rgba(31,36,35,0.34); }

@keyframes stampBloom { 0% { opacity: 0; filter: blur(4px); transform: scale(1.5) rotate(-1.8deg); } 60% { opacity: .76; filter: blur(.6px); } 100% { opacity: .88; filter: blur(0); transform: scale(1) rotate(-1.8deg); } }

@media (max-width: 760px) {
    .drawer-act { width: 96vw; height: 84vh; }
    .title-sheet, .folder-panel, .broadside, .closing-sheet { left: 3%; top: 10%; width: 86%; padding: 42px 28px; }
    .index-card, .vellum-overlay, .receipt-slip, .annotation, .small-card, .narrow-card { transform: scale(.78) rotate(var(--rot)); transform-origin: center; }
    .vellum-overlay, .small-card { right: -8%; }
    .ruler-strip { display: none; }
}