/* matchumnews.com - Anti-design investigative journalism dossier */

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

:root{
    --parchment:#F2E8D5;
    --near-black:#0D0D0D;
    --sienna:#B85C38;
    --forest:#2B4C3F;
    --slate:#5C5C5C;
    --signal-red:#C23616;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--parchment);
    color:var(--near-black);
    font-family:'Source Serif 4','Georgia',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Dateline Bar */
.dateline-bar{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:0.4rem 1.5rem;
    background:var(--parchment);
    border-bottom:1px solid rgba(13,13,13,0.1);
    transition:transform 0.3s ease;
}

.dateline-bar.hidden{transform:translateY(-100%)}

.dateline-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:400;
    font-size:0.7rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--slate);
}

.edition-stamp{width:36px;height:36px}
.stamp-svg{
    width:100%;height:100%;
    animation:stamp-rotate 60s linear infinite;
}

@keyframes stamp-rotate{to{transform:rotate(360deg)}}

/* Red Thread Layer */
.red-thread-layer{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:5;
}

.thread-path{
    transition:stroke-dashoffset 1.5s ease;
}

.thread-path.drawn{stroke-dashoffset:0}

/* Crosshair */
.crosshair{width:24px;height:24px;margin-bottom:0.75rem;display:block}
.crosshair.sm{width:16px;height:16px;margin-bottom:0.5rem}

/* Sections */
.act{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:80px 24px;
    position:relative;
}

/* Dateline (Hero) */
.act-dateline{flex-direction:column}

.dateline-content{text-align:center}

.lead-headline{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(3.5rem,9vw,10rem);
    letter-spacing:-0.02em;
    line-height:0.92;
    color:var(--near-black);
    text-transform:uppercase;
    clip-path:inset(0 100% 0 0);
    animation:typewriter-reveal 2.5s ease-out 0.8s forwards;
}

@keyframes typewriter-reveal{
    to{clip-path:inset(0 0% 0 0)}
}

.lead-rule{
    width:0;height:1px;
    background:var(--near-black);
    margin:1.5rem auto;
    transition:width 1.2s ease-out;
}

.lead-rule.extended{width:80vw;max-width:900px}

.lead-meta{
    opacity:0;
    transition:opacity 0.6s ease;
}

.lead-meta.visible{opacity:1}

.byline{
    font-family:'Space Grotesk',sans-serif;
    font-weight:400;
    font-size:clamp(0.875rem,1.5vw,1.125rem);
    color:var(--slate);
}

.byline-sep{
    color:var(--slate);
    margin:0 0.5rem;
}

/* Lead Section */
.act-lead{align-items:flex-start;padding-top:120px}

.lead-grid{
    display:grid;
    grid-template-columns:7fr 5fr;
    gap:40px;
    max-width:1100px;width:100%;
}

.lead-story{
    opacity:0;transform:translateX(-30px);
    transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.lead-story.revealed{opacity:1;transform:translateX(0)}

.story-body{
    max-width:38em;
    margin-bottom:1.5rem;
    color:#2A2A2A;
}

.has-dropcap::first-letter{
    font-family:'Bebas Neue',sans-serif;
    font-size:4.5em;
    float:left;
    line-height:0.8;
    padding-right:0.08em;
    padding-top:0.05em;
    color:var(--sienna);
}

.lead-data{
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translateY(30px);
    transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.lead-data.revealed{opacity:1;transform:translateY(0)}

.data-block{text-align:center}

.data-number{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(6rem,15vw,12rem);
    line-height:1;
    color:var(--near-black);
    display:block;
}

.data-caption{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--slate);
    display:block;
    margin-top:0.5rem;
}

/* Fault Lines */
.fault-line{
    height:60px;
    background:var(--near-black);
    overflow:hidden;
    display:flex;align-items:center;
    position:relative;
}

.fault-line-warm .ticker-item{color:var(--sienna)}

.ticker-track{
    display:flex;
    white-space:nowrap;
    animation:marquee 40s linear infinite;
}

.ticker-item{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--parchment);
    padding-right:2rem;
}

@keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Correspondents */
.act-correspondents{padding:80px 24px}

.correspondents-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    max-width:1100px;width:100%;
}

.correspondent-module{
    padding:2rem;
    opacity:0;
    transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1),background 0.3s,color 0.3s;
}

.correspondent-module[data-reveal="up"]{transform:translateY(30px)}
.correspondent-module[data-reveal="right"]{transform:translateX(30px)}
.correspondent-module.revealed{opacity:1;transform:translate(0)}

