:root {
    --ink-black: #11100E;
    --newsprint-bone: #F2E8D0;
    --sulfur-yellow: #F8D84A;
    --phosphor-orange: #FF5A1F;
    --smoke-blue: #74818A;
    --oxidized-green: #1F5D4A;
    --ember-red: #A6281B;
    --masthead: "Newsreader", serif;
    --label: "Bricolage Grotesque", sans-serif;
    --mono: "Chivo Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--newsprint-bone);
    background:
        radial-gradient(circle at 13% 18%, rgba(255, 90, 31, .10), transparent 28rem),
        linear-gradient(90deg, rgba(242, 232, 208, .035) 1px, transparent 1px),
        var(--ink-black);
    background-size: auto, 9vw 100%, auto;
    font-family: var(--label);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    background-image:
        radial-gradient(circle, rgba(242, 232, 208, .24) 0 1px, transparent 1.5px),
        repeating-linear-gradient(175deg, transparent 0 16px, rgba(116, 129, 138, .035) 17px, transparent 19px);
    background-size: 31px 37px, 100% 100%;
    mix-blend-mode: screen;
    opacity: .36;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.match-room {
    position: relative;
}

.chamber {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, minmax(4.5rem, auto));
    gap: 1rem;
    border-bottom: 1px solid rgba(242, 232, 208, .16);
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 1.2rem;
    z-index: -1;
    border: 1px solid rgba(116, 129, 138, .2);
    clip-path: polygon(0 0, 96% 0, 100% 10%, 100% 100%, 3% 100%, 0 92%);
}

