/* ==========================================================================
   Long-form essay styles
   Shared by /burundi/ and the cycling essays. Requires /styles.css.

   These four files used to be byte-identical copies, 414 lines each, and had
   already drifted from burundi's: cycling hero titles were still Cormorant 300
   where burundi had moved to the brand face. One file, one definition.

   Page-specific additions (fundraising blocks, back links) live alongside in
   the section's own stylesheet. Nothing here restyles a shared component from
   styles.css.
   ========================================================================== */
/* ==========================================================================
   The Bright Stream — Article Styles
   Long-form editorial layout for cycling travelogues
   Requires /styles.css as base
   ========================================================================== */

/* Article-specific layout tokens. --col-text lives in styles.css; the wider
   image measure is particular to the essays. */
:root {
    --col-image: 920px;
}

/* Article typography baseline */
html {
}

body {
    line-height: 1.78;
    min-height: 100vh;
}

/* Subtle paper texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* ── Hero ── */
.hero {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 6rem 2rem 0;
}

.hero-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
}

.hero-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    filter: contrast(1.02) brightness(1.01);
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem 3rem 2.5rem;
    /* Tuned over the Burundi photograph, which is dark, and far too weak over
       the pale pencil sketches the cycling essays use — the title on
       /cycling/the-altitude-account/ measured 1.92:1 against cream, where
       large text needs 3. The old ramp only reached 0.75 at the very bottom
       edge and had faded to almost nothing by the height the H1 actually sits
       at, so the scrim was strongest where there was no text.
       Now it is substantial across the whole overlay and fades only above it. */
    background: linear-gradient(
        to top,
        rgba(42, 35, 24, 0.92) 0%,
        rgba(42, 35, 24, 0.82) 55%,
        rgba(42, 35, 24, 0.45) 85%,
        transparent 100%
    );
}

.hero-title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    color: var(--color-band-text);
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin-bottom: 0.25em;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    color: var(--color-band-text);
    opacity: 0.92;
    letter-spacing: 0.04em;
}

/* ── Route stats bar ── */
.route-stats {
    max-width: var(--col-text);
    margin: 3rem auto 0;
    padding: 1.4rem 0;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
}

.route-meta {
    max-width: var(--col-text);
    margin: 1.6rem auto 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-stone);
    letter-spacing: 0.05em;
}

/* ── Article body ── */
.article {
    max-width: var(--col-text);
    margin: 0 auto;
    padding: 0 1.5rem;
    overflow: visible;
}

/* ── Section dividers ── */
.section-divider {
    max-width: var(--col-text);
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
    position: relative;
    clear: both;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: var(--color-rule);
}

.section-divider span {
    position: relative;
    display: inline-block;
    background: var(--color-cream);
    padding: 0 1.2rem;
    color: var(--color-rule);
    font-size: 0.9rem;
    line-height: 1;
}

/* ── Section headings ── */
.section-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--color-ink);
    letter-spacing: 0.005em;
    line-height: 1.25;
    margin-bottom: 2rem;
    margin-top: 3.5rem;
}

.section-heading .section-num {
    font-weight: 300;
    color: var(--color-stone);
    font-size: 0.85em;
    margin-right: 0.15em;
}

/* ── Prose paragraphs ── */
.article p {
    margin-bottom: 1.4em;
    font-size: 1rem;
    hanging-punctuation: first;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.article p:last-child {
    margin-bottom: 0;
}

/* ── Drop cap ── */
.drop-cap::first-letter {
    font-family: var(--font-display);
    font-weight: 500;
    float: left;
    font-size: 3.8em;
    line-height: 0.78;
    padding-right: 0.08em;
    margin-top: 0.05em;
    color: var(--color-ink);
}

/* ── Emphasis ── */
.article em {
    font-style: italic;
    font-weight: 400;
}

/* ── Illustration breaks ── */
.illustration {
    max-width: var(--col-text);
    margin: 2.5rem auto 3rem;
    padding: 0 1.5rem;
    clear: both;
}

.illustration figure {
    position: relative;
    margin: 0;
}

.illustration img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    filter: contrast(1.02) brightness(1.01);
}

.illustration figcaption {
    font-family: 'Cormorant', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-stone);
    text-align: center;
    margin-top: 0.8rem;
    letter-spacing: 0.01em;
}

/* ── Offset illustrations (desktop) ── */
@media (min-width: 1000px) {
    .illustration-offset {
        max-width: 420px;
        margin: 0.5rem 0 1.5rem;
        padding: 0;
        clear: none;
    }

    .illustration-right {
        float: right;
        margin-left: 2.5rem;
        margin-right: -8vw;
    }

    .illustration-left {
        float: left;
        margin-right: 2.5rem;
        margin-left: -8vw;
    }

    .illustration-offset figcaption {
        text-align: left;
    }

    .illustration-left figcaption {
        text-align: right;
    }
}

/* ── Full-width illustration ── */
.illustration-full {
    max-width: var(--col-image);
    clear: both;
}

/* ── Clear floats ── */
/* ── Weather ── */
.weather {
    max-width: var(--col-text);
    margin: 2.5rem auto 0;
    padding: 1.5rem;
}

.weather-note {
    font-family: 'Cormorant', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.92rem;
    color: var(--color-stone);
    text-align: center;
    line-height: 1.6;
}

.weather-note .weather-em {
    color: var(--color-ink-muted);
    font-weight: 400;
}

/* ── Pull quote ── */
.pull-quote {
    max-width: var(--col-text);
    margin: 3rem auto;
    padding: 2rem 0;
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
    text-align: center;
}

.pull-quote p {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    color: var(--color-ink-muted);
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
    hanging-punctuation: first last;
}

/* ── Standalone line ── */
/* ── Final stats ── */
/* ── Colophon ── */
.colophon {
    max-width: var(--col-text);
    margin: 5rem auto 0;
    padding: 2rem 1.5rem 4rem;
    border-top: 1px solid var(--color-rule);
    text-align: center;
}

.colophon p {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-stone);
    letter-spacing: 0.03em;
    line-height: 1.8;
}

.colophon .route-line {
    font-family: 'Cormorant', serif;
    font-style: italic;
    font-size: 0.88rem;
    color: var(--color-ink-muted);
    margin-bottom: 0.6rem;
}

/* ── Back link ── */
/* ── Fade-in on scroll ── */
.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 768px) {

    .hero { padding: 1rem 1rem 0; }
    .hero-overlay { padding: 3rem 1.5rem 1.5rem; }

    .route-stats { gap: 1.5rem; padding: 1.2rem 0; }
        .article { padding: 0 1.25rem; }
    .illustration { padding: 0 1rem; }
    .section-heading { margin-top: 2.5rem; }
    .drop-cap::first-letter { font-size: 3.2em; }
    .section-divider { margin: 3rem auto; }
}

@media (max-width: 480px) {

    .hero { padding: 0.5rem 0.5rem 0; }
    .hero-overlay { padding: 2.5rem 1.2rem 1.2rem; }

    .route-stats { gap: 1rem; }
            .article { padding: 0 1rem; }
    .illustration { padding: 0 0.5rem; }
    .weather-note { font-size: 0.85rem; }
}