/* ========== CUSTOM PROPERTIES ========== */
:root {
    --aged-newsprint: #F5EDE0;
    --warm-vellum: #EDE3D2;
    --roasted-umber: #3D2B1F;
    --dark-espresso: #2C1E12;
    --oxidized-copper: #C4956A;
    --dark-goldenrod: #8B6914;
    --weathered-bronze: #7A6B5A;
    --candlelit-cream: #F0E6D6;
    --burnt-terracotta: #B85C3A;

    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

/* ========== BODY WITH SCANLINE TEXTURE ========== */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    background-color: var(--aged-newsprint);
    color: var(--dark-espresso);
    overflow-x: hidden;
    position: relative;
}

/* Persistent scanline overlay on body - 1px lines at 3px intervals, 2% opacity */
.scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background: repeating-linear-gradient(
        to bottom,
        rgba(44, 30, 18, 0.02) 0px,
        rgba(44, 30, 18, 0.02) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* ========== CURSOR WARM GLOW ========== */
.cursor-glow {
    position: fixed;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 149, 106, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 90;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cursor-glow.active {
    opacity: 1;
}

/* ========== STICKY HEADER ========== */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: var(--roasted-umber);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 200;
    border-bottom: 1px solid var(--dark-goldenrod);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.sticky-header.visible {
    transform: translateY(0);
}

.sticky-header-name {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--candlelit-cream);
    letter-spacing: -0.02em;
    text-transform: lowercase;
}

.sticky-header-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--oxidized-copper);
    letter-spacing: 0.04em;
}

.sticky-diamond {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--dark-goldenrod);
    transform: rotate(45deg);
}

.sticky-date-value {
    color: var(--weathered-bronze);
}

/* ========== NEWS TAPE CONTAINER ========== */
.news-tape {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

/* ========== MASTHEAD ========== */
.masthead {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--roasted-umber);
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

.masthead-content {
    text-align: center;
    position: relative;
    z-index: 3;
}

.masthead-title {
    font-family: var(--font-headline);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    color: var(--candlelit-cream);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.masthead-diamond-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem 0;
}

.masthead-diamond-sep .diamond {
    width: 8px;
    height: 8px;
    background-color: var(--oxidized-copper);
}

.masthead-sub {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 400;
    color: var(--oxidized-copper);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Dot grid pattern on masthead */
.dot-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(196, 149, 106, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* CRT scanline animation on masthead */
.masthead-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(
        to bottom,
        rgba(196, 149, 106, 0.03) 0px,
        rgba(196, 149, 106, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: mastheadScanScroll 3s linear infinite;
}

@keyframes mastheadScanScroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 3px; }
}

/* Scroll chevron at bottom of masthead */
.scroll-chevron {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: chevronPulse 2s ease-in-out infinite;
}

.chevron-line {
    display: block;
    width: 16px;
    height: 16px;
    border-right: 1.5px solid var(--oxidized-copper);
    border-bottom: 1.5px solid var(--oxidized-copper);
    transform: rotate(45deg);
    opacity: 0.5;
}

.chevron-line:last-child {
    margin-top: -10px;
    opacity: 0.3;
}

@keyframes chevronPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========== DIAMOND (shared) ========== */
.diamond {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--dark-goldenrod);
    transform: rotate(45deg);
}

/* ========== GEOMETRIC DIVIDER ========== */
.geometric-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.geometric-divider.revealed {
    opacity: 1;
}

.divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--dark-goldenrod);
    opacity: 0.4;
}

.geometric-divider .diamond {
    width: 6px;
    height: 6px;
    background-color: var(--dark-goldenrod);
    flex-shrink: 0;
}

/* ========== NEWS BANDS ========== */
.news-band {
    padding: 2.5rem 2rem;
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding 0.3s ease,
                background-color 0.3s ease;
}

.news-band.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating backgrounds */
.news-band--light {
    background-color: var(--aged-newsprint);
}

.news-band--warm {
    background-color: var(--warm-vellum);
}

/* Featured band */
.news-band--featured {
    border: 1px solid var(--oxidized-copper);
    position: relative;
}