.match-nav {
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-dot {
    width: 3rem;
    height: .55rem;
    background: linear-gradient(90deg, #6b4a31, #C58B55 68%, var(--ember-red) 69%);
    border-radius: 1rem;
    opacity: .55;
    transform-origin: right center;
    transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.match-dot span {
    display: block;
    margin-left: auto;
    width: .8rem;
    height: .8rem;
    margin-top: -.13rem;
    border-radius: 50%;
    background: var(--ember-red);
}

.match-dot.active {
    opacity: 1;
    transform: translateX(-.4rem) rotate(-8deg);
    filter: drop-shadow(0 0 .85rem var(--sulfur-yellow));
}

.match-dot.active span { background: var(--sulfur-yellow); }

.cursor-ember {
    position: fixed;
    width: 18rem;
    height: 18rem;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 90, 31, .24), rgba(248, 216, 74, .08) 30%, transparent 68%);
    transform: translate3d(-50%, -50%, 0);
    opacity: .7;
    mix-blend-mode: screen;
}

.wire-code {
    font-family: var(--mono);
    color: var(--smoke-blue);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: clamp(.7rem, 1vw, .9rem);
}

.chamber-label, .edition-stamp {
    font-family: var(--label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.chamber-label {
    color: var(--sulfur-yellow);
    font-size: clamp(1.5rem, 4vw, 4.5rem);
    text-shadow: .08em .08em 0 var(--ember-red);
}

.rotated { writing-mode: vertical-rl; transform: rotate(180deg); }

.strike-desk {
    background: radial-gradient(circle at var(--flare-x, 18%) var(--flare-y, 76%), rgba(248, 216, 74, .34), rgba(255, 90, 31, .12) 17rem, transparent 37rem), var(--ink-black);
}

.paper-grain {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(242, 232, 208, .03) 0 1px, transparent 1px 12px);
    opacity: .5;
}

.match-flare {
    position: absolute;
    left: 13%;
    bottom: 13%;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50% 50% 45% 45%;
    background: var(--sulfur-yellow);
    box-shadow: 0 0 2rem var(--sulfur-yellow), 0 0 7rem var(--phosphor-orange), 0 0 18rem rgba(248, 216, 74, .36);
    animation: ember-pulse 2.1s ease-in-out infinite;
}

.striker-rail {
    grid-column: 1 / 7;
    grid-row: 7;
    align-self: center;
    height: 1.15rem;
    background:
        linear-gradient(45deg, var(--ember-red) 25%, transparent 25% 50%, var(--ember-red) 50% 75%, transparent 75%),
        var(--oxidized-green);
    background-size: 1rem 1rem;
    border: 2px solid var(--newsprint-bone);
    transform: rotate(-3deg);
}

.matchstick {
    display: block;
    width: 14rem;
    height: .55rem;
    margin-top: .2rem;
    background: linear-gradient(90deg, #B77B45, #F2E8D0 88%, var(--phosphor-orange));
    border-radius: 4rem;
    animation: strike-scratch 1.75s cubic-bezier(.45, .02, .2, 1) both;
}

.masthead {
    grid-column: 1 / 10;
    grid-row: 2 / 5;
    font-family: var(--masthead);
    font-size: clamp(5.8rem, 18vw, 18rem);
    line-height: .73;
    letter-spacing: -.08em;
    margin: 0;
    transform: translateX(-7vw);
    color: rgba(242, 232, 208, .86);
    text-shadow: 0 0 3rem rgba(255, 90, 31, .32), .045em .045em 0 rgba(166, 40, 27, .52);
    animation: type-imprint 1.8s .25s both;
}

.strike-desk > .wire-code { grid-column: 2 / 6; grid-row: 1; }

.headline-stack { grid-column: 7 / 13; grid-row: 4 / 8; position: relative; }

.lead-slip, .side-note, .column-sheet, .wire-slip, .ash-fragment, .edition-page {
    background: var(--newsprint-bone);
    color: var(--ink-black);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}

.lead-slip {
    padding: clamp(1.2rem, 3vw, 2.3rem);
    clip-path: polygon(0 0, 100% 0, 97% 86%, 88% 100%, 0 100%);
    transform: rotate(1.5deg);
}

.lead-slip h2, .column-sheet h2, .assembled-headline {
    font-family: var(--masthead);
    font-size: clamp(2.4rem, 5.8vw, 6.5rem);
    line-height: .86;
    letter-spacing: -.05em;
    margin: .25rem 0 1rem;
}

.lead-slip p, .column-sheet p, .wire-slip p, .archive-note, .edition-columns p {
    font-size: clamp(1rem, 1.45vw, 1.45rem);
    line-height: 1.32;
}

.edition-stamp {
    display: inline-block;
    padding: .35rem .6rem;
    color: var(--newsprint-bone);
    background: var(--phosphor-orange);
    transform: rotate(-5deg);
}

.side-note {
    position: absolute;
    right: 4%;
    bottom: -10%;
    width: min(19rem, 55%);
    padding: 1rem;
    border-left: .45rem solid var(--oxidized-green);
}

.side-note span, .ash-fragment span, .proof-tabs span {
    font-family: var(--mono);
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--ember-red);
}

.wax-circle {
    position: absolute;
    right: 10%;
    top: 18%;
    width: 15rem;
    height: 15rem;
    border: .35rem solid var(--phosphor-orange);
    border-radius: 50%;
    opacity: .55;
    transform: rotate(-14deg);
}

.burn-mask::after {
    content: "";
    position: absolute;
    right: -.8rem;
    top: -.8rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ink-black) 0 45%, var(--ember-red) 48%, transparent 70%);
}

.smoke-column {
    background: linear-gradient(100deg, var(--ink-black), #181A19 55%, rgba(31, 93, 74, .33));
}

.smoke-column .chamber-label { grid-column: 1 / 6; grid-row: 1; }

.smoke-column-rail {
    grid-column: 2 / 4;
    grid-row: 2 / 9;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--smoke-blue);
    font-family: var(--masthead);
    font-size: clamp(1.7rem, 3vw, 3.6rem);
    line-height: .9;
    filter: blur(.25px);
    animation: smoke-waver 5s ease-in-out infinite;
}

.smoke-column-rail span:nth-child(even) { transform: translateX(3rem) skewY(-7deg); color: rgba(242, 232, 208, .52); }

.column-sheet {
    grid-column: 5 / 12;
    grid-row: 2 / 7;
    align-self: center;
    padding: clamp(1.5rem, 4vw, 4rem);
    transform: rotate(-1.3deg);
    border-top: .8rem solid var(--smoke-blue);
}

.paper-curl::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-width: 0 0 5rem 5rem;
    border-style: solid;
    border-color: transparent transparent rgba(116, 129, 138, .45) transparent;
}

