/* ===================================================
   bada.news -- Warm Brutalist Chrome Scholarly Design
   ===================================================
   Palette:
   Chrome Primary    #C0C0C0  Brushed Silver
   Chrome Highlight  #E8E8E8  Polished Steel
   Chrome Shadow     #8A8A8A  Oxidized Steel
   Warm Surface      #F5F0E8  Parchment Cream
   Warm Accent       #D4A056  Amber Glow
   Dark Ground       #1E1C1A  Ink Black
   Text Primary      #3A3632  Warm Charcoal
   Text Muted        #6B6560  Patina Gray
   Data Accent       #B87333  Copper Flash
   Alert/Highlight   #C4786B  Chrome Rose
   Divider Mid       #A8A8A8  Mid Chrome
   Divider Light     #D4D4D4  Light Chrome
   Headline          #2B2B2B  Near-black warm
   =================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: #1E1C1A;
}

body {
    background-color: #F5F0E8;
    color: #3A3632;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Press-Run Intro Overlay --- */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1E1C1A;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
}

#intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#intro-overlay.hidden {
    display: none;
}

#intro-rule {
    width: 60%;
    max-width: 500px;
    height: 2px;
    opacity: 0;
}

#intro-rule.animate {
    animation: drawRule 1.8s ease forwards;
}

@keyframes drawRule {
    0% { opacity: 1; width: 0%; }
    100% { opacity: 1; width: 60%; }
}

#intro-rule line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

#intro-rule.animate line {
    animation: drawLine 1.8s ease forwards;
}

@keyframes drawLine {
    0% { stroke-dashoffset: 800; }
    100% { stroke-dashoffset: 0; }
}

#intro-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #F5F0E8;
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(-60px);
    margin-top: 16px;
}

#intro-title.animate {
    animation: stampDown 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes stampDown {
    0% { opacity: 1; transform: translateY(-60px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Running Header --- */
#running-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(245, 240, 232, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(192, 192, 192, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#running-header.visible {
    opacity: 1;
}

.header-domain {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.65rem;
    color: #C0C0C0;
    letter-spacing: 0.15em;
}

.header-sep {
    color: #C0C0C0;
    font-size: 0.65rem;
}

.header-section {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.65rem;
    color: #8A8A8A;
    letter-spacing: 0.15em;
    transition: opacity 0.2s ease;
}

/* --- Chrome Rail (left spine) --- */
#chrome-rail {
    position: fixed;
    top: 0;
    left: calc(50% - 340px - 60px - 32px);
    width: 4px;
    height: 100%;
    z-index: 50;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#chrome-rail.visible {
    opacity: 1;
    transform: translateX(0);
}

.rail-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #C0C0C0;
}

.rail-glyph {
    position: absolute;
    left: -6px;
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rail-glyph.visible {
    opacity: 1;
    transform: scale(1);
}

/* Position rail glyphs at section intervals */
.rail-glyph[data-section="0"] { top: 15%; }
.rail-glyph[data-section="1"] { top: 30%; }
.rail-glyph[data-section="2"] { top: 50%; }
.rail-glyph[data-section="3"] { top: 70%; }
.rail-glyph[data-section="4"] { top: 88%; }

/* --- Index Marks (right edge) --- */
#index-marks {
    position: fixed;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20vh 0;
}

.index-tick {
    width: 2px;
    height: 24px;
    background-color: #C0C0C0;
    margin-left: auto;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.index-tick.active {
    background-color: #E8E8E8;
    width: 4px;
}

/* --- Compass Navigation --- */
#compass-toggle {
    position: sticky;
    top: 24px;
    float: right;
    margin-right: 24px;
    z-index: 200;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.34, -0.35, 0.265, 1.25);
}

#compass-toggle.visible {
    opacity: 1;
}

#compass-toggle:hover {
    transform: scale(1.15);
}

/* --- TOC Overlay --- */
#toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: rgba(192, 192, 192, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#toc-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

#toc-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#toc-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.toc-link {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.6rem, 4vw, 3rem);
    color: #2B2B2B;
    text-decoration: none;
    letter-spacing: 0.04em;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, -0.35, 0.265, 1.25);
}

.toc-link:hover {
    opacity: 1;
    transform: translateX(12px);
    color: #D4A056;
}

/* --- Main Content Column --- */
#content-column {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    /* Offset 60px to the left of true center (book text-block) */
    transform: translateX(-30px);
}

/* --- Reading Zones (Sections) --- */
.reading-zone {
    min-height: 100vh;
    padding: 80px 0;
    position: relative;
}

/* Dark zone variant (Colophon) */
.dark-zone {
    background-color: #1E1C1A;
    /* Extend full viewport width */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 48px);
    padding-right: calc(50vw - 50% + 48px);
}

