/* bada.news - Editorial Noir Broadsheet */

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

:root{
    --newsprint:#F5F0E8;
    --ink:#1A1612;
    --pencil:#8B7355;
    --red:#9B2335;
    --burgundy:#4A1525;
    --blue:#3A4F6A;
    --rule:#3D3530;
    --cream:#EDE3C9;
}

html{scroll-behavior:smooth}

body{
    background:var(--newsprint);
    color:var(--ink);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.55;
    overflow-x:hidden;
}

/* SVG defs hidden */
.svg-defs{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    filter:url(#grain);
    opacity:0.03;
}

/* Broadsheet container */
.broadsheet{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
}

/* Masthead */
.masthead{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    padding:16px 0 8px;
    gap:16px;
}

.masthead-title{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:-0.02em;
    line-height:1;
    text-align:center;
    color:var(--ink);
}

.masthead-date,
.masthead-edition{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    letter-spacing:0.03em;
    color:var(--pencil);
    white-space:nowrap;
}

.masthead-rule{
    border:none;
    height:3px;
    background:var(--ink);
    margin-bottom:24px;
}

/* Section rules */
.section-rule{
    border:none;
    height:1px;
    background:var(--ink);
    position:relative;
}

.section-rule::before,
.section-rule::after{
    content:'';
    position:absolute;
    left:0;right:0;
    height:1px;
    background:var(--ink);
}

.section-rule::before{top:-4px;height:3px}
.section-rule::after{bottom:-4px;height:3px}

/* Fold break */
.fold-break{
    padding:24px 0;
    text-align:center;
}

.fold-label{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.1em;
    color:var(--pencil);
    padding:8px 0;
}

/* Section headers */
.section-header{
    padding:16px 0 24px;
    border-bottom:1px solid var(--rule);
    margin-bottom:24px;
}

.section-dateline{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    letter-spacing:0.1em;
    color:var(--pencil);
}

/* Typewriter reveal */
.typewriter{
    overflow:hidden;
    white-space:nowrap;
    display:inline-block;
    max-width:0;
    vertical-align:bottom;
    border-right:2px solid var(--pencil);
    transition:none;
}

.typewriter.typed{
    animation:typeReveal 1.5s steps(50,end) forwards;
}

.typewriter.done{
    border-right:none;
}

@keyframes typeReveal{
    from{max-width:0}
    to{max-width:800px}
}

/* Broadsheet grid */
.broadsheet-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0 16px;
    position:relative;
}

/* Column rules via border-right */
.broadsheet-grid>*{
    border-right:0.5px solid var(--rule);
    padding-right:16px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 600ms ease-in,transform 600ms ease-in;
}

.broadsheet-grid>*.revealed{
    opacity:1;
    transform:translateY(0);
}

.broadsheet-grid>*:last-child{
    border-right:none;
}

/* Story spans */
.story-lead{grid-column:1/5;border-right:0.5px solid var(--rule);padding-right:16px}
.story-sidebar{grid-column:5/7;border-right:none;padding-left:8px}
.story-2col{grid-column:span 2}
.story-1col{grid-column:span 1}
.story-3col{grid-column:1/5}

/* Dense grid */
.grid-dense{
    grid-template-columns:repeat(4,1fr);
}

.grid-dense .story-2col{grid-column:span 2}
.grid-dense .story-1col{grid-column:span 1}

/* Analysis grid */
.grid-analysis{
    grid-template-columns:repeat(6,1fr);
}

.grid-analysis .story-3col{
    grid-column:1/5;
}

/* Headlines */
.headline{
    font-family:'Playfair Display',serif;
    letter-spacing:-0.02em;
    line-height:1.05;
    color:var(--ink);
    margin-bottom:12px;
}

.headline-lead{
    font-weight:900;
    font-size:clamp(2rem,5vw,4.5rem);
    margin-bottom:16px;
}

.headline-secondary{
    font-weight:700;
    font-size:clamp(1.4rem,3vw,2.5rem);
}

.headline-tertiary{
    font-weight:700;
    font-size:clamp(1.1rem,2vw,1.6rem);
}

/* Bylines */
.byline{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.03em;
    color:var(--pencil);
    margin-bottom:16px;
}

.byline-name{
    font-weight:400;
}

.byline-date{
    margin-left:12px;
}

/* Story columns (multi-column text flow) */
.story-columns{
    column-count:3;
    column-gap:16px;
    column-rule:0.5px solid var(--rule);
    margin-top:16px;
}

.story-columns p{
    break-inside:avoid;
    margin-bottom:1em;
}

