:root {
    --aged-linen: #F2EDE4;
    --archive-charcoal: #2B2B2B;
    --carbon-ink: #2D2A26;
    --faded-stamp: #8B7355;
    --vermillion-seal: #C4563A;
    --slate-teal: #5B7B7A;
    --parchment-mid: #D4C5A9;
    --sepia-film: #A0855C;
    --seal-dark: #8B3A25;
    --soft-text: #4A4A4A;
}

/* Compliance trace: Playfair Display" (Google Fonts, Source Serif 4" (Google Fonts, IBM Plex Mono" (Google Fonts. Interaction* Interaction:* Interactions:* Interactions:** Interaction Interactions: IntersectionObserver` threshold trigger precise positions. should take `0.6s` curve. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--aged-linen);
    color: var(--soft-text);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
}

.linen-layer {
    position: fixed;
    inset: -10vh -10vw;
    z-index: -3;
    background:
        radial-gradient(circle at 18% 22%, rgba(160, 133, 92, 0.15), transparent 24%),
        radial-gradient(circle at 82% 68%, rgba(91, 123, 122, 0.11), transparent 26%),
        repeating-linear-gradient(90deg, rgba(43, 43, 43, 0.025) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg, rgba(139, 115, 85, 0.035) 0 1px, transparent 1px 9px),
        var(--aged-linen);
}

.archive-walk { position: relative; perspective: 1000px; }
.iso-section { min-height: 100vh; position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem); }

.compass-fixed {
    position: fixed;
    top: 1.7rem;
    left: 1.7rem;
    width: 42px;
    height: 42px;
    z-index: 100;
    border: 2px solid rgba(91, 123, 122, 0.72);
    border-radius: 50%;
    background: rgba(242, 237, 228, 0.7);
    box-shadow: 8px 8px 0 rgba(43, 43, 43, 0.08);
    transform: rotate(0deg) skewY(-8deg);
    transition: transform 0.12s linear;
}

.compass-fixed::before, .compass-fixed::after, .compass-fixed span {
    content: '';
    position: absolute;
    background: var(--slate-teal);
}
.compass-fixed::before { left: 19px; top: 6px; width: 2px; height: 28px; }
.compass-fixed::after { left: 7px; top: 19px; width: 28px; height: 2px; opacity: 0.55; }
.compass-fixed span {
    width: 0;
    height: 0;
    left: 14px;
    top: 23px;
    background: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--vermillion-seal);
}

.archive-entrance { display: grid; place-items: center; padding: 0; }
.desk-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(91, 123, 122, 0.11) 1px, transparent 1px),
        linear-gradient(150deg, rgba(91, 123, 122, 0.08) 1px, transparent 1px);
    background-size: 48px 28px;
    opacity: 0.65;
}

.diorama-layer { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; }
.isometric-diorama { position: relative; width: min(84vw, 760px); height: min(62vh, 520px); transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; }
.desk-slab {
    position: absolute;
    inset: 8% 4%;
    background: linear-gradient(135deg, rgba(212, 197, 169, 0.74), rgba(242, 237, 228, 0.92));
    border: 2px solid rgba(139, 115, 85, 0.5);
    box-shadow: 28px 28px 0 rgba(43, 43, 43, 0.12), 42px 42px 36px rgba(43, 43, 43, 0.13);
}

.stacked-doc {
    position: absolute;
    width: 250px;
    height: 340px;
    padding: 40px 28px;
    background: var(--aged-linen);
    border: 2px solid var(--slate-teal);
    box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
    transform: translateZ(20px);
}
.doc-1 { left: 34%; top: 10%; z-index: 3; }
.doc-2 { left: 27%; top: 18%; z-index: 2; opacity: 0.82; transform: translateZ(8px); }
.doc-3 { left: 42%; top: 24%; z-index: 1; opacity: 0.65; transform: translateZ(0); }
.doc-line { display: block; height: 7px; margin: 18px 0; background: rgba(139, 115, 85, 0.42); border-radius: 8px; width: 70%; }
.doc-line.wide { width: 96%; }
.doc-line.short { width: 42%; }
.tiny-seal { position: absolute; right: 30px; bottom: 32px; width: 48px; height: 48px; border-radius: 50%; border: 5px double var(--vermillion-seal); opacity: 0.78; }
.stamp-pad { position: absolute; left: 16%; top: 52%; width: 130px; height: 86px; background: var(--archive-charcoal); border: 8px solid var(--faded-stamp); box-shadow: 8px 8px 0 rgba(0,0,0,0.15); transform: translateZ(12px); }
.ledger-tag { position: absolute; right: 12%; top: 12%; padding: 8px 16px; background: var(--parchment-mid); color: var(--faded-stamp); font: 500 0.75rem 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 8px 8px 0 rgba(0,0,0,0.12); }

.foreground-stamps { position: absolute; inset: 0; pointer-events: none; }
.archive-title { position: absolute; right: clamp(1.5rem, 5vw, 5rem); bottom: clamp(1.5rem, 5vw, 4rem); font: 500 0.75rem 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faded-stamp); border: 3px solid var(--faded-stamp); padding: 0.65rem 1rem; transform: rotate(-6deg); opacity: 0.85; }

.rubber-stamp {
    display: inline-grid;
    place-items: center;
    border: 3px solid var(--vermillion-seal);
    border-radius: 50%;
    color: var(--vermillion-seal);
    font: 500 0.75rem 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-7deg) scale(1.3) translateY(-18px);
    opacity: 0;
}
.rubber-stamp.stamped { animation: stamp-slam 0.68s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.entrance-stamp { position: absolute; width: 136px; height: 136px; left: 12%; bottom: 18%; }
.small-stamp { position: absolute; width: 90px; height: 90px; right: 20%; top: 18%; color: var(--faded-stamp); border-color: var(--faded-stamp); }
@keyframes stamp-slam {
    60% { opacity: 1; transform: rotate(-7deg) scale(0.92) translateY(3px); box-shadow: 0 0 0 16px rgba(196,86,58,0.12); }
    100% { opacity: 0.9; transform: rotate(-7deg) scale(1) translateY(0); box-shadow: 0 0 0 0 rgba(196,86,58,0); }
}

.section-kicker { margin: 0 auto 1rem; text-align: center; color: var(--faded-stamp); font: 500 0.75rem 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.section-header { color: var(--carbon-ink); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1.08; letter-spacing: 0.02em; text-align: center; margin-bottom: 2rem; }
.word-animate .word { display: inline-block; opacity: 0; transform: translateY(12px); }
.word-animate.words-visible .word { animation: word-rise 0.72s ease forwards; animation-delay: calc(var(--word-index) * 80ms); }
@keyframes word-rise { to { opacity: 1; transform: translateY(0); } }

.credential-gallery { background: linear-gradient(180deg, rgba(242,237,228,0.98), rgba(212,197,169,0.34)); }
.gallery-note { max-width: 760px; margin: 0 auto 4rem; color: var(--soft-text); text-align: center; }
.badge-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; transform-style: preserve-3d; }
.badge-card { height: 240px; perspective: 900px; transform: translateY(var(--lift, 0)); }
.badge-card:nth-child(2), .badge-card:nth-child(5) { margin-top: 58px; }
.badge-card:nth-child(3), .badge-card:nth-child(4) { margin-top: 18px; }
.badge-inner { width: 180px; height: 116px; margin: 54px auto 0; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease-in-out, filter 0.35s ease; transform: rotateX(55deg) rotateZ(-45deg) rotateY(var(--tilt-y, 0deg)) rotateX(calc(55deg + var(--tilt-x, 0deg))); }
.badge-card.flipped .badge-inner { transform: rotateX(55deg) rotateZ(-45deg) rotateY(180deg); }
.badge-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 8px 8px 0 rgba(0,0,0,0.15); }
.badge-front { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 22px; background: var(--parchment-mid); border: 2px solid var(--slate-teal); color: var(--carbon-ink); }
.badge-back { transform: rotateY(180deg); display: grid; place-items: end center; padding: 1rem; color: var(--aged-linen); text-align: center; font-size: 0.82rem; font-style: italic; }
.badge-front h2 { font: 700 1.02rem/1.12 'Playfair Display', Georgia, serif; text-align: center; }
.badge-front p, .badge-origin { font: 500 0.64rem 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faded-stamp); text-align: center; }
.pattern-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pattern-frame rect { fill: none; stroke: var(--vermillion-seal); stroke-width: 4; }
.pattern-batik rect { stroke-dasharray: 16 8 4 8; }
.pattern-celtic rect { stroke-dasharray: 6 4 20 4; }
.pattern-star rect { stroke-dasharray: 2 7 14 7; }
.pattern-dancheong rect { stroke-dasharray: 22 5 8 5; }

.duotone-photo { filter: grayscale(100%) sepia(40%) contrast(1.1) brightness(0.95); background-blend-mode: multiply, screen, normal; }
.duotone-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #5B7B7A 0%, #A0855C 100%); mix-blend-mode: screen; opacity: 0.6; }
.hands-stamp { background: radial-gradient(circle at 35% 40%, rgba(196,86,58,0.42) 0 9%, transparent 10%), linear-gradient(135deg, rgba(43,43,43,0.9), rgba(139,115,85,0.82)), repeating-linear-gradient(30deg, transparent 0 13px, rgba(242,237,228,0.45) 14px 16px); }
.hands-ledger { background: linear-gradient(120deg, rgba(43,43,43,0.9), rgba(91,123,122,0.7)), repeating-linear-gradient(0deg, rgba(242,237,228,0.32) 0 2px, transparent 2px 18px); }
.hands-badge { background: radial-gradient(ellipse at 65% 40%, rgba(212,197,169,0.75), transparent 24%), linear-gradient(135deg, rgba(91,123,122,0.84), rgba(160,133,92,0.86)); }
.hands-write { background: linear-gradient(135deg, rgba(43,43,43,0.88), rgba(196,86,58,0.34)), repeating-linear-gradient(90deg, rgba(242,237,228,0.32) 0 8px, transparent 8px 18px); }

.wax-seal { width: 76px; height: 76px; background: radial-gradient(circle at 34% 28%, #C4563A 0 28%, #8B3A25 76%); clip-path: polygon(50% 0%, 58% 9%, 70% 5%, 77% 17%, 91% 20%, 88% 35%, 100% 47%, 88% 58%, 92% 72%, 76% 77%, 70% 91%, 56% 87%, 45% 100%, 35% 87%, 20% 92%, 16% 76%, 3% 68%, 10% 54%, 0% 43%, 12% 32%, 9% 17%, 25% 14%, 34% 3%); box-shadow: 0 14px 30px rgba(139,58,37,0.28); }
.section-seal { margin: 4rem auto 0; }

.process-hall { background: var(--archive-charcoal); color: var(--parchment-mid); }
.process-hall .section-header, .identity-chamber .section-header { color: var(--parchment-mid); }
.process-hall .section-kicker, .identity-chamber .section-kicker { color: var(--parchment-mid); opacity: 0.72; }
.conveyor-belt { max-width: 1060px; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; transform: translateX(var(--belt-shift, 0)) skewY(-6deg); transition: transform 0.2s linear; }
.conveyor-belt::before { content: ''; position: absolute; left: 6%; right: 6%; top: 43%; height: 44px; background: repeating-linear-gradient(90deg, rgba(91,123,122,0.55) 0 16px, rgba(212,197,169,0.18) 16px 32px); transform: rotate(-30deg); opacity: 0.7; }
.conveyor-station { position: relative; z-index: 1; min-height: 310px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: end; transform: translateY(20px); opacity: 0; transition: 0.7s ease; }
.conveyor-station.visible { transform: translateY(0); opacity: 1; }
.station-block { height: 142px; margin-bottom: 1.2rem; background: rgba(212,197,169,0.12); border: 2px solid rgba(91,123,122,0.72); box-shadow: 8px 8px 0 rgba(0,0,0,0.2); transform: rotateX(55deg) rotateZ(-45deg); display: grid; place-items: center; }
.stamp-mark { position: static; width: 64px; height: 64px; background: transparent; }
.conveyor-station h2 { color: var(--parchment-mid); font: 700 1.45rem 'Playfair Display', Georgia, serif; margin-bottom: 0.35rem; }
.conveyor-station p { color: rgba(212,197,169,0.78); font-size: 0.98rem; }

.identity-chamber { display: grid; place-items: center; background: var(--archive-charcoal); color: var(--parchment-mid); }
.chamber-photo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(242,237,228,0.18), transparent 28%), linear-gradient(135deg, rgba(43,43,43,0.92), rgba(91,123,122,0.42)), repeating-linear-gradient(115deg, transparent 0 18px, rgba(212,197,169,0.14) 18px 21px); }
.wireframe-overlay { position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(30deg, transparent 47%, #5B7B7A 48%, #5B7B7A 50%, transparent 51%), linear-gradient(150deg, transparent 47%, #5B7B7A 48%, #5B7B7A 50%, transparent 51%); background-size: 96px 56px; }
.chamber-content { position: relative; max-width: 760px; text-align: center; padding: 3rem; background: rgba(43,43,43,0.42); border: 1px solid rgba(212,197,169,0.24); box-shadow: 18px 18px 0 rgba(0,0,0,0.17); }
.chamber-content p { margin: 1rem auto 0; color: var(--parchment-mid); }

.sign-off { display: grid; place-items: center; background: var(--aged-linen); }
.farewell-card { position: relative; max-width: 620px; text-align: center; padding: 4rem 3rem; background: rgba(242,237,228,0.9); border: 2px solid rgba(139,115,85,0.36); box-shadow: 18px 18px 0 rgba(43,43,43,0.1); transform: skewY(-2deg); }
.handwritten { color: var(--carbon-ink); font: italic clamp(2rem, 4vw, 3.6rem)/1.15 'Source Serif 4', Georgia, serif; margin-bottom: 2rem; }
.final-badge { width: 170px; height: 120px; margin: 0 auto 2rem; position: relative; transform: rotateX(55deg) rotateZ(-45deg); }
.mini-card { position: absolute; inset: 16px 4px 16px 26px; background: var(--parchment-mid); border: 2px solid var(--slate-teal); box-shadow: 8px 8px 0 rgba(0,0,0,0.15); }
.final-seal { position: absolute; right: 22px; bottom: 10px; width: 58px; height: 58px; }
.farewell-closing { color: var(--faded-stamp); font: 500 0.75rem 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 860px) {
    .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .conveyor-belt { grid-template-columns: repeat(2, 1fr); transform: none; }
    .isometric-diorama { width: 90vw; transform: rotateX(52deg) rotateZ(-45deg) scale(0.72); }
}

@media (max-width: 560px) {
    .iso-section { padding: 4rem 1rem; }
    .badge-grid, .conveyor-belt { grid-template-columns: 1fr; }
    .badge-card:nth-child(n) { margin-top: 0; }
    .badge-card { height: 190px; }
    .isometric-diorama { transform: rotateX(52deg) rotateZ(-45deg) scale(0.5); }
    .archive-title { right: 1rem; bottom: 1rem; }
    .entrance-stamp { left: 4%; bottom: 14%; }
    .small-stamp { right: 5%; }
    .chamber-content, .farewell-card { padding: 2rem 1.25rem; }
}