/* gazza.news -- Italian broadsheet newspaper */
/* Palette: #F5F0E6 (Newsprint), #2C2018 (Espresso), #3D3226 (Warm Charcoal), #C4B49A (Aged Ink), #C83E2C (Vermillion), #6B8F71 (Copper Patina), #EBE3D3 (Parchment Shadow), #1A150F (Compositing Room) */

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

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

body{
    background:#F5F0E6;
    color:#3D3226;
    font-family:'Source Serif 4','Georgia',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Masthead */
.masthead{
    padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,3vw,3rem) 0;
    border-top:1px solid #2C2018;
}

.masthead-rules{
    border-bottom:3px solid #2C2018;
    padding-bottom:1rem;
}

.masthead-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
}

.dateline,.edition-num{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(0.65rem,0.9vw,0.8rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#7A6E5D;
}

.masthead-title{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:0.95;
    color:#2C2018;
    position:relative;
    display:inline-flex;
    align-items:baseline;
}

.title-letter{
    opacity:0;
    animation:letterIn 0.1s ease forwards;
    animation-delay:calc(var(--i) * 60ms + 300ms);
}

@keyframes letterIn{
    to{opacity:1}
}

.title-dot{
    opacity:0;
    animation:dotSnap 0.3s cubic-bezier(0.68,-0.55,0.265,1.55) forwards;
    animation-delay:0.9s;
}

@keyframes dotSnap{
    to{opacity:1}
}

.magpie-icon{
    width:24px;
    height:24px;
    margin-right:0.25rem;
    opacity:0;
    animation:flyIn 0.5s ease-out forwards;
    animation-delay:1.2s;
}

@keyframes flyIn{
    from{opacity:0;transform:translateX(30px)}
    to{opacity:1;transform:translateX(0)}
}

/* Ticker */
.ticker{
    overflow:hidden;
    background:#EBE3D3;
    border-bottom:1px solid #C4B49A;
    padding:0.5rem 0;
}

.ticker-track{
    display:flex;
    gap:1.5rem;
    white-space:nowrap;
    animation:scroll 40s linear infinite;
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.04em;
    color:#3D3226;
}

.ticker-track:hover{
    animation-play-state:paused;
}

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

.ticker-sep{
    color:#C83E2C;
}

/* Fold line */
.fold-line{
    position:absolute;
    top:80vh;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(to bottom,transparent,rgba(44,32,24,0.06),transparent);
    pointer-events:none;
    z-index:5;
}

/* Broadsheet grid */
.broadsheet{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    column-gap:1.5rem;
    row-gap:2rem;
    max-width:1200px;
    margin:0 auto;
    padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,3vw,3rem);
}

/* Stories */
.story{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.story.revealed{
    opacity:1;
    transform:translateY(0);
}

.story-lead{
    grid-column:1/5;
}

.story-secondary{
    grid-column:span 3;
}

.story-wide{
    grid-column:1/-1;
}

.story-feature{
    grid-column:1/5;
}

.story-sidebar{
    grid-column:5/7;
    background:#EBE3D3;
    padding:1.5rem;
}

/* Headlines */
.headline{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    color:#2C2018;
    line-height:1.15;
    letter-spacing:0.01em;
    margin-bottom:0.75rem;
}

.headline-lead{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(2rem,5vw,4rem);
    line-height:0.95;
    letter-spacing:0.02em;
}

.headline-secondary{
    font-size:clamp(1.2rem,2.5vw,2rem);
}

/* Bylines */
.byline{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#7A6E5D;
    margin-bottom:1rem;
}

/* Body text */
.body-text{
    text-align:justify;
    hyphens:auto;
    margin-bottom:1rem;
}

.has-dropcap::first-letter{
    font-family:'Playfair Display',serif;
    font-size:4.5em;
    float:left;
    line-height:0.75;
    padding-right:0.08em;
    padding-top:0.05em;
    color:#2C2018;
}

/* Column rules */
.col-rule{
    grid-column:3/4;
    width:1px;
    background:#C4B49A;
    justify-self:center;
    height:0;
    transition:height 0.8s ease;
}

.col-rule.grown{
    height:100%;
}

.rule-1{grid-row:1/3}
.rule-2{grid-column:5/6;grid-row:4/6}
.rule-3{grid-column:4/5;grid-row:7/9}

/* Section dividers */
.section-divider{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:1rem;
}

.section-divider::before,
.section-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:#C4B49A;
}

.section-divider span{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:#6B8F71;
    font-variant:small-caps;
}

/* Pull quotes */
.pull-quote{
    position:relative;
    margin:2rem 0;
    padding:1rem 0 1rem 3rem;
}

.pq-mark{
    font-family:'Playfair Display',serif;
    font-size:4rem;
    color:#C83E2C;
    position:absolute;
    left:0;
    top:-0.5rem;
    line-height:1;
}

.pq-text{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:clamp(1.1rem,1.8vw,1.5rem);
    color:#2C2018;
    line-height:1.45;
}

/* Footer */
.compositing-room{
    grid-column:1/-1;
    background:#1A150F;
    padding:2rem;
    margin-top:2rem;
    display:flex;
    justify-content:center;
}

.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
}

.magpie-footer{
    width:80px;
    height:auto;
    opacity:0.5;
}

.footer-text{
    font-family:'IBM Plex Sans Condensed',sans-serif;
    font-weight:500;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#7A6E5D;
}

/* Responsive */
@media(max-width:1024px){
    .broadsheet{
        grid-template-columns:1fr 1fr;
    }
    .story-lead,.story-wide,.story-feature,.story-sidebar{
        grid-column:1/-1;
    }
    .story-secondary{
        grid-column:span 1;
    }
    .col-rule{display:none}
    .section-divider{grid-column:1/-1}
}

@media(max-width:640px){
    .broadsheet{
        grid-template-columns:1fr;
    }
    .story-secondary{grid-column:1}
    .masthead-row{
        flex-direction:column;
        align-items:center;
        gap:0.5rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .story{opacity:1;transform:none;transition:none}
    .title-letter{opacity:1;animation:none}
    .title-dot{opacity:1;animation:none}
    .magpie-icon{opacity:1;animation:none}
    .ticker-track{animation:none}
    .col-rule{height:100%;transition:none}
}