:root {
    --carbon-black: #050403;
    --graphite-sheen: #2B2E2A;
    --carbon-copy-blue: #253B5A;
    --kiln-ember: #E45A2A;
    --bone-ledger: #E7DFC9;
    --biochar-moss: #556B3E;
    --diamond-glint: #C8F7FF;
    --title-font: "Archivo Black", "IBM Plex Sans Condensed", sans-serif;
    --label-font: "IBM Plex Sans Condensed", "Inter", sans-serif;
    --body-font: "Newsreader", serif;
    --mono-font: "DM Mono", monospace;
    --font-proof: "Condensed** business labels";
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--carbon-black);
}

body {
    margin: 0;
    color: var(--bone-ledger);
    background: var(--carbon-black);
    font-family: var(--body-font);
    overflow-x: hidden;
}

#dust-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    opacity: .42;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: .2;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(231,223,201,.12) 0 1px, transparent 1.5px),
        radial-gradient(circle at 77% 62%, rgba(200,247,255,.08) 0 1px, transparent 1.5px),
        linear-gradient(90deg, transparent 0 98%, rgba(231,223,201,.08) 99% 100%);
    background-size: 19px 23px, 31px 37px, 84px 100%;
}

.sample-rail {
    position: fixed;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    z-index: 20;
    display: grid;
    gap: 9px;
}

.sample-tab {
    width: 74px;
    min-height: 44px;
    padding: 7px 8px;
    color: rgba(231,223,201,.55);
    text-decoration: none;
    font-family: var(--label-font);
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(43,46,42,.72);
    border-left: 3px solid var(--graphite-sheen);
    box-shadow: 9px 9px 0 rgba(37,59,90,.22);
    transition: transform .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.sample-tab span,
.sample-tab b { display: block; }
.sample-tab span { font-family: var(--mono-font); font-size: 11px; }
.sample-tab b { font-size: 10px; font-weight: 600; }
.sample-tab.active {
    color: var(--bone-ledger);
    border-color: var(--kiln-ember);
    box-shadow: 12px 12px 0 rgba(37,59,90,.46), 0 0 21px rgba(228,90,42,.18);
    transform: translateX(9px);
}

.chapter {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 8vh 8vw 8vh 12vw;
    border-top: 1px solid rgba(231,223,201,.08);
    isolation: isolate;
}

.chapter::before {
    content: attr(data-chapter);
    position: absolute;
    right: 4vw;
    top: 5vh;
    color: rgba(231,223,201,.18);
    font: 500 13px/1 var(--mono-font);
    letter-spacing: .32em;
}

.chapter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 15vh, rgba(231,223,201,.045) calc(15vh + 1px), transparent calc(15vh + 2px));
    z-index: -1;
}

.opening { background: var(--carbon-black); }

.carbon-sheet {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(231,223,201,.22) 0 2%, rgba(37,59,90,.16) 8%, transparent 23%),
        repeating-linear-gradient(84deg, rgba(231,223,201,.028) 0 1px, transparent 1px 8px),
        var(--carbon-black);
    transition: transform 1.1s cubic-bezier(.68,0,.19,1), opacity .9s ease;
    box-shadow: inset 0 -35px 80px rgba(37,59,90,.18);
}

.carbon-sheet.peeled {
    transform: translateY(105%) rotate(-1.5deg);
    opacity: .08;
}

.rub-field {
    position: absolute;
    width: 42vmin;
    height: 42vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231,223,201,.12), transparent 67%);
    transform: translate(var(--rub-x, 0), var(--rub-y, 0));
    filter: blur(14px);
}

.hidden-word {
    margin: 0;
    color: rgba(231,223,201,var(--reveal, .08));
    font: 400 clamp(4rem, 16vw, 15rem)/.78 var(--title-font);
    letter-spacing: -.09em;
    text-transform: lowercase;
    text-shadow: 18px 20px 0 rgba(37,59,90,.28), -2px -1px 0 rgba(200,247,255,.06);
}

