:root {
    --paper: #F3E7D0;
    --green: #8AAE4E;
    --lavender: #B9A7FF;
    --stamp: #E4572E;
    --carbon: #3A3238;
    --ink: #24201C;
    --blue: #3867D6;
    --shadow: rgba(36, 32, 28, 0.34);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--carbon);
    font-family: "Literata", serif;
    overflow-x: hidden;
}

.desk-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgba(185, 167, 255, 0.18), transparent 24%),
        radial-gradient(circle at 80% 12%, rgba(228, 87, 46, 0.12), transparent 18%),
        repeating-linear-gradient(8deg, rgba(243, 231, 208, 0.035) 0 1px, transparent 1px 8px),
        linear-gradient(135deg, #3A3238, #24201C 72%);
    z-index: -3;
}

.desk-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background-image: radial-gradient(rgba(243, 231, 208, 0.18) 0.7px, transparent 0.7px);
    background-size: 7px 7px;
}

.newsroom { width: 100%; }

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 7vh 8vw 7vh 12vw;
    overflow: hidden;
}

.binder-nav {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 12px;
    z-index: 30;
}

.binder-nav::before {
    content: "";
    position: absolute;
    left: 12px;
    top: -28px;
    bottom: -28px;
    width: 12px;
    border: 2px solid rgba(243, 231, 208, 0.65);
    border-radius: 18px;
}

.index-tab {
    transform: translateX(-105px);
    width: 172px;
    padding: 10px 14px 10px 40px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: var(--blue);
    color: var(--paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: left;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 260ms ease, background 260ms ease;
}

.index-tab:nth-child(2) { background: var(--green); }
.index-tab:nth-child(3) { background: var(--lavender); color: var(--ink); }
.index-tab:nth-child(4) { background: var(--stamp); }
.index-tab:nth-child(5) { background: var(--paper); color: var(--ink); }
.index-tab:nth-child(6) { background: var(--blue); }
.index-tab span { display: block; font-family: "DM Mono", monospace; font-size: 0.62rem; }
.index-tab:hover, .index-tab.active { transform: translateX(-18px); }

.desk-plane,
.paper-stack,
.drawer-frame,
.rumor-drawer,
.correction-board,
.proof-envelope {
    position: relative;
    width: min(980px, 86vw);
    min-height: 72vh;
    background: var(--paper);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(36, 32, 28, 0.12);
    background-image:
        linear-gradient(90deg, rgba(36,32,28,0.035) 1px, transparent 1px),
        linear-gradient(rgba(36,32,28,0.028) 1px, transparent 1px);
    background-size: 34px 34px, 34px 34px;
}

.broadsheet {
    padding: clamp(28px, 5vw, 68px);
    transform: rotate(-2.2deg) perspective(1200px) rotateX(4deg);
}

.broadsheet::before,
.broadsheet::after,
.paper-stack::before,
.correction-board::before {
    content: "";
    position: absolute;
    inset: 16px -18px -18px 26px;
    background: rgba(243, 231, 208, 0.65);
    z-index: -1;
    transform: rotate(2.6deg);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.22);
}

.broadsheet::after { inset: 34px -34px -34px 44px; transform: rotate(-1.4deg); opacity: 0.55; }

.paper-fold { position: absolute; background: rgba(36, 32, 28, 0.1); }
.paper-fold.vertical { top: 0; bottom: 0; left: 50%; width: 2px; box-shadow: 10px 0 28px rgba(36, 32, 28, 0.15); }
.paper-fold.horizontal { left: 0; right: 0; top: 50%; height: 2px; }

.masthead {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin-bottom: 10px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(4rem, 11vw, 10rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.08em;
}

.label-piece,
.dot-piece {
    display: inline-block;
    padding: 0 0.04em 0.06em;
    background: rgba(243, 231, 208, 0.92);
    box-shadow: 4px 7px 0 rgba(36, 32, 28, 0.11);
    animation: labelLand 900ms cubic-bezier(.2,.85,.2,1.2) both;
}
.p1 { color: var(--ink); transform: rotate(-4deg); animation-delay: 80ms; }
.p2 { color: var(--blue); transform: rotate(3deg); animation-delay: 190ms; }
.p3 { color: var(--stamp); transform: rotate(-1deg); animation-delay: 310ms; }
.dot-piece { color: var(--green); animation-delay: 260ms; }

@keyframes labelLand {
    0% { opacity: 0; translate: -20px -55px; rotate: -10deg; }
    68% { opacity: 1; translate: 0 7px; }
    100% { opacity: 1; translate: 0 0; }
}

.edition-code,
.section-title small,
.calendar-tear small,
.cassette-note p,
.privacy-slip,
.handle,
.stamp-target {
    font-family: "DM Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
}

h1, h2, .section-title span, .micro-headline {
    font-family: "Bricolage Grotesque", sans-serif;
    letter-spacing: -0.035em;
}

h1 { max-width: 760px; margin: 18px 0 10px; font-size: clamp(2.2rem, 6vw, 5.4rem); line-height: 0.94; }
h2 { margin: 14px 0; font-size: clamp(2.1rem, 5vw, 4.8rem); line-height: 0.95; max-width: 760px; }
.lead-copy, .article-fragment, .drawer-copy { max-width: 610px; font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.55; }

.pinned, .calendar-tear, .cassette-note, .micro-headline, .margin-note, .address-label {
    position: absolute;
    box-shadow: 0 14px 28px rgba(36, 32, 28, 0.18);
}

.weather-mood { right: 8%; top: 12%; width: 190px; padding: 18px; background: var(--lavender); transform: rotate(6deg); }
.weather-mood b { display: block; font-family: "Bricolage Grotesque", sans-serif; }
.weather-mood em { display: block; margin-top: 8px; }
.pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--stamp); top: -8px; left: 22px; }

