:root {
    /* DESIGN.md typography tokens: IBM Plex Sans Condense* Condensed** for timestamps */
    --match-green: #9BE564;
    --wire-blue: #2D6CDF;
    --paper: #F2E7CF;
    --desk: #101820;
    --ember: #E4572E;
    --sulfur: #F6C445;
    --black: #050505;
    --masthead: 'Archivo Black', Impact, sans-serif;
    --serif: 'Newsreader', Georgia, serif;
    --condensed: 'IBM Plex Sans Condensed', Arial Narrow, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--paper);
    background: var(--black);
    font-family: var(--serif);
    overflow-x: hidden;
}

.match-desk {
    min-height: 100vh;
    background:
        radial-gradient(circle at 22% 36%, rgba(246, 196, 69, .16), transparent 18rem),
        radial-gradient(circle at 72% 18%, rgba(45, 108, 223, .18), transparent 22rem),
        linear-gradient(135deg, var(--black), var(--desk) 48%, #091015);
}

.opening-viewport {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: 4vw;
}

.desk-grain,
.desk-grain::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(90deg, rgba(242, 231, 207, .05) 1px, transparent 1px),
        linear-gradient(rgba(242, 231, 207, .035) 1px, transparent 1px);
    background-size: 42px 42px, 42px 42px;
    mix-blend-mode: screen;
}

.desk-grain::before {
    opacity: .25;
    background-image: repeating-linear-gradient(-12deg, transparent 0 8px, rgba(246, 196, 69, .06) 9px 10px);
}

.matchbook-masthead {
    position: absolute;
    left: -3vw;
    bottom: 6vh;
    width: min(760px, 64vw);
    min-height: 330px;
    padding: 44px 54px 34px 78px;
    color: var(--black);
    background:
        linear-gradient(95deg, rgba(5, 5, 5, .16), transparent 22%),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(5, 5, 5, .035) 12px 13px),
        var(--paper);
    border: 3px solid var(--black);
    box-shadow: 20px 22px 0 rgba(5, 5, 5, .72), 0 0 70px rgba(246, 196, 69, .12);
    transform: rotate(-4deg);
    z-index: 3;
    clip-path: polygon(0 0, 94% 0, 100% 18%, 98% 100%, 0 100%);
}

.matchbook-fold {
    position: absolute;
    left: 34px;
    top: 0;
    bottom: 0;
    width: 16px;
    background: repeating-linear-gradient(0deg, var(--black) 0 10px, var(--ember) 10px 14px, var(--sulfur) 14px 17px);
}

.bureau-label,
.masthead-subline,
.timestamp,
.section-kicker,
.scroll-cue,
.clipping-pair b,
.evidence-card span,
.fiche-cell,
.ember-stamp {
    font-family: var(--condensed);
    text-transform: uppercase;
    letter-spacing: .13em;
}

.bureau-label {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ember);
}

h1,
.section-panel h2 {
    font-family: var(--masthead);
    letter-spacing: -.06em;
    line-height: .86;
    margin: 0;
}

h1 {
    max-width: 560px;
    font-size: clamp(4rem, 8.2vw, 8.6rem);
    text-shadow: 4px 0 0 rgba(228, 87, 46, .45);
}

.masthead-subline {
    max-width: 520px;
    margin: 22px 0 28px;
    font-size: 18px;
    font-weight: 600;
}

.strike-strip {
    display: flex;
    gap: 6px;
    width: 82%;
    height: 42px;
    padding: 7px;
    background: var(--black);
    border: 2px solid rgba(5, 5, 5, .8);
    cursor: pointer;
}