/* Concentric rectangle for featured */
.concentric-border {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(139, 105, 20, 0.4);
    pointer-events: none;
    opacity: 1;
}

/* Story Focus Mode - hover expansion */
.news-band:hover {
    padding-top: calc(2.5rem + 4px);
    padding-bottom: calc(2.5rem + 4px);
    padding-left: calc(2rem + 4px);
    padding-right: calc(2rem + 4px);
}

.news-band--light:hover {
    background-image: linear-gradient(to bottom, rgba(196, 149, 106, 0.03), rgba(196, 149, 106, 0.03));
}

.news-band--warm:hover {
    background-image: linear-gradient(to bottom, rgba(196, 149, 106, 0.03), rgba(196, 149, 106, 0.03));
}

/* Concentric border fade-in on hover for non-featured bands */
.news-band:not(.news-band--featured)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--oxidized-copper);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.news-band:not(.news-band--featured)::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(139, 105, 20, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.news-band:not(.news-band--featured):hover::before,
.news-band:not(.news-band--featured):hover::after {
    opacity: 1;
}

/* ========== BAND META ========== */
.band-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* Corner brackets around category labels */
.corner-bracket-wrap {
    position: relative;
    display: inline-block;
    padding: 3px 12px;
}

.corner-bracket-wrap::before,
.corner-bracket-wrap::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: var(--dark-goldenrod);
    border-style: solid;
}

.corner-bracket-wrap::before {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px;
}

.corner-bracket-wrap::after {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0;
}

.meta-tag {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dark-goldenrod);
}

.meta-timestamp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--weathered-bronze);
}

.ts-diamond {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--dark-goldenrod);
    transform: rotate(45deg);
}

/* "New"/"Breaking" badge */
.news-band--featured .meta-tag {
    color: var(--burnt-terracotta);
}

/* ========== BAND HEADLINE ========== */
.band-headline {
    font-family: var(--font-headline);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 500;
    color: var(--dark-espresso);
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.band-headline--primary {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
}

/* ========== BAND EXCERPT ========== */
.band-excerpt {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    font-weight: 400;
    color: var(--dark-espresso);
    line-height: 1.72;
    letter-spacing: 0.005em;
    margin-bottom: 1.2em;
}

/* ========== BAND FOOTER ========== */
.band-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.band-source {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--weathered-bronze);
}

.band-diamonds {
    display: flex;
    gap: 6px;
}

.band-diamonds .diamond {
    width: 4px;
    height: 4px;
    background-color: var(--dark-goldenrod);
    opacity: 0.4;
}

/* ========== LOADING DIAMONDS ========== */
.loading-diamonds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3rem 0;
}

.loading-diamond {
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--dark-goldenrod);
    transform: rotate(45deg);
    animation: loadingPulse 1.2s ease-in-out infinite;
}

.loading-diamond:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-diamond:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ========== FOOTER / TAPE END ========== */
.tape-end {
    background-color: var(--roasted-umber);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tape-end-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.footer-line {
    width: 100%;
    height: 1px;
    background-color: var(--weathered-bronze);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.tape-end-copy {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--candlelit-cream);
    opacity: 0.6;
}

.tape-end-updated {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--weathered-bronze);
    opacity: 0.5;
}

.tape-end-transmission {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--weathered-bronze);
    opacity: 0.4;
}

/* ========== MOBILE VIGNETTE (replaces cursor glow) ========== */
@media (max-width: 768px) {
    .cursor-glow {
        display: none;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center, transparent 50%, rgba(61, 43, 31, 0.08) 100%);
        pointer-events: none;
        z-index: 90;
    }

    .news-tape {
        max-width: 100%;
        padding: 0 16px;
    }

    .news-band {
        padding: 2rem 1.25rem;
    }

    .news-band:hover {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .geometric-divider {
        padding: 0 1.25rem;
    }

    .sticky-header {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .news-band {
        padding: 1.5rem 1rem;
    }

    .news-band:hover {
        padding: 1.5rem 1rem;
    }

    .band-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .geometric-divider {
        padding: 0 1rem;
    }
}