.calendar-tear { right: 27%; bottom: 12%; width: 138px; padding: 12px; text-align: center; background: #fff6df; transform: rotate(-5deg); border-top: 13px solid var(--green); }
.calendar-tear strong { font-family: "Bricolage Grotesque", sans-serif; color: var(--green); }
.calendar-tear span { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 4rem; line-height: 0.85; }

.cassette-note { left: 9%; bottom: 12%; width: 230px; padding: 18px; background: var(--ink); color: var(--paper); transform: rotate(4deg); }
.cassette-reels { display: flex; justify-content: space-around; padding: 10px; border: 2px solid rgba(243,231,208,0.35); }
.cassette-reels span { width: 44px; height: 44px; border: 8px double var(--paper); border-radius: 50%; }
.waveform { display: flex; align-items: end; gap: 6px; height: 38px; }
.waveform i { width: 6px; background: var(--green); animation: wave 900ms ease-in-out infinite alternate; }
.waveform i:nth-child(1){height:12px}.waveform i:nth-child(2){height:28px;animation-delay:80ms}.waveform i:nth-child(3){height:18px;animation-delay:160ms}.waveform i:nth-child(4){height:34px;animation-delay:230ms}.waveform i:nth-child(5){height:15px;animation-delay:310ms}.waveform i:nth-child(6){height:25px;animation-delay:390ms}
@keyframes wave { to { transform: scaleY(0.45); } }

.clippings { position: absolute; right: 8%; bottom: 30%; width: 330px; min-height: 220px; }
.micro-headline { padding: 15px 18px; font-size: 1.35rem; line-height: 1; }
.tape-headline { top: 0; left: 14px; background: rgba(185, 167, 255, 0.82); transform: rotate(-8deg); }
.receipt-headline { top: 78px; right: 0; background: #fff9e9; border-left: 16px dotted rgba(36,32,28,0.22); cursor: grab; user-select: none; }
.receipt-headline.dragging { cursor: grabbing; background: var(--green); }
.stamp-headline { bottom: 0; left: 0; background: var(--stamp); color: var(--paper); transform: rotate(5deg); }

.section-title { display: inline-grid; padding: 9px 18px; background: var(--green); transform: rotate(-2deg); box-shadow: 7px 9px 0 rgba(36,32,28,0.1); }
.section-title span { font-size: 1.7rem; font-weight: 800; }
.section-title.blue { background: var(--blue); color: var(--paper); }
.section-title.persimmon { background: var(--stamp); color: var(--paper); }
.section-title.lavender { background: var(--lavender); }

.paper-stack, .correction-board, .proof-envelope { padding: clamp(30px, 6vw, 76px); transform: rotate(1.6deg); }
.morning-stack { min-height: 68vh; }
.privacy-slip { display: inline-block; padding: 12px 16px; background: var(--lavender); }
.redaction { filter: blur(4px); background: var(--ink); color: var(--ink); padding: 0 8px; transition: filter 180ms ease, color 180ms ease, background 180ms ease; cursor: pointer; }
.redaction.revealed, .redaction:hover { filter: blur(0); color: var(--paper); background: var(--blue); }
.pencil-underline { width: min(520px, 80%); height: 46px; display: block; margin-top: 16px; }
.pencil-underline path { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.active-scene .pencil-underline path { animation: drawLine 1200ms ease forwards 250ms; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.coffee-ring { position: absolute; right: 15%; top: 28%; width: 145px; height: 120px; border: 12px solid rgba(228,87,46,0.28); border-radius: 50% 45% 55% 48%; display: grid; place-items: center; color: var(--stamp); font-family: "Bricolage Grotesque", sans-serif; transform: rotate(17deg); }
.margin-note { right: 8%; bottom: 11%; width: 235px; padding: 17px; background: #fff6df; border-left: 8px solid var(--blue); transform: rotate(-5deg); font-style: italic; }

.drawer-frame { background: transparent; box-shadow: none; }
.map-paper { position: relative; min-height: 620px; padding: 58px; background: var(--paper); box-shadow: 0 28px 54px var(--shadow); transform: translateX(var(--drawer-pull, 0px)) rotate(-1deg); transition: transform 360ms ease; }
.neighborhood-map { width: 100%; height: 360px; margin-top: 12px; }
.neighborhood-map path { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 15; }
.neighborhood-map circle { fill: var(--stamp); stroke: var(--paper); stroke-width: 5; }
.address-label { background: #fff9e9; padding: 12px 15px; max-width: 245px; font-family: "DM Mono", monospace; font-size: 0.78rem; }
.address-label.a { left: 7%; bottom: 22%; transform: rotate(-5deg); border-left: 8px solid var(--green); }
.address-label.b { right: 9%; top: 31%; transform: rotate(4deg); border-left: 8px solid var(--lavender); }
.address-label.c { right: 25%; bottom: 10%; transform: rotate(-2deg); border-left: 8px solid var(--stamp); }

.rumor-drawer { padding: 62px; background: var(--ink); color: var(--paper); border: 14px solid #191613; }
.handle { display: inline-block; padding: 9px 20px; background: var(--paper); color: var(--ink); border-radius: 100px; }
.ribbon-track { margin: 42px 0; display: flex; gap: 22px; width: max-content; transform: translateX(var(--ribbon-shift, 0px)); transition: transform 400ms ease; }
.quote-ribbon { min-width: 420px; padding: 22px 28px; background: var(--stamp); color: var(--paper); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.7rem, 3.2vw, 3.2rem); line-height: 1; transform: rotate(-2deg); }
.quote-ribbon.lavender { background: var(--lavender); color: var(--ink); transform: rotate(3deg); }
.quote-ribbon.green { background: var(--green); color: var(--ink); transform: rotate(-1deg); }
.moon-badge { position: absolute; right: 10%; top: 11%; width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--paper); display: grid; place-items: center; transform: rotate(12deg); }
.moon-badge span { font-size: 2.9rem; line-height: 0.7; }
.moon-badge b { font-family: "DM Mono", monospace; font-size: 0.75rem; color: var(--lavender); }

.correction-board { transform: rotate(-1deg); }
.correction-stamp { margin-top: 20px; padding: 16px 24px; border: 5px solid var(--stamp); background: transparent; color: var(--stamp); font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; font-weight: 800; cursor: pointer; transform: rotate(-3deg); }
.correction-stamp.pressed { animation: stampPress 360ms ease; }
@keyframes stampPress { 50% { transform: rotate(-3deg) scale(0.88); } }
.stamp-target { position: absolute; right: 14%; bottom: 25%; width: 220px; height: 120px; display: grid; place-items: center; border: 7px double rgba(228,87,46,0.3); color: rgba(228,87,46,0.3); transform: rotate(10deg); }
.stamp-target.applied { color: var(--stamp); border-color: var(--stamp); font-size: 1.28rem; animation: targetInk 420ms ease; }
@keyframes targetInk { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
.paperclip { position: absolute; right: 8%; top: 12%; width: 42px; height: 96px; border: 7px solid var(--blue); border-radius: 24px; transform: rotate(22deg); }
.paperclip::after { content: ""; position: absolute; inset: 12px 8px; border: 5px solid var(--blue); border-radius: 18px; }
.margin-note.torn { bottom: 9%; left: 10%; right: auto; border-left-color: var(--stamp); }

.proof-envelope { overflow: hidden; transform: rotate(1deg); }
.envelope-flap { position: absolute; inset: 0 0 auto 0; height: 210px; background: rgba(185,167,255,0.46); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 520ms ease; }
.proof-envelope.open .envelope-flap { transform: rotateX(78deg); }
.future-slots { display: grid; gap: 18px; margin-top: 34px; max-width: 680px; }
.future-slots span { display: block; padding: 18px 22px; background: rgba(255,255,255,0.28); border: 2px dashed rgba(36,32,28,0.34); font-family: "Bricolage Grotesque", sans-serif; font-size: 1.45rem; color: rgba(36,32,28,0.52); }
.tape-strip { position: absolute; right: 10%; bottom: 12%; padding: 15px 38px; background: rgba(185,167,255,0.62); transform: rotate(-7deg); font-family: "DM Mono", monospace; text-transform: uppercase; }

.scene.in-view .paper-stack,
.scene.in-view .drawer-frame,
.scene.in-view .rumor-drawer,
.scene.in-view .correction-board,
.scene.in-view .proof-envelope { animation: paperForward 650ms ease both; }
@keyframes paperForward { from { opacity: 0.55; transform: translateY(52px) rotate(var(--r, 1deg)); } }

@media (max-width: 840px) {
    .scene { padding: 8vh 5vw 8vh 16vw; }
    .broadsheet, .paper-stack, .rumor-drawer, .correction-board, .proof-envelope, .map-paper { padding: 28px; }
    .pinned, .calendar-tear, .cassette-note, .micro-headline, .margin-note, .address-label { position: relative; inset: auto; display: block; margin: 16px 0; width: auto; max-width: none; }
    .clippings { position: relative; inset: auto; width: auto; min-height: 0; }
    .masthead { font-size: 3.4rem; }
    .quote-ribbon { min-width: 260px; }
    .stamp-target { position: relative; inset: auto; margin-top: 28px; }
}