@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&family=Special+Elite&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@1,300;1,400&display=swap');

/* Scoped Carbon Content Wrapper Styles */
.carbon_content-wrapper {
  --paper: #dedbd0;
  --paper-dark: #c8c4b8;
  --ink: #111;
  --muted: #99978f;
  --red: #a82e2e;
  --cyan: #3eb5bc;
  --content-width: 760px;

  background-color: #f4efe6;
  color: var(--ink);
  font-family: "Roboto Condensed", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100vw;
  margin-top: calc(20px);
  padding-bottom: 100px;
}

.carbon_content-wrapper *,
.carbon_content-wrapper *::before,
.carbon_content-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

    /* --- HERO --- */
    .carbon_content-wrapper .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        overflow: hidden;
        background: #080808;
    }

    /* --- 3D PARALLAX CAMERA --- */
    .carbon_content-wrapper .crime-parallax {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        perspective: 900px;
        perspective-origin: 50% 50%;
        background: #090909;
        isolation: isolate;
    }

    .carbon_content-wrapper .crime-scene {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        will-change: transform;
        }

    /* --- PARALLAX LAYERS --- */
    .carbon_content-wrapper .crime-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform-origin: center center;
        pointer-events: none;
        will-change: transform;
    }

    .carbon_content-wrapper .layer-bg        { z-index: 1; }
    .carbon_content-wrapper .layer-document  { z-index: 10; }
    .carbon_content-wrapper .layer-main-photo{ z-index: 20; }
    .carbon_content-wrapper .layer-wanted    { z-index: 30; }
    .carbon_content-wrapper .layer-tear      { z-index: 35; }
    .carbon_content-wrapper .layer-evidence  { z-index: 45; }
    .carbon_content-wrapper .layer-title     { z-index: 60; }
    .carbon_content-wrapper .layer-details   { z-index: 70; }

    /* --- BACKGROUND CITY --- */
    .carbon_content-wrapper .bg-image {
        position: absolute;
        top: -8%;
        left: -8%;
        width: 116%;
        height: 116%;
        background-image:
            linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.7)),
            url("https://interactive.nation.africa/2026/dev/crime/part_one/images/london.jpg");
        background-size: cover;
        background-position: center;
        filter: grayscale(100%) contrast(1.55) brightness(.4);
        transform: scale(1.08);
    }

    /* --- CLASSIFIED DOCUMENT --- */
    .carbon_content-wrapper .classified-doc {
        position: absolute;
        top: 5%;
        left: 2%;
        width: 32%;
        height: 55%;
        padding: 6% 5%;
        overflow: hidden;
        color: #171717;
        background: linear-gradient(rgba(230,226,211,.98), rgba(207,202,187,.97));
        font-family: "Special Elite", cursive;
        font-size: clamp(.48rem, .72vw, .82rem);
        line-height: 1.4;
        transform: rotate(-4deg);
        clip-path: polygon(
            0% 4%, 4% 1%, 11% 3%, 18% 0%, 25% 3%, 34% 1%, 43% 4%, 52% 0%,
            60% 3%, 70% 1%, 80% 3%, 90% 0%, 98% 4%, 100% 96%, 93% 98%,
            87% 96%, 79% 100%, 69% 97%, 59% 99%, 49% 96%, 39% 100%, 30% 97%,
            21% 99%, 12% 96%, 3% 100%, 0% 96%
        );
        box-shadow: 15px 20px 35px rgba(0,0,0,.8);
    }

    .carbon_content-wrapper .classified-doc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.06) 4px);
        opacity: .6;
    }

    .carbon_content-wrapper .classified-doc p {
        position: relative;
        z-index: 2;
        margin-bottom: 14px;
        opacity: .82;
    }

    /* --- STAMP --- */
    .carbon_content-wrapper .stamp {
        position: absolute;
        left: 18%;
        bottom: 32%;
        z-index: 4;
        padding: 4px 12px;
        border: 3px solid rgba(126,32,32,.85);
        color: rgba(126,32,32,.85);
        font-family: "Oswald", sans-serif;
        font-size: clamp(.8rem, 1.2vw, 1.4rem);
        font-weight: 700;
        letter-spacing: .15em;
        transform: rotate(-10deg);
        opacity: .8;
    }

    /* --- MAIN PHOTOGRAPH --- */
    .carbon_content-wrapper .cop-photo {
        position: absolute;
        top: 15%;
        left: 32%;
        width: 49%;
        height: 84%;
        overflow: hidden;
        background: #111;
        transform: rotate(-1.3deg);
        clip-path: polygon(2% 1%, 97% 0%, 100% 3%, 98% 98%, 3% 100%, 0% 96%, 1% 7%);
        box-shadow: 18px 24px 45px rgba(0,0,0,.82);
    }

    .carbon_content-wrapper .cop-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        background: linear-gradient(90deg, rgba(0,255,255,.10), transparent 38%, rgba(255,0,0,.10));
        mix-blend-mode: screen;
    }

    .carbon_content-wrapper .cop-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.65) 100%);
    }

    .carbon_content-wrapper .cop-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
    }

    /* --- WANTED PAPER --- */
    .carbon_content-wrapper .wanted-header {
        position: absolute;
        top: -2%;
        left: 29%;
        width: 55%;
        height: 29%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(rgba(239,235,222,.97), rgba(211,207,194,.96));
        color: #181818;
        transform: rotate(-1.5deg);
        filter: drop-shadow(10px 14px 16px rgba(0,0,0,.65));
        clip-path: polygon(
            0% 5%, 5% 1%, 11% 5%, 17% 1%, 24% 5%, 31% 0%, 38% 5%, 45% 1%,
            52% 4%, 60% 0%, 67% 5%, 74% 1%, 81% 5%, 88% 1%, 95% 4%, 100% 1%,
            98% 94%, 93% 98%, 87% 94%, 81% 100%, 74% 95%, 67% 99%, 59% 94%,
            52% 100%, 45% 95%, 38% 99%, 31% 94%, 23% 100%, 16% 95%, 9% 99%, 2% 94%
        );
    }

    .carbon_content-wrapper .wanted-header h1 {
        position: relative;
        font-family: "Oswald", sans-serif;
        font-size: clamp(3.5rem, 8vw, 8.8rem);
        font-weight: 700;
        line-height: .8;
        letter-spacing: .08em;
        text-transform: uppercase;
        transform: scaleX(1.04);
    }

    .carbon_content-wrapper .wanted-header h1::before,
    .carbon_content-wrapper .wanted-header h1::after {
        content: "WANTED";
        position: absolute;
        inset: 0;
        z-index: -1;
    }
    .carbon_content-wrapper .wanted-header h1::before {
        color: #00cbd4;
        transform: translate(-3px, 2px);
    }
    .carbon_content-wrapper .wanted-header h1::after {
        color: #c82626;
        transform: translate(3px, -1px);
    }

    /* --- TORN PAPER (disabled but kept) --- */
    .carbon_content-wrapper .tear {
        position: absolute;
        background: #dedbd0;
        pointer-events: none;
        filter: drop-shadow(5px 8px 8px rgba(0,0,0,.4));
    }
    .carbon_content-wrapper .tear-one {
        top: 25%;
        left: 18%;
        width: 31%;
        height: 6%;
        transform: rotate(8deg);
        clip-path: polygon(0 40%, 7% 10%, 14% 55%, 21% 15%, 28% 62%, 36% 20%,
            44% 72%, 52% 28%, 61% 68%, 69% 12%, 77% 61%, 87% 18%, 100% 48%, 100% 100%, 0 100%);
    }
    .carbon_content-wrapper .tear-two {
        right: 21%;
        bottom: 24%;
        width: 34%;
        height: 7%;
        transform: rotate(-5deg);
        background: #e1ded3;
        clip-path: polygon(0 55%, 8% 20%, 16% 62%, 25% 12%, 34% 55%, 44% 15%,
            53% 63%, 64% 8%, 73% 57%, 82% 14%, 92% 55%, 100% 20%, 100% 100%, 0 100%);
    }

    /* --- EVIDENCE PHOTO --- */
    .carbon_content-wrapper .bottom-photo {
        position: absolute;
        right: 3%;
        bottom: 5%;
        width: 30%;
        height: 35%;
        padding: 8px;
        background: #d9d5c9;
        transform: rotate(5deg);
        box-shadow: 12px 16px 30px rgba(0,0,0,.8);
    }

    .carbon_content-wrapper .bottom-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) contrast(1.3) brightness(.78);
    }

    /* --- MAIN TITLE --- */
    .carbon_content-wrapper .main-title {
        position: absolute;
        left: 16%;
        bottom: 13%;
        width: 62%;
        transform: rotate(-1.5deg);
        filter: drop-shadow(5px 7px 7px rgba(0,0,0,.75));
    }

    .carbon_content-wrapper .title-row {
        display: flex;
        align-items: baseline;
        gap: 7px;
    }

    .carbon_content-wrapper .main-title .mid {
        font-family: "Oswald", sans-serif;
        font-size: clamp(1.5rem, 3vw, 3.5rem);
        font-style: italic;
        letter-spacing: .06em;
        color: #f1f1ec;
    }

    .carbon_content-wrapper .main-title .night {
        display: inline-block;
        padding: 0 10px;
        background: #0c0c0c;
        color: #eee;
        font-family: "Oswald", sans-serif;
        font-size: clamp(3rem, 6.5vw, 7rem);
        font-weight: 700;
        line-height: .99;
        letter-spacing: .04em;
        box-shadow: 8px 10px 20px rgba(0,0,0,.8);
    }

    .carbon_content-wrapper .main-title .shift {
        display: block;
        margin-left: 24%;
        margin-top: -1px;
        font-family: "Oswald", sans-serif;
        font-size: clamp(3rem, 6.2vw, 6.8rem);
        font-weight: 500;
        line-height: .8;
        letter-spacing: .04em;
        color: transparent;
        -webkit-text-stroke: 2px #e8e7df;
        text-shadow: 3px 3px 0 rgba(191,38,38,.55), -2px -1px 0 rgba(40,174,184,.45);
    }

    /* --- META --- */
    .carbon_content-wrapper .meta-group {
        margin-top: 14px;
        margin-left: 5%;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .carbon_content-wrapper .sub-title {
        display: inline-block;
        width: fit-content;
        padding: 2px 7px;
        color: #d9d8d0;
        font-family: "Roboto Condensed", sans-serif;
        font-size: clamp(.5rem, .75vw, .85rem);
        font-weight: 700;
        letter-spacing: .28em;
        text-transform: uppercase;
    }

    .carbon_content-wrapper .sub-title.highlight {
        background: #0d0d0d;
        border-left: 3px solid #c53a3a;
    }

    /* --- FOREGROUND DETAILS --- */
    .carbon_content-wrapper .case-number {
        position: absolute;
        top: 17%;
        right: 4%;
        font-size: clamp(.45rem, .65vw, .75rem);
        letter-spacing: .28em;
        color: #d4d2c9;
        transform: rotate(2deg);
        }
        .carbon_content-wrapper .case-number::before {
        content: "CASE FILE / ";
        color: #9d2929;
    }

    .carbon_content-wrapper .location {
        position: absolute;
        right: 5%;
        top: 30%;
        font-family: "Oswald", sans-serif;
        font-size: clamp(1rem, 2vw, 2rem);
        font-weight: 700;
        letter-spacing: .15em;
        color: #dedcd4;
        writing-mode: vertical-rl;
        opacity: .8;
    }

    /* --- HERO EFFECTS --- */
    .carbon_content-wrapper .camera-overlay {
        position: absolute;
        inset: 0;
        z-index: 100;
        pointer-events: none;
    }

    .carbon_content-wrapper .vignette {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.12) 60%, rgba(0,0,0,.88) 100%);
    }

    .carbon_content-wrapper .grain {
        position: absolute;
        inset: 0;
        opacity: .25;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
        mix-blend-mode: screen;
    }

    .carbon_content-wrapper .scanlines {
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.18) 4px);
        opacity: .55;
    }

    .carbon_content-wrapper .color-shift {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,255,255,.025), transparent 40%, rgba(255,0,0,.04));
        mix-blend-mode: screen;
    }