/* Pull quote */
.pull-quote{
    font-family:'Source Serif 4',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.3rem,2.5vw,2rem);
    line-height:1.4;
    color:var(--ink);
    background:var(--cream);
    padding:24px;
    margin-top:24px;
}

.pull-quote p::before{content:open-quote}
.pull-quote p::after{content:close-quote}

/* Inline quote */
.inline-quote{
    font-family:'Source Serif 4',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.1rem,1.6vw,1.4rem);
    line-height:1.5;
    border-left:3px solid var(--red);
    padding:16px 24px;
    margin:24px 0;
    color:var(--ink);
}

/* Duotone image */
.duotone-image{
    position:relative;
    margin:16px 0;
    background:var(--ink);
    overflow:hidden;
}

.duotone-image svg{
    display:block;
    width:100%;
    height:auto;
    filter:sepia(0.4) contrast(1.2) grayscale(0.7);
    mix-blend-mode:multiply;
}

.halftone-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle,var(--ink) 1px,transparent 1px);
    background-size:4px 4px;
    opacity:0.08;
    pointer-events:none;
}

/* Breaking clipping */
.breaking-clipping{
    grid-column:span 2;
    position:relative;
    background:var(--newsprint);
    padding:20px;
    transform:rotate(var(--clip-rotate,1.5deg));
    clip-path:polygon(2% 0%,98% 1%,100% 3%,99% 97%,97% 100%,3% 98%,0% 96%,1% 2%);
    box-shadow:2px 3px 4px rgba(26,22,18,0.25);
    border:none;
    z-index:2;
    opacity:0;
    transition:opacity 500ms cubic-bezier(0.25,0.46,0.45,0.94),transform 500ms cubic-bezier(0.25,0.46,0.45,0.94);
}

.breaking-clipping.dropped{
    opacity:1;
}

.breaking-flag{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--newsprint);
    background:var(--red);
    padding:2px 8px;
    margin-bottom:8px;
    transform:rotate(-1deg);
}

.clipping-text{
    font-size:0.9rem;
    line-height:1.45;
}

/* Marginalia */
.marginalia{
    position:absolute;
    top:0;
    right:-200px;
    width:180px;
}

.margin-note{
    border-left:2px dashed var(--pencil);
    padding:8px 0 8px 12px;
    margin-bottom:16px;
}

.margin-label{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    letter-spacing:0.08em;
    color:var(--red);
    margin-bottom:4px;
    font-weight:400;
}

.margin-note p{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    line-height:1.5;
    color:var(--pencil);
    font-style:italic;
}

/* Editorial layout */
.editorial-layout{
    max-width:680px;
    margin:0 auto;
    position:relative;
}

.story-editorial p{
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.65;
    margin-bottom:1.2em;
}

.marginalia-editorial{
    right:-220px;
    top:40px;
}

/* Section spacing */
.section{
    position:relative;
    padding:24px 0 48px;
}

/* Links */
a{
    color:var(--blue);
    text-decoration:none;
    transition:text-decoration 200ms ease;
}

a:hover{
    text-decoration:underline wavy var(--red);
}

/* Colophon */
.colophon{
    padding:32px 0 48px;
    background:var(--cream);
    margin:48px -24px 0;
    padding-left:24px;
    padding-right:24px;
}

.colophon .section-rule{
    margin-bottom:24px;
}

.colophon-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.colophon-title{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:-0.02em;
    color:var(--rule);
}

.colophon-meta,
.colophon-timestamp{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.03em;
    color:var(--pencil);
}

/* Responsive */
@media(max-width:1400px){
    .marginalia{
        position:relative;
        right:auto;
        width:100%;
        display:flex;
        gap:24px;
        margin-top:24px;
        padding-top:16px;
        border-top:1px dashed var(--pencil);
    }

    .marginalia-editorial{
        right:auto;
        top:auto;
    }
}

@media(max-width:768px){
    .broadsheet{
        padding:0 16px;
    }

    .masthead{
        grid-template-columns:1fr;
        text-align:center;
        gap:4px;
    }

    .broadsheet-grid{
        grid-template-columns:1fr;
    }

    .grid-dense{
        grid-template-columns:1fr;
    }

    .grid-analysis{
        grid-template-columns:1fr;
    }

    .story-lead,
    .story-sidebar,
    .story-2col,
    .story-1col,
    .story-3col,
    .breaking-clipping{
        grid-column:1/-1;
        border-right:none;
        padding-right:0;
    }

    .story-columns{
        column-count:1;
    }

    .marginalia{
        flex-direction:column;
    }

    .breaking-clipping{
        transform:rotate(0.5deg);
    }

    .colophon{
        margin:24px -16px 0;
        padding-left:16px;
        padding-right:16px;
    }
}