.strike-strip span {
    flex: 1;
    background: linear-gradient(90deg, #3b2620, var(--ember), #17100e);
    opacity: .72;
}

.match-scene {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 390px;
    height: 230px;
    z-index: 5;
    transform: translate(-50%, -50%) rotate(-12deg);
}

.match-stick {
    position: absolute;
    left: 60px;
    top: 112px;
    width: 260px;
    height: 12px;
    border-radius: 20px;
    background: linear-gradient(90deg, #7c4a24, #F2E7CF 25%, #9d672e 100%);
    transform-origin: 88% 50%;
    animation: scrape 3.8s ease-in-out infinite;
}

.match-head {
    position: absolute;
    right: -24px;
    top: -13px;
    width: 38px;
    height: 38px;
    border-radius: 50% 45% 52% 48%;
    background: radial-gradient(circle at 62% 38%, var(--sulfur), var(--ember) 46%, #7b1c16 72%, var(--black));
    box-shadow: 0 0 34px var(--sulfur), 0 0 72px rgba(228, 87, 46, .8);
}

.flare-core {
    position: absolute;
    right: 42px;
    top: 64px;
    width: 118px;
    height: 118px;
    border-radius: 52% 48% 55% 45%;
    background: radial-gradient(circle, #fff6cf 0 9%, var(--sulfur) 22%, var(--ember) 44%, rgba(228, 87, 46, .18) 67%, transparent 70%);
    filter: blur(.2px);
    opacity: .86;
    animation: flarePulse 2.4s ease-in-out infinite;
}

.smoke-line {
    position: absolute;
    right: 102px;
    top: 54px;
    width: 220px;
    height: 80px;
    border-top: 2px solid rgba(242, 231, 207, .42);
    border-radius: 50%;
    opacity: .6;
    animation: smokeDrift 5s linear infinite;
}
.smoke-two { top: 26px; transform: rotate(15deg); animation-delay: -1s; }
.smoke-three { top: 88px; transform: rotate(-17deg); animation-delay: -2.2s; }

.source-thread {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ember), var(--sulfur), transparent);
    transform-origin: left center;
    z-index: 2;
    opacity: .68;
}
.thread-a { left: 49%; top: 42%; width: 32vw; transform: rotate(-24deg); }
.thread-b { left: 45%; top: 51%; width: 42vw; transform: rotate(17deg); }
.thread-c { left: 38%; top: 50%; width: 29vw; transform: rotate(118deg); }

.clipping-pair {
    position: absolute;
    width: min(330px, 28vw);
    padding: 20px 20px 18px;
    color: var(--black);
    background: linear-gradient(180deg, rgba(255,255,255,.28), transparent), var(--paper);
    border: 1px solid rgba(5, 5, 5, .75);
    box-shadow: 12px 14px 0 rgba(5, 5, 5, .45);
    transform: rotate(var(--r));
    transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
    z-index: 4;
}

.clipping-pair::before {
    content: "";
    position: absolute;
    inset: -10px auto auto 28px;
    width: 68px;
    height: 22px;
    background: rgba(155, 229, 100, .78);
    transform: rotate(-3deg);
}

.clipping-pair h2 {
    margin: 8px 0 10px;
    font-family: var(--serif);
    font-size: 26px;
    line-height: .98;
}

.clipping-pair p { margin: 0 0 15px; font-size: 17px; line-height: 1.15; }
.timestamp, .clipping-pair b { font-size: 12px; color: var(--wire-blue); }

.clipping-pair.is-lit,
.clipping-pair:hover {
    transform: rotate(0deg) translateY(-12px) scale(1.04);
    box-shadow: 0 0 0 4px var(--sulfur), 18px 22px 0 rgba(5, 5, 5, .62), 0 0 38px rgba(246, 196, 69, .55);
    filter: saturate(1.18);
}

.clip-a { --r: 7deg; right: 7vw; top: 13vh; }
.clip-b { --r: -8deg; right: 10vw; bottom: 10vh; }
.clip-c { --r: 4deg; left: 8vw; top: 11vh; }
.clip-d { --r: -5deg; left: 42vw; bottom: 7vh; }

.ember-stamp {
    position: absolute;
    right: 27vw;
    top: 37vh;
    padding: 8px 14px;
    color: var(--ember);
    border: 3px solid var(--ember);
    transform: rotate(14deg);
    font-weight: 700;
    opacity: .82;
    z-index: 6;
}

.scroll-cue {
    position: absolute;
    right: 4vw;
    bottom: 4vh;
    color: var(--match-green);
    font-weight: 700;
}

.microfiche-reel {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 18px solid rgba(45, 108, 223, .36);
    border-radius: 50%;
    box-shadow: inset 0 0 0 22px rgba(5, 5, 5, .6), 0 0 45px rgba(45, 108, 223, .2);
    opacity: .5;
}
.reel-left { left: 3vw; top: 7vh; }
.reel-right { right: -4vw; top: 36vh; }

.section-panel {
    position: relative;
    min-height: 100vh;
    padding: 12vh 8vw;
    border-top: 1px solid rgba(242, 231, 207, .16);
    background: linear-gradient(140deg, rgba(16, 24, 32, .96), rgba(5, 5, 5, .98));
}

.section-kicker {
    color: var(--match-green);
    font-weight: 700;
    margin-bottom: 22px;
}

.section-panel h2 {
    max-width: 980px;
    font-size: clamp(3.2rem, 8vw, 8.4rem);
    color: var(--paper);
    text-shadow: -3px 0 0 var(--wire-blue), 3px 0 0 rgba(228, 87, 46, .65);
}

.section-copy {
    max-width: 730px;
    font-size: clamp(1.35rem, 2.4vw, 2.2rem);
    line-height: 1.18;
    color: rgba(242, 231, 207, .86);
}

.pair-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 9vh;
}

.evidence-card {
    min-height: 260px;
    padding: 26px;
    color: var(--paper);
    background: rgba(242, 231, 207, .08);
    border: 1px solid rgba(242, 231, 207, .28);
    transition: background .35s ease, transform .35s ease, border-color .35s ease;
}

.evidence-card.active,
.evidence-card:hover {
    color: var(--black);
    background: var(--sulfur);
    border-color: var(--ember);
    transform: translateY(-16px) rotate(-1deg);
}

.evidence-card h3 {
    margin: 42px 0 12px;
    font-family: var(--masthead);
    font-size: 40px;
    letter-spacing: -.05em;
}

.evidence-card p { font-size: 22px; line-height: 1.1; }

.microfiche-section { overflow: hidden; }

.microfiche-frame {
    width: 100%;
    min-height: 230px;
    margin-bottom: 10vh;
    padding: 18px;
    background: rgba(45, 108, 223, .12);
    border: 2px solid rgba(45, 108, 223, .72);
    box-shadow: 0 0 50px rgba(45, 108, 223, .2);
    overflow: hidden;
}

.microfiche-track {
    display: grid;
    grid-template-columns: repeat(6, 260px);
    gap: 18px;
    transform: translateX(var(--fiche-shift, 0px));
    transition: transform .4s ease;
}

.fiche-cell {
    min-height: 190px;
    padding: 22px;
    color: rgba(242, 231, 207, .78);
    background:
        linear-gradient(90deg, rgba(242, 231, 207, .12) 1px, transparent 1px),
        linear-gradient(rgba(242, 231, 207, .1) 1px, transparent 1px),
        rgba(5, 5, 5, .55);
    background-size: 24px 24px;
    border: 1px solid rgba(242, 231, 207, .24);
    font-size: 24px;
}

.fiche-cell span { color: var(--match-green); }
.fiche-cell.lit { color: var(--black); background: var(--match-green); }

.afterglow-note {
    display: grid;
    align-content: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(228, 87, 46, .28), transparent 24rem),
        var(--black);
}