/* --- Folio Numbers --- */
.folio-number {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.8rem;
    color: #C0C0C0;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}

.folio-light {
    color: #8A8A8A;
}

/* --- Headlines --- */
.section-headline {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #2B2B2B;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.section-headline.in-view {
    opacity: 1;
    transform: translateY(0);
}

.headline-light {
    color: #F5F0E8;
}

/* --- Dense Blocks (Body Text) --- */
.dense-block {
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

.dense-block.in-view {
    opacity: 1;
}

.dense-block p {
    margin-bottom: 1.2em;
    color: #3A3632;
}

.first-para {
    text-indent: 0;
}

.dense-block p + p {
    text-indent: 1.5em;
}

.dense-block .pull-quote + p,
.dense-block .inline-sparkline-block + p {
    text-indent: 0;
}

.text-light {
    color: #F5F0E8 !important;
}

/* --- Breathing Blocks --- */
.breathing-block {
    margin: 80px 0;
}

/* --- Hero Data Visualizations --- */
.hero-viz {
    position: relative;
}

.data-viz-hero {
    width: 100%;
    height: auto;
    max-height: 320px;
}

.viz-caption {
    display: block;
    margin-top: 12px;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #8C8C8C;
    line-height: 1.5;
}

.viz-caption-light {
    color: #6B6560;
}

.viz-annotation {
    font-family: 'IBM Plex Mono', monospace;
}

/* Data series animation setup */
.data-series {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.data-series.drawn {
    opacity: 1;
}

/* For polylines with stroke-dasharray animation */
polyline.data-series {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

polyline.data-series.drawn {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

/* For path data series */
path.data-series {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

path.data-series.drawn {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

/* Bar chart animations */
.data-bar {
    opacity: 0;
    transform-origin: bottom;
    transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.data-bar.drawn {
    opacity: 1;
}

/* Scatter dots */
.scatter-dot {
    opacity: 0;
    transition: opacity 0.4s ease, r 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.scatter-dot.drawn {
    opacity: 1;
}

/* Donut segments */
.donut-segment {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.donut-segment.drawn {
    opacity: 1;
}

/* Trend line */
.trend-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.trend-line.drawn {
    stroke-dashoffset: 0;
}

/* Data points */
.data-point {
    opacity: 0;
    transition: opacity 0.4s ease 0.6s;
}

.data-point.drawn {
    opacity: 1;
}

/* --- Inline Sparklines --- */
.inline-sparkline-block p {
    display: inline;
}

.sparkline {
    display: inline-block;
    width: 120px;
    height: 24px;
    vertical-align: baseline;
    margin: 0 4px;
    position: relative;
    top: 4px;
}

.sparkline:hover {
    animation: sparkPulse 3s ease-in-out infinite;
}

@keyframes sparkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* --- Pull Quotes --- */
.pull-quote {
    border-left: 4px solid #D4A056;
    padding-left: 24px;
    margin: 48px 0;
}

.pull-quote p {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 300;
    font-style: italic;
    color: #6B6560;
    line-height: 1.55;
    text-indent: 0 !important;
}

/* --- Chrome Dividers --- */
.chrome-divider {
    position: relative;
    margin: 60px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.divider-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(168, 168, 168, 0.3),
        #A8A8A8 30%,
        #A8A8A8 70%,
        rgba(168, 168, 168, 0.3)
    );
}

.divider-line-light {
    background: linear-gradient(
        to right,
        rgba(138, 138, 138, 0.2),
        rgba(138, 138, 138, 0.6) 30%,
        rgba(138, 138, 138, 0.6) 70%,
        rgba(138, 138, 138, 0.2)
    );
}

.colophon-mark {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    background-color: #F5F0E8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.dark-zone .colophon-mark,
.chrome-divider-light .colophon-mark {
    background-color: #1E1C1A;
}

/* --- Footnotes --- */
.footnote-ref {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7em;
    color: #D4A056;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.footnote-ref:hover {
    color: #B87333;
}

.footnote-ref:active {
    color: #C4786B;
}

#footnote-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 300;
}

.footnote-card {
    position: absolute;
    width: 260px;
    background-color: #F5F0E8;
    border-left: 4px solid #D4D4D4;
    padding: 16px;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    box-shadow: 4px 4px 20px rgba(30, 28, 26, 0.1);
}

.footnote-card.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.footnote-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: #D4A056;
    display: block;
    margin-bottom: 6px;
}

.footnote-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #3A3632;
}

/* --- Footer --- */
.site-footer {
    text-align: center;
    padding: 80px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-domain {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.4rem;
    color: #8A8A8A;
    letter-spacing: 0.1em;
}

.footer-year {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: #6B6560;
    letter-spacing: 0.1em;
}

/* --- Selection color --- */
::selection {
    background-color: rgba(212, 160, 86, 0.3);
    color: #2B2B2B;
}

/* --- Scrollbar styling (webkit) --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #F5F0E8;
}

::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8A8A8A;
}

/* --- Responsive: Tablet --- */
@media (max-width: 900px) {
    #chrome-rail {
        left: 8px;
    }

    #content-column {
        transform: translateX(0);
        padding: 0 24px;
    }

    .dark-zone {
        padding-left: calc(50vw - 50% + 24px);
        padding-right: calc(50vw - 50% + 24px);
    }

    .footnote-card {
        width: 220px;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 600px) {
    #chrome-rail {
        display: none;
    }

    #index-marks {
        display: none;
    }

    #content-column {
        padding: 0 20px;
    }

    .reading-zone {
        min-height: auto;
        padding: 60px 0;
    }

    .breathing-block {
        margin: 48px 0;
    }

    .pull-quote {
        margin: 32px 0;
    }

    .dark-zone {
        padding-left: calc(50vw - 50% + 20px);
        padding-right: calc(50vw - 50% + 20px);
    }

    .section-headline {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .footnote-card {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .hero-viz .data-viz-hero {
        max-height: 200px;
    }

    .breathing-block {
        margin: 32px 0;
    }

    .viz-caption {
        font-size: 0.7rem;
    }

    #compass-toggle {
        margin-right: 12px;
    }
}