/* --- SCROLL INDICATOR --- */
    .carbon_content-wrapper .scroll-indicator {
        position: absolute;
        left: 50%;
        bottom: 24px;
        z-index: 150;
        transform: translateX(-50%);
        font-size: 10px;
        letter-spacing: .35em;
        text-transform: uppercase;
        color: rgba(255,255,255,.6);
        transition: opacity .4s ease;
    }

    .carbon_content-wrapper .scroll-indicator::after {
        content: "";
        display: block;
        width: 1px;
        height: 35px;
        margin: 10px auto 0;
        background: rgba(255,255,255,.6);
        animation: scrollPulse 1.6s infinite ease-in-out;
    }

    @keyframes scrollPulse {
    0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .3; }
    50%     { transform: scaleY(1);   transform-origin: top; opacity: 1; }
    }

    /* --- ARTICLE --- */
    .carbon_content-wrapper .article {
        position: relative;
        z-index: 10;
        /* border-top: 1px solid #252525; */
    }

    .carbon_content-wrapper .article-intro {
        max-width: 920px;
        margin: 0 auto;
        padding: 110px 30px 80px;
        text-align: center;
    }

    .carbon_content-wrapper .eyebrow {
        margin-top: 22px;
        margin-bottom: 22px;
        color: #b03636;
        font-family: "Oswald", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .35em;
        text-transform: uppercase;
    }

    .carbon_content-wrapper .eyebrow::before{
        content: "";
        display: inline-block;
        width: 30px;
        height: 1px;
        margin-right: 10px;
        vertical-align: middle;
        background: #a83232;
    }

    .carbon_content-wrapper .eyebrow::after{
        content: "";
        display: inline-block;
        width: 30px;
        height: 1px;
        margin-left: 10px;
        vertical-align: middle;
        background: #a83232;
    }

    .carbon_content-wrapper .article-intro h2 {
        margin-bottom: 28px;
        color: #2e2e2c;
        font-family: "Georgia", sans-serif;
        font-size: clamp(2.0rem, 5vw, 3.0rem);
        font-weight: 500;
        line-height: 1.2;
        /* text-transform: uppercase; */
        letter-spacing: .02em;
    }

    .carbon_content-wrapper .byline {
        display: flex;
        flex-wrap: wrap; 
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-top: var(--spacing-md);
        font-family: "Comic Neue", cursive;
        font-style: italic;
        font-size: 1rem;
        line-height: 1.6;
    }
    .carbon_content-wrapper .byline span {
        position: relative;
    }

    /* --- TEXT STYLES --- */
    .carbon_content-wrapper .narrative-text {
        width: calc(90% - 10px);
        max-width: 700px;
        margin: 100px auto 100px; 
        padding: 60px 40px;
        background: #fff;
        border: 5px solid var(--ink);
        box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
        font-family: "Comic Neue", cursive;
        font-weight: 300;
        font-style: italic;
        font-size: clamp(1rem, 1.3vw, 1.4rem);
        line-height: 1.6;
        text-align: center;
        border-image: url(https://interactive.nation.africa/2025/dev/after_five/images/comic-frame.png) 22 16 16 22;
        transform: none; 
    }

    .carbon_content-wrapper .narrative-text h1 { margin-bottom: 12px; font-size: clamp(1.25rem, 3.8vw, 2rem); }

    /* Reveal Animation */
    .carbon_content-wrapper .reveal {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
        will-change: transform, opacity;
    }
    .carbon_content-wrapper .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- SCENE STYLES --- */
    .carbon_content-wrapper .scene-wrapper { 
        position: relative; 
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    .carbon_content-wrapper .scene-section {
        position: relative;
        padding: clamp(2rem, 8vw, 4rem) 0;
        border-bottom: 1px solid var(--border-color);
    }

    .carbon_content-wrapper .scene-img {
        position: relative;
        width: 100%;
        margin: 2.5rem 0;
        overflow: visible;
    }

    .carbon_content-wrapper .scene-img img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
    }