.assay-id,
.pressure-note {
    position: absolute;
    font-family: var(--mono-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(231,223,201,.45);
}
.assay-id { left: 5vw; top: 5vh; font-size: 11px; }
.pressure-note { right: 5vw; bottom: 6vh; max-width: 250px; font-size: 10px; line-height: 1.6; }

.title-ghost {
    position: absolute;
    left: 11vw;
    top: 18vh;
    color: rgba(37,59,90,.35);
    font: 400 clamp(3rem, 13vw, 11rem)/.8 var(--title-font);
    letter-spacing: -.09em;
    text-shadow: 12px 14px 0 rgba(5,4,3,.9);
}

.ledger-copy,
.ledger-panel {
    position: relative;
    max-width: 590px;
    padding: 30px 32px;
    background: rgba(43,46,42,.74);
    border: 1px solid rgba(231,223,201,.16);
    box-shadow: 18px 18px 0 rgba(37,59,90,.22), inset 0 0 0 1px rgba(5,4,3,.8);
}

.transfer::before {
    content: attr(data-copy);
    position: absolute;
    inset: 14px auto auto 18px;
    color: rgba(37,59,90,.5);
    font: 400 clamp(2.4rem, 5vw, 5rem)/.8 var(--title-font);
    letter-spacing: -.06em;
    z-index: -1;
    transform: translate(22px, 24px);
    filter: blur(.2px);
}

.opening-copy { align-self: end; margin-top: 42vh; }

.label,
.scene-label {
    font-family: var(--label-font);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--kiln-ember);
    font-size: 13px;
    margin: 0 0 18px;
}

h2 {
    margin: 0 0 18px;
    color: var(--bone-ledger);
    font: 400 clamp(2.8rem, 7vw, 7.8rem)/.84 var(--title-font);
    letter-spacing: -.07em;
}

p {
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    line-height: 1.42;
    margin: 0;
}

.hex-seal {
    position: absolute;
    width: min(38vw, 420px);
    height: auto;
    fill: none;
    stroke: rgba(200,247,255,.35);
    stroke-width: 2;
    filter: drop-shadow(14px 18px 0 rgba(37,59,90,.18));
    animation: sealTurn 22s linear infinite;
}
.opener-seal { right: -6vw; bottom: 4vh; }
.counting-seal { right: 8vw; top: 10vh; stroke: rgba(228,90,42,.45); }

@keyframes sealTurn { to { transform: rotate(360deg); } }

.counting {
    background: linear-gradient(180deg, var(--carbon-black), #10120f 42%, var(--graphite-sheen));
}

.scene-label {
    position: absolute;
    top: 7vh;
    left: 12vw;
    margin: 0;
    color: rgba(231,223,201,.46);
}

.strata-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(178deg, transparent 0 44px, rgba(231,223,201,.05) 45px, transparent 47px);
}

.graphite-stack {
    position: absolute;
    left: 42vw;
    top: 28vh;
    width: 35vw;
    height: 36vh;
    transform: skewY(-8deg);
}