.afterglow-note .small {
    position: static;
    width: max-content;
    transform: rotate(-5deg);
    margin-bottom: 38px;
}

blockquote {
    max-width: 1040px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6vw, 7rem);
    line-height: .95;
    color: var(--paper);
}

.closing-rule {
    width: min(620px, 80vw);
    height: 5px;
    margin: 54px 0 26px;
    background: linear-gradient(90deg, var(--ember), var(--sulfur), var(--match-green), transparent);
}

.afterglow-note p {
    max-width: 760px;
    font-size: 26px;
    color: rgba(242, 231, 207, .78);
}

body.flare-struck .flare-core { animation-duration: .8s; }
body.flare-struck .clipping-pair { filter: brightness(1.1); }

@keyframes scrape {
    0%, 100% { transform: translateX(-24px) rotate(-3deg); }
    45% { transform: translateX(24px) rotate(4deg); }
    62% { transform: translateX(12px) rotate(-7deg); }
}

@keyframes flarePulse {
    0%, 100% { transform: scale(.82) rotate(-6deg); opacity: .58; }
    45% { transform: scale(1.2) rotate(5deg); opacity: .98; }
    65% { transform: scale(.94) rotate(-2deg); opacity: .76; }
}

@keyframes smokeDrift {
    from { transform: translateX(0) translateY(0) rotate(0deg); opacity: .55; }
    to { transform: translateX(-90px) translateY(-26px) rotate(18deg); opacity: 0; }
}

@media (max-width: 900px) {
    .matchbook-masthead { width: 92vw; left: -18vw; bottom: 5vh; padding-right: 28px; }
    .match-scene { left: 63%; top: 42%; transform: translate(-50%, -50%) scale(.72) rotate(-12deg); }
    .clipping-pair { width: 46vw; }
    .clip-c { top: 8vh; left: 5vw; }
    .clip-a { top: 20vh; right: 3vw; }
    .clip-d { display: none; }
    .pair-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .opening-viewport { min-height: 112vh; }
    h1 { font-size: 3.8rem; }
    .clipping-pair { width: 72vw; }
    .clip-b { right: 5vw; bottom: 20vh; }
    .clip-a { display: none; }
    .section-panel { padding: 10vh 6vw; }
    .microfiche-track { grid-template-columns: repeat(6, 210px); }
}