.proof-tabs { grid-column: 8 / 13; grid-row: 7; display: flex; gap: .7rem; flex-wrap: wrap; }
.proof-tabs span { padding: .55rem .7rem; background: rgba(242, 232, 208, .12); border: 1px solid var(--smoke-blue); }
.hot-quote { grid-column: 1 / 7; grid-row: 7 / 9; margin: 0; font-family: var(--masthead); font-size: clamp(2rem, 5vw, 5rem); line-height: .9; color: var(--phosphor-orange); }

.wire-drawer { background: radial-gradient(circle at 78% 50%, rgba(166, 40, 27, .2), transparent 28rem), var(--ink-black); }
.wire-drawer .chamber-label { grid-column: 1; grid-row: 2 / 7; color: var(--newsprint-bone); }

.drawer-case {
    grid-column: 3 / 12;
    grid-row: 2 / 7;
    position: relative;
    border: .35rem solid var(--oxidized-green);
    background: linear-gradient(#32251c, #15120f);
    padding: 2rem;
    box-shadow: inset 0 0 0 1rem rgba(242, 232, 208, .05), 0 2rem 4rem rgba(0,0,0,.5);
}

.drawer-tab {
    position: absolute;
    left: -1rem;
    top: 2rem;
    border: 0;
    background: var(--phosphor-orange);
    color: var(--newsprint-bone);
    padding: .75rem 1rem;
    text-transform: uppercase;
    font-weight: 800;
    cursor: pointer;
    transform: rotate(-3deg);
}

.drawer-body {
    height: 100%;
    display: flex;
    gap: 1rem;
    transform: translateX(-18%);
    transition: transform .7s cubic-bezier(.18, .86, .28, 1);
}

.drawer-case.open .drawer-body { transform: translateX(0); }

.wire-slip {
    min-width: 31%;
    padding: clamp(1rem, 2vw, 2rem);
    transform: rotate(var(--tilt, 1deg));
    border-bottom: .45rem solid var(--ember-red);
    transition: transform .45s ease, box-shadow .45s ease;
}
.wire-slip:nth-child(2) { --tilt: -2deg; }
.wire-slip:nth-child(3) { --tilt: 2.5deg; }
.wire-slip.active { box-shadow: 0 0 0 .35rem var(--sulfur-yellow), 0 2rem 3rem rgba(0,0,0,.4); }
.wire-slip h3 { font-family: var(--masthead); font-size: clamp(1.7rem, 3vw, 3.2rem); line-height: .92; margin: .8rem 0; }

.teletype-ribbon {
    grid-column: 1 / 13;
    grid-row: 8;
    align-self: end;
    white-space: nowrap;
    font-family: var(--mono);
    color: var(--sulfur-yellow);
    background: var(--ember-red);
    padding: .7rem;
    transform: rotate(1deg);
    animation: ribbon-run 18s linear infinite;
}

.ash-archive {
    background: radial-gradient(circle at 42% 42%, rgba(116, 129, 138, .17), transparent 18rem), linear-gradient(180deg, #151412, var(--ink-black));
}
.ash-archive .chamber-label { grid-column: 2 / 8; grid-row: 1; color: var(--smoke-blue); text-shadow: .08em .08em 0 var(--ink-black); }
.archive-field { grid-column: 1 / 13; grid-row: 2 / 8; position: relative; }
.ash-fragment { position: absolute; padding: 1rem; width: min(26rem, 42vw); clip-path: polygon(3% 0, 100% 7%, 93% 100%, 0 88%); transition: transform .35s ease, filter .35s ease; }
.ash-fragment:hover { transform: translateY(-1rem) rotate(0deg) scale(1.03); filter: drop-shadow(0 0 1rem rgba(255, 90, 31, .5)); }
.ash-fragment h3 { font-family: var(--masthead); font-size: clamp(1.6rem, 3.5vw, 4rem); line-height: .9; margin: .5rem 0 0; }
.f1 { left: 4%; top: 4%; transform: rotate(-8deg); }
.f2 { right: 14%; top: 12%; transform: rotate(5deg); }
.f3 { left: 24%; bottom: 8%; transform: rotate(2deg); background: #dacfb6; }
.f4 { right: 3%; bottom: 6%; transform: rotate(-5deg); background: #cfc4ad; }
.copy-spike { grid-column: 6 / 8; grid-row: 3 / 7; justify-self: center; width: .45rem; background: linear-gradient(var(--smoke-blue), var(--newsprint-bone)); transform: rotate(9deg); box-shadow: 0 0 0 999px transparent; }
.archive-note { grid-column: 1 / 5; grid-row: 7 / 9; color: var(--smoke-blue); }

.afterimage-edition {
    background: radial-gradient(circle at 50% 42%, rgba(248, 216, 74, .23), rgba(255, 90, 31, .09) 24rem, transparent 48rem), var(--ink-black);
}
.edition-page {
    grid-column: 2 / 12;
    grid-row: 1 / 9;
    align-self: center;
    padding: clamp(1.4rem, 4vw, 4rem);
    border: .25rem solid var(--ink-black);
    outline: .25rem solid var(--newsprint-bone);
    transform: rotate(.7deg);
    animation: edition-cool 8s ease-in-out infinite alternate;
}
.edition-stamp.final { background: var(--oxidized-green); color: var(--newsprint-bone); }
.assembled-headline { position: relative; color: var(--ink-black); text-shadow: .03em .03em 0 var(--phosphor-orange); }
.assembled-headline::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px var(--sulfur-yellow); transform: translate(.05em, .05em); opacity: .45; }
.edition-columns { columns: 3 13rem; column-gap: 2rem; border-top: 1px solid var(--ink-black); padding-top: 1rem; }
.cooling-line { color: var(--ember-red); font-family: var(--mono); text-transform: uppercase; }
.after-embers span { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sulfur-yellow); animation: ember-float 4s ease-in-out infinite; }
.after-embers span:nth-child(1) { left: 8%; bottom: 16%; }
.after-embers span:nth-child(2) { left: 21%; top: 24%; animation-delay: .8s; }
.after-embers span:nth-child(3) { right: 18%; bottom: 22%; animation-delay: 1.6s; }
.after-embers span:nth-child(4) { right: 7%; top: 31%; animation-delay: 2.1s; }
.after-embers span:nth-child(5) { left: 53%; bottom: 9%; animation-delay: 2.7s; }

.chamber.in-view .lead-slip, .chamber.in-view .column-sheet, .chamber.in-view .drawer-case, .chamber.in-view .ash-fragment, .chamber.in-view .edition-page { animation: stamp-impact .65s ease both; }

@keyframes strike-scratch { 0% { transform: translateX(65vw) rotate(8deg); filter: brightness(.5); } 70% { transform: translateX(2vw) rotate(-2deg); } 100% { transform: translateX(0) rotate(0); filter: brightness(1.3); } }
@keyframes ember-pulse { 0%, 100% { transform: scale(.9); opacity: .82; } 50% { transform: scale(1.45) rotate(12deg); opacity: 1; } }
@keyframes type-imprint { from { opacity: .08; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes smoke-waver { 0%,100% { transform: translateX(0) skewY(-2deg); } 50% { transform: translateX(2rem) skewY(5deg); } }
@keyframes ribbon-run { from { text-indent: 0; } to { text-indent: -36rem; } }
@keyframes stamp-impact { 0% { opacity: .4; transform: translateY(2rem) rotate(-2deg) scale(.96); } 70% { opacity: 1; transform: translateY(-.25rem) rotate(1deg) scale(1.02); } 100% { opacity: 1; } }
@keyframes edition-cool { from { box-shadow: 0 0 5rem rgba(248, 216, 74, .45); filter: sepia(.08); } to { box-shadow: 0 0 .8rem rgba(116, 129, 138, .28); filter: sepia(.42) contrast(.92); } }
@keyframes ember-float { 0%,100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(-2.5rem); opacity: 1; box-shadow: 0 0 1.2rem var(--phosphor-orange); } }

@media (max-width: 800px) {
    .chamber { display: block; padding: 4rem 1.3rem; }
    .masthead { transform: translateX(-1rem); margin: 5rem 0 2rem; }
    .headline-stack, .column-sheet, .drawer-case, .edition-page { width: 100%; }
    .side-note { position: relative; width: 90%; right: auto; bottom: auto; margin-top: 1rem; }
    .smoke-column-rail { position: absolute; inset: 7rem auto auto 1rem; opacity: .35; }
    .drawer-body { overflow-x: auto; transform: none; }
    .wire-slip { min-width: 82vw; }
    .archive-field { min-height: 75vh; }
    .ash-fragment { width: 72vw; }
    .match-nav { right: .4rem; }
}