.graphite-stack span {
    position: absolute;
    left: calc(var(--i, 0) * 18px);
    right: 0;
    height: 56px;
    background: linear-gradient(90deg, #050403, #2B2E2A 35%, #E7DFC9 37%, #2B2E2A 39%, #050403);
    border: 1px solid rgba(231,223,201,.11);
    box-shadow: 20px 18px 0 rgba(37,59,90,.14);
}
.graphite-stack span:nth-child(1) { --i: 0; top: 0; }
.graphite-stack span:nth-child(2) { --i: 1; top: 58px; }
.graphite-stack span:nth-child(3) { --i: 2; top: 116px; }
.graphite-stack span:nth-child(4) { --i: 3; top: 174px; }
.graphite-stack span:nth-child(5) { --i: 4; top: 232px; }

.counting .ledger-panel { margin-left: 0; }

.counting-slips {
    position: absolute;
    right: 8vw;
    bottom: 8vh;
    display: grid;
    gap: 12px;
    transform: rotate(-3deg);
}

.slip {
    width: 240px;
    padding: 17px;
    font-family: var(--mono-font);
    border: 1px solid rgba(5,4,3,.3);
    box-shadow: 13px 13px 0 rgba(37,59,90,.35);
}
.slip span,.slip small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.slip strong { display: block; font: 400 42px/.9 var(--title-font); letter-spacing: -.06em; }
.slip.blue { background: rgba(37,59,90,.88); }
.slip.bone { background: var(--bone-ledger); color: var(--carbon-black); margin-left: 45px; }
.slip.dark { background: var(--graphite-sheen); }

.biochar {
    background: radial-gradient(circle at 70% 38%, rgba(85,107,62,.32), transparent 25%), linear-gradient(180deg, var(--graphite-sheen), var(--carbon-black));
}

.soil-core {
    position: absolute;
    right: 16vw;
    top: 16vh;
    width: 230px;
    height: 62vh;
    filter: drop-shadow(25px 22px 0 rgba(37,59,90,.2));
}
.core-top {
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle, #050403 0 22%, #556B3E 23% 35%, #2B2E2A 36% 65%, #E7DFC9 66% 68%, #050403 69%);
    border: 2px solid rgba(231,223,201,.22);
}
.core-body {
    position: absolute;
    top: 39px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 0 0 115px 115px;
    background: linear-gradient(180deg, #2B2E2A, #050403 38%, #556B3E 39%, #050403 55%, #2B2E2A);
    border: 2px solid rgba(231,223,201,.16);
}
.core-body i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bone-ledger);
    opacity: .22;
    animation: pore 8s ease-in-out infinite;
}
.core-body i:nth-child(1) { left: 37px; top: 95px; }
.core-body i:nth-child(2) { right: 42px; top: 185px; animation-delay: -2s; }
.core-body i:nth-child(3) { left: 91px; bottom: 110px; animation-delay: -4s; }
.core-body i:nth-child(4) { right: 84px; bottom: 42px; animation-delay: -6s; }
@keyframes pore { 50% { transform: scale(2.2); opacity: .08; } }

.biochar .ledger-panel { margin-top: 18vh; background: rgba(5,4,3,.65); }
.biochar .label { color: var(--biochar-moss); }

.certificate {
    position: absolute;
    left: 16vw;
    bottom: 8vh;
    width: 360px;
    min-height: 145px;
    padding: 20px;
    color: var(--carbon-black);
    background: var(--bone-ledger);
    box-shadow: 16px 16px 0 rgba(37,59,90,.32);
    transform: rotate(2deg);
}
.certificate .mono { font-family: var(--mono-font); font-size: 11px; letter-spacing: .12em; }
.certificate p { font-size: 1.08rem; margin-top: 18px; }
.thumbprint {
    position: absolute;
    right: 24px;
    top: 22px;
    width: 58px;
    height: 72px;
    border-radius: 48% 52% 45% 55%;
    background: repeating-radial-gradient(ellipse at center, rgba(5,4,3,.55) 0 2px, transparent 3px 6px);
    opacity: .45;
    transform: rotate(-12deg);
}

.molecule-grid {
    position: absolute;
    right: -4vw;
    bottom: -8vh;
    width: 44vw;
    height: 44vw;
    opacity: .22;
}
.molecule-grid span {
    position: absolute;
    width: 90px;
    height: 78px;
    clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    border: 2px solid var(--diamond-glint);
    background: rgba(200,247,255,.025);
}
.molecule-grid span:nth-child(1){ left: 0; top: 80px; }
.molecule-grid span:nth-child(2){ left: 68px; top: 119px; }
.molecule-grid span:nth-child(3){ left: 136px; top: 80px; }
.molecule-grid span:nth-child(4){ left: 204px; top: 119px; }
.molecule-grid span:nth-child(5){ left: 272px; top: 80px; }
.molecule-grid span:nth-child(6){ left: 340px; top: 119px; }

