/* ==========================================================================
   historical.day - Broadsheet Archive
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #F4EDE2;
    color: #4A3F36;
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* --- Foxing Stain Overlay (Fixed Background) --- */
#foxing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 120px 100px at 15% 8%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 80px 90px at 18% 10%, rgba(107, 91, 79, 0.035) 0%, transparent 60%),
        radial-gradient(ellipse 60px 70px at 12% 12%, rgba(196, 164, 104, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse 140px 110px at 72% 5%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 90px 80px at 75% 7%, rgba(107, 91, 79, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse 100px 130px at 45% 25%, rgba(196, 164, 104, 0.035) 0%, transparent 65%),
        radial-gradient(ellipse 70px 60px at 48% 27%, rgba(107, 91, 79, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 180px 150px at 85% 35%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50px 60px at 88% 33%, rgba(107, 91, 79, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 110px 90px at 25% 45%, rgba(196, 164, 104, 0.035) 0%, transparent 65%),
        radial-gradient(ellipse 60px 80px at 28% 48%, rgba(107, 91, 79, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 90px 100px at 60% 55%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 130px 110px at 10% 65%, rgba(196, 164, 104, 0.045) 0%, transparent 65%),
        radial-gradient(ellipse 70px 80px at 14% 68%, rgba(107, 91, 79, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 160px 120px at 50% 75%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 80px 70px at 53% 77%, rgba(107, 91, 79, 0.035) 0%, transparent 60%),
        radial-gradient(ellipse 100px 90px at 80% 85%, rgba(196, 164, 104, 0.045) 0%, transparent 65%),
        radial-gradient(ellipse 50px 40px at 83% 83%, rgba(107, 91, 79, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 120px 100px at 30% 90%, rgba(196, 164, 104, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 70px 60px at 33% 92%, rgba(107, 91, 79, 0.035) 0%, transparent 60%);
    transition: opacity 0.8s ease;
}

#foxing-overlay.intensified {
    background:
        radial-gradient(ellipse 120px 100px at 15% 8%, rgba(196, 164, 104, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 80px 90px at 18% 10%, rgba(107, 91, 79, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60px 70px at 12% 12%, rgba(196, 164, 104, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 140px 110px at 72% 5%, rgba(196, 164, 104, 0.065) 0%, transparent 70%),
        radial-gradient(ellipse 90px 80px at 75% 7%, rgba(107, 91, 79, 0.055) 0%, transparent 60%),
        radial-gradient(ellipse 100px 130px at 45% 25%, rgba(196, 164, 104, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 70px 60px at 48% 27%, rgba(107, 91, 79, 0.065) 0%, transparent 55%),
        radial-gradient(ellipse 180px 150px at 85% 35%, rgba(196, 164, 104, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50px 60px at 88% 33%, rgba(107, 91, 79, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 110px 90px at 25% 45%, rgba(196, 164, 104, 0.065) 0%, transparent 65%),
        radial-gradient(ellipse 60px 80px at 28% 48%, rgba(107, 91, 79, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 90px 100px at 60% 55%, rgba(196, 164, 104, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 130px 110px at 10% 65%, rgba(196, 164, 104, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 70px 80px at 14% 68%, rgba(107, 91, 79, 0.065) 0%, transparent 55%),
        radial-gradient(ellipse 160px 120px at 50% 75%, rgba(196, 164, 104, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 80px 70px at 53% 77%, rgba(107, 91, 79, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 100px 90px at 80% 85%, rgba(196, 164, 104, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 50px 40px at 83% 83%, rgba(107, 91, 79, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 120px 100px at 30% 90%, rgba(196, 164, 104, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 70px 60px at 33% 92%, rgba(107, 91, 79, 0.06) 0%, transparent 60%);
}

/* --- Fold Lines --- */
.fold-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, transparent, #B8ADA2 49%, #D4C9BC 50%, transparent);
    opacity: 0.3;
}

.fold-line-1 {
    top: 50vh;
}

.fold-line-2 {
    top: 75vh;
}

/* --- Watermark --- */
#watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20vw;
    font-weight: 900;
    color: #EDE6DA;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    user-select: none;
}

/* --- Masthead --- */
#masthead {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem) 0;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

#masthead.revealed {
    opacity: 1;
}

.masthead-inner {
    text-align: center;
}

.masthead-rule {
    border-top: 3px double #3A2E26;
    margin-bottom: 1.5rem;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s ease-out;
}

#masthead.revealed .masthead-rule {
    clip-path: inset(0 0% 0 0);
}

.masthead-rule-bottom {
    border-top: 1px solid #6B5B4F;
    margin-top: 1.5rem;
}

.masthead-content {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.4s ease-out 0.6s;
}

#masthead.revealed .masthead-content {
    opacity: 1;
}

.masthead-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    font-variant: small-caps;
    color: #3A2E26;
    line-height: 1.1;
}

.masthead-dateline,
.masthead-edition {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7A6B5E;
    white-space: nowrap;
}

/* --- Broadsheet (Above the Fold) --- */
#broadsheet {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem clamp(1.5rem, 4vw, 4rem);
}

.broadsheet-container {
    column-count: 3;
    column-gap: 2.4rem;
    column-rule: 1px solid #6B5B4F;
    transition: column-rule-color 0.8s ease;
}

.broadsheet-container.rules-fading {
    column-rule-color: transparent;
}

/* Lead Story */
.lead-story {
    column-span: all;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #B8ADA2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

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

.lead-dateline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.manicule {
    flex-shrink: 0;
}

.dateline-text {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7A6B5E;
}

.lead-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: #3A2E26;
    margin-bottom: 1.25rem;
    max-width: 65ch;
}

.lead-body {
    font-family: 'Lora', Georgia, serif;
    color: #4A3F36;
    margin-bottom: 1rem;
    text-align: justify;
    hyphens: auto;
}

.lead-body:last-child {
    margin-bottom: 0;
}

/* Sidebar Briefs */
.sidebar-briefs {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out 0.12s, transform 0.4s ease-out 0.12s;
}

.sidebar-briefs.revealed {
    opacity: 1;
    transform: translateY(0);
}

.brief {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #D4C9BC;
}

.brief:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.brief-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 700;
    color: #3A2E26;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.brief-text {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    color: #4A3F36;
    line-height: 1.65;
}

/* Pull Quote */
.pull-quote {
    break-inside: avoid;
    padding: 1.5rem 0;
    margin: 0.5rem 0 1.5rem;
    border-top: 2px solid #8B3A2E;
    border-bottom: 1px solid #B8ADA2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out 0.24s, transform 0.4s ease-out 0.24s;
}

.pull-quote.revealed {
    opacity: 1;
    transform: translateY(0);
}

.pull-quote p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.45;
    color: #8B3A2E;
    text-align: center;
}

/* --- Deep Archive (Below the Fold) --- */
#deep-archive {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: 3rem auto 0;
    padding: 2rem clamp(1.5rem, 4vw, 4rem) 4rem;
}

/* Section Dividers */
.section-divider {
    text-align: center;
    padding: 2rem 0;
}

.fleuron {
    opacity: 0.7;
}

/* Clippings */
.clipping {
    position: relative;
    background: #F4EDE2;
    padding: 2rem 2.5rem;
    margin-bottom: 1rem;
    margin-top: -1.5rem;
    box-shadow: 2px 3px 8px rgba(58, 46, 38, 0.12);
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.5s ease-out;
}

.clipping.revealed {
    clip-path: inset(0% 0 0 0);
}

.clipping-1 {
    transform: rotate(-0.3deg);
}

.clipping-2 {
    transform: rotate(0.4deg);
}

.clipping-3 {
    transform: rotate(-0.2deg);
}

.clipping-4 {
    transform: rotate(0.6deg);
}

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

/* Clipping foxing stains (unique per clipping) */
.clipping-1::before,
.clipping-2::before,
.clipping-3::before,
.clipping-4::before,
.clipping-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.clipping-1::before {
    background:
        radial-gradient(ellipse 50px 40px at 20% 30%, rgba(196, 164, 104, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 30px 35px at 80% 60%, rgba(107, 91, 79, 0.05) 0%, transparent 65%);
}

.clipping-2::before {
    background:
        radial-gradient(ellipse 45px 50px at 70% 25%, rgba(196, 164, 104, 0.055) 0%, transparent 70%),
        radial-gradient(ellipse 35px 30px at 30% 70%, rgba(107, 91, 79, 0.045) 0%, transparent 60%);
}

.clipping-3::before {
    background:
        radial-gradient(ellipse 60px 45px at 50% 40%, rgba(196, 164, 104, 0.065) 0%, transparent 70%),
        radial-gradient(ellipse 40px 35px at 15% 80%, rgba(107, 91, 79, 0.05) 0%, transparent 65%);
}

.clipping-4::before {
    background:
        radial-gradient(ellipse 55px 60px at 85% 35%, rgba(196, 164, 104, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 35px 40px at 40% 75%, rgba(107, 91, 79, 0.055) 0%, transparent 60%);
}

.clipping-5::before {
    background:
        radial-gradient(ellipse 40px 50px at 25% 50%, rgba(196, 164, 104, 0.055) 0%, transparent 65%),
        radial-gradient(ellipse 50px 45px at 75% 20%, rgba(107, 91, 79, 0.05) 0%, transparent 70%);
}

.clipping-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 700;
    color: #3A2E26;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.clipping-dateline {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(0.65rem, 0.75vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C4A468;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.clipping-body {
    font-family: 'Lora', Georgia, serif;
    color: #4A3F36;
    line-height: 1.72;
    text-align: justify;
    hyphens: auto;
    position: relative;
    z-index: 1;
}

/* Marginal Annotations */
.margin-note {
    position: absolute;
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    color: #B8ADA2;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
    white-space: nowrap;
}

.margin-note.revealed {
    opacity: 0.4;
}

.margin-note-1 {
    top: 1.5rem;
    right: -10rem;
    transform: rotate(-3deg);
}

.margin-note-2 {
    top: 2.5rem;
    right: -12rem;
    transform: rotate(-2deg);
}

.margin-note-3 {
    bottom: 2rem;
    right: -8rem;
    transform: rotate(-4deg);
}

.margin-note-4 {
    top: 1rem;
    left: -11rem;
    transform: rotate(-5deg);
}

.margin-note-5 {
    bottom: 1.5rem;
    left: -13rem;
    transform: rotate(-2.5deg);
}

/* --- Colophon --- */
#colophon {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem clamp(1.5rem, 4vw, 4rem) 3rem;
    background-color: #F4EDE2;
    transition: background-color 0.8s ease;
}

#colophon.darkened {
    background-color: #EDE6DA;
}

.colophon-rule {
    position: relative;
    border-top: 3px solid #3A2E26;
    margin-bottom: 0;
}

.colophon-rule::before {
    content: '';
    display: block;
    border-top: 1px solid #3A2E26;
    margin-top: 4px;
}

.colophon-ornament {
    text-align: center;
    padding: 1.5rem 0;
}

.aldus-leaf {
    opacity: 0.6;
}

.colophon-content {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

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

.colophon-text {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    color: #4A3F36;
    line-height: 1.72;
    margin-bottom: 1.25rem;
}

.colophon-text:last-of-type {
    margin-bottom: 2rem;
}

.colophon-closing {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #B8ADA2;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.4s ease-out 0.4s;
}

.colophon-closing.revealed {
    opacity: 1;
}

/* --- Responsive: Tablet (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .broadsheet-container {
        column-count: 2;
    }

    .margin-note {
        display: none;
    }

    .clipping-1 { transform: rotate(-0.15deg); }
    .clipping-2 { transform: rotate(0.2deg); }
    .clipping-3 { transform: rotate(-0.1deg); }
    .clipping-4 { transform: rotate(0.3deg); }
    .clipping-5 { transform: rotate(-0.25deg); }
}

/* --- Responsive: Mobile (< 768px) --- */
@media (max-width: 767px) {
    .broadsheet-container {
        column-count: 1;
    }

    .masthead-content {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .masthead-dateline {
        order: -1;
    }

    .fold-line {
        display: none;
    }

    #foxing-overlay {
        opacity: 0.6;
    }

    .margin-note {
        display: none;
    }

    .clipping {
        margin-top: 1rem;
        padding: 1.5rem;
        transform: rotate(0) !important;
    }

    .lead-headline {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .pull-quote p {
        font-size: clamp(1.05rem, 4vw, 1.3rem);
    }

    #watermark {
        font-size: 30vw;
    }
}