.correspondent-module:hover{
    background:var(--near-black);
    color:var(--parchment);
}

.correspondent-module:hover .module-headline,
.correspondent-module:hover .module-sub,
.correspondent-module:hover .module-excerpt{color:var(--parchment)}

.module-headline{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:-0.02em;
    line-height:0.92;
    color:var(--near-black);
    text-transform:uppercase;
    margin-bottom:0.5rem;
    transition:color 0.3s;
}

.module-sub{
    font-family:'Space Grotesk',sans-serif;
    font-weight:500;
    font-size:clamp(0.875rem,1.5vw,1.125rem);
    color:var(--slate);
    margin-bottom:0.75rem;
    transition:color 0.3s;
}

.module-excerpt{
    font-size:clamp(0.95rem,1vw,1.05rem);
    line-height:1.55;
    transition:color 0.3s;
}

/* Dossier */
.act-dossier{
    flex-direction:column;
    align-items:flex-start;
    padding:60px 24px;
    min-height:auto;
}

.dossier-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem,4vw,3rem);
    letter-spacing:-0.02em;
    color:var(--near-black);
    text-transform:uppercase;
}

.dossier-rule{
    width:100%;height:1px;
    background:var(--near-black);
    margin:1rem 0 2rem;
}

.dossier-scroll{
    width:100%;
    display:flex;
    gap:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:1rem;
}

.dossier-card{
    min-width:80vw;
    max-width:600px;
    margin-right:-8%;
    scroll-snap-align:center;
    border:1px solid var(--near-black);
    padding:2rem;
    background:var(--parchment);
    box-shadow:4px 4px 0 var(--sienna);
    flex-shrink:0;
}

.dossier-headline{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.2rem,2vw,1.6rem);
    letter-spacing:-0.01em;
    color:var(--near-black);
    text-transform:uppercase;
    margin-bottom:0.5rem;
}

.dossier-summary{
    font-size:0.95rem;
    line-height:1.55;
    margin-bottom:0.75rem;
}

.dossier-data{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    color:var(--sienna);
    text-transform:uppercase;
}

/* Analysis */
.act-analysis{padding:80px 24px}

.analysis-grid{
    display:grid;
    grid-template-columns:2fr 8fr 2fr;
    gap:24px;
    max-width:1100px;width:100%;
}

.margin-note{
    opacity:0;transform:translateY(15px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.margin-note.revealed{opacity:1;transform:translateY(0)}

.mono-note{
    font-family:'IBM Plex Mono',monospace;
    font-style:italic;
    font-size:0.75rem;
    color:var(--slate);
    line-height:1.5;
}

.analysis-body{
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.analysis-body.revealed{opacity:1;transform:translateY(0)}

.analysis-text{
    max-width:38em;
    margin:0 auto 1.5rem;
    color:#2A2A2A;
}

.pull-quote{
    margin:2.5rem 0;
    padding:1.5rem 2rem;
    border-left:4px solid var(--sienna);
}

.pull-quote p{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.4rem,2.5vw,2rem);
    line-height:1.15;
    color:var(--near-black);
    text-transform:uppercase;
}

/* Colophon */
.act-colophon{
    flex-direction:column;
    text-align:center;
}

.colophon-content{
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.colophon-content.revealed{opacity:1;transform:translateY(0)}

.colophon-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem,4vw,3.5rem);
    letter-spacing:-0.02em;
    color:var(--near-black);
    text-transform:uppercase;
}

.stamp-large{width:120px;margin:2rem auto}
.stamp-large svg{width:100%;height:auto}

.colophon-line{
    font-family:'Space Grotesk',sans-serif;
    font-weight:400;
    font-size:1rem;
    color:var(--slate);
    margin-top:1rem;
}

/* Responsive */
@media(max-width:768px){
    .lead-grid{grid-template-columns:1fr}
    .correspondents-grid{grid-template-columns:1fr}
    .analysis-grid{grid-template-columns:1fr}
    .margin-note{display:none}
    .dossier-card{min-width:90vw;margin-right:-5%}
    .red-thread-layer{display:none}
}

@media(prefers-reduced-motion:reduce){
    .lead-headline{clip-path:none;animation:none}
    .lead-story,.lead-data,.correspondent-module,.margin-note,.analysis-body,.colophon-content{
        opacity:1;transform:none;transition:none;
    }
    .ticker-track{animation:none}
    .stamp-svg{animation:none}
    .lead-rule{width:80vw;max-width:900px;transition:none}
    .lead-meta{opacity:1;transition:none}
}