.vault {
    background: radial-gradient(circle at 50% 49%, rgba(200,247,255,.08), transparent 16%), linear-gradient(180deg, #050403, #101010 50%, #050403);
}
.press-frame {
    position: absolute;
    inset: 13vh 20vw;
    border-left: 3px solid rgba(231,223,201,.15);
    border-right: 3px solid rgba(231,223,201,.15);
    display: grid;
    place-items: center;
}
.press-top,.press-bottom {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 72px;
    background: var(--graphite-sheen);
    border: 1px solid rgba(231,223,201,.14);
    box-shadow: 18px 18px 0 rgba(37,59,90,.18);
}
.press-top { top: 0; }
.press-bottom { bottom: 0; }
.compression-orb {
    width: min(30vw, 330px);
    height: min(30vw, 330px);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 33%, #2B2E2A, #050403 63%);
    box-shadow: 0 0 0 22px rgba(37,59,90,.12), inset -22px -28px 30px rgba(0,0,0,.8);
    transition: transform .5s ease, border-radius .5s ease;
}
.vault.active .compression-orb { animation: compress 3.8s ease-in-out infinite; }
@keyframes compress { 50% { transform: scaleX(1.26) scaleY(.42); border-radius: 45%; } }
.diamond {
    position: absolute;
    width: 96px;
    height: 96px;
    opacity: 0;
    transform: rotate(45deg) scale(.5);
    background: linear-gradient(135deg, rgba(200,247,255,.12), var(--diamond-glint), rgba(231,223,201,.18));
    clip-path: polygon(50% 0, 100% 35%, 73% 100%, 27% 100%, 0 35%);
    box-shadow: 0 0 40px var(--diamond-glint);
}
.vault.active .diamond { animation: glint 3.8s ease-in-out infinite; }
@keyframes glint { 45%,60% { opacity: .9; transform: rotate(45deg) scale(1); } }
.vault-copy { justify-self: end; max-width: 520px; background: rgba(43,46,42,.5); }
.vault-tags {
    position: absolute;
    left: 13vw;
    bottom: 11vh;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.vault-tags span {
    padding: 8px 11px;
    font: 400 11px/1 var(--mono-font);
    color: var(--diamond-glint);
    border: 1px solid rgba(200,247,255,.28);
    background: rgba(37,59,90,.28);
}

.exchange {
    background: radial-gradient(circle at 72% 36%, rgba(228,90,42,.2), transparent 18%), linear-gradient(180deg, #050403, #190d08 88%);
}
.exchange-board {
    position: absolute;
    right: 8vw;
    top: 15vh;
    width: min(45vw, 610px);
    display: grid;
    gap: 12px;
}
.ticker {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    font-family: var(--label-font);
    text-transform: uppercase;
    letter-spacing: .13em;
    background: rgba(5,4,3,.62);
    border: 1px solid rgba(231,223,201,.12);
    box-shadow: 14px 14px 0 rgba(37,59,90,.18);
}
.ticker b { color: var(--kiln-ember); font-family: var(--mono-font); font-weight: 400; }
.ticker em { color: rgba(231,223,201,.48); font-style: normal; font-size: 11px; }
.final { align-self: end; margin-top: 36vh; }
.seal-button {
    margin-top: 26px;
    padding: 14px 18px;
    border: 1px solid rgba(228,90,42,.55);
    background: rgba(228,90,42,.12);
    color: var(--bone-ledger);
    font-family: var(--label-font);
    text-transform: uppercase;
    letter-spacing: .16em;
    cursor: pointer;
    box-shadow: 8px 8px 0 rgba(37,59,90,.28);
}
.seal-button.stamped { background: var(--kiln-ember); color: var(--carbon-black); transform: translate(4px, 4px); box-shadow: 4px 4px 0 rgba(37,59,90,.45); }
.wax-seal {
    position: absolute;
    right: 17vw;
    bottom: 13vh;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--carbon-black);
    background: var(--kiln-ember);
    font: 400 74px/.9 var(--title-font);
    box-shadow: inset 8px 10px 18px rgba(5,4,3,.38), 16px 16px 0 rgba(37,59,90,.28);
    transform: scale(.72) rotate(-12deg);
    opacity: .28;
    transition: transform .55s cubic-bezier(.2,1.4,.2,1), opacity .55s ease;
}
.wax-seal.stamped { transform: scale(1) rotate(0); opacity: 1; }

.chapter.in-view .ledger-panel,
.chapter.in-view .ledger-copy { animation: transferLag 1.3s ease both; }
@keyframes transferLag { from { transform: translateY(30px); filter: blur(1px); } to { transform: translateY(0); filter: blur(0); } }

@media (max-width: 900px) {
    .chapter { padding: 12vh 7vw 10vh 24vw; }
    .sample-rail { left: 8px; }
    .exchange-board, .graphite-stack, .soil-core, .press-frame { opacity: .48; right: -8vw; }
    .ledger-panel, .ledger-copy { max-width: 100%; }
    .certificate { left: 24vw; width: 62vw; }
    .ticker { grid-template-columns: 1fr; }
}