.content {
    z-index: var(--z-content);
    pointer-events: none;
    position: fixed;
    inset: 0
}

.content:focus {
    outline: none
}

.chapter {
    padding: calc(var(--hud-safe) * 3) var(--space-edge) calc(var(--hud-safe) * 3);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out-expo);
    display: grid;
    position: absolute;
    inset: 0
}

@media (max-width:767px) {
    .chapter {
        padding-bottom: calc(var(--hud-safe) * 4.5 + env(safe-area-inset-bottom))
    }
}

.chapter.is-active {
    opacity: 1
}

html.is-fallback .content {
    pointer-events: auto;
    position: static
}

html.is-fallback .chapter {
    opacity: 1;
    min-height: auto;
    transition: none;
    position: relative;
    inset: auto
}

html.is-fallback .gl,
html.is-fallback .scroll-track,
html.is-fallback .hud__scale,
html.is-fallback .hud__hint {
    display: none
}

.chapter[data-empty=true] .chapter__headline {
    font-family: var(--font-mono);
    font-size: var(--fs-caption-lg);
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: var(--track-caption)
}

.chapter[data-align=left] {
    text-align: left;
    align-content: center;
    justify-items: start
}

.chapter[data-align=right] {
    text-align: right;
    align-content: center;
    justify-items: end
}

.chapter[data-align=center] {
    text-align: center;
    align-content: center;
    justify-items: center
}

.chapter[data-align=bottom] {
    text-align: center;
    align-content: end;
    justify-items: center
}

.chapter__text {
    pointer-events: none;
    perspective: 1200px;
    grid-template-areas: "heading""figure""body""caption";
    gap: 1em 4vw;
    max-width: min(100%, 44rem);
    display: grid;
    position: relative
}

.chapter__heading {
    gap: var(--space-kicker);
    grid-area: heading;
    display: grid
}

.chapter__figure {
    grid-area: figure
}

.chapter__caption {
    grid-area: caption
}

@media (min-width:900px) {
    .chapter[data-align=left] .chapter__text,
    .chapter[data-align=right] .chapter__text {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        grid-template-areas: "heading body""figure figure""caption caption";
        align-items: end;
        max-width: min(100%, 68rem)
    }
    .chapter[data-align=right] .chapter__text {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        grid-template-areas: "body heading""figure figure""caption caption"
    }
    .chapter[data-align=left] .chapter__body,
    .chapter[data-align=right] .chapter__body {
        align-self: end;
        padding-bottom: .35em
    }
}

.chapter[data-figure=false] .chapter__text {
    grid-template-areas: "heading""body""caption"
}

@media (min-width:900px) {
    .chapter[data-align=left][data-figure=false] .chapter__text {
        grid-template-areas: "heading body""caption caption"
    }
    .chapter[data-align=right][data-figure=false] .chapter__text {
        grid-template-areas: "body heading""caption caption"
    }
}

.chapter__text:before {
    content: "";
    z-index: -1;
    filter: blur(18px);
    pointer-events: none;
    background: radial-gradient(closest-side, #050507c7, #0000);
    position: absolute;
    inset: -18% -12%
}

.chapter__text a {
    pointer-events: auto
}

.chapter__kicker,
.chapter__caption {
    font-family: var(--font-mono);
    font-size: var(--fs-caption-lg);
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: var(--track-caption);
    font-weight: 400
}

.chapter__headline {
    --wght: 500;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-variation-settings: "wght" var(--wght);
    transform-style: preserve-3d;
    font-weight: 500;
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    text-wrap: balance;
    max-width: min(100%, 26ch)
}

.chapter__headline--hero {
    --wght: 700;
    font-size: var(--fs-hero);
    letter-spacing: var(--track-hero);
    max-width: none;
    margin-bottom: .2em;
    font-weight: 700;
    line-height: .9
}

.chapter__line {
    display: block
}

.chapter__line-mask {
    margin: -.2em -.06em -.3em;
    padding: .2em .06em .3em
}

.chapter__figure {
    font-family: var(--font-mono);
    font-size: var(--fs-figure);
    color: var(--ice);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1
}

.chapter__body {
    max-width: var(--measure);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ice);
    grid-area: body
}

.chapter[data-align=center] .chapter__body,
.chapter[data-align=bottom] .chapter__body {
    max-width: 56ch;
    margin-inline: auto
}

.chapter[data-align=center] .chapter__figure,
.chapter[data-align=bottom] .chapter__figure {
    font-size: var(--fs-figure)
}

.chapter[data-align=center] .chapter__text,
.chapter[data-align=bottom] .chapter__text {
    gap: .8em;
    max-width: 100%
}

.marker-labels {
    z-index: var(--z-labels);
    pointer-events: none;
    position: fixed;
    inset: 0
}

.marker-label {
    max-width: 34ch;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--accent);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--track-caption);
    white-space: nowrap;
    will-change: transform, opacity;
    padding-top: .4em;
    line-height: 1.4;
    position: absolute;
    top: 0;
    left: 0
}

.marker-label--forecast {
    color: var(--neon-hot)
}

.sources {
    z-index: calc(var(--z-content) + 2);
    padding: 30vh var(--space-edge) calc(var(--hud-safe) * 4);
    background: linear-gradient(to bottom, transparent 0, var(--bg) 22vh);
    position: relative
}

.sources__inner {
    gap: 1.5rem;
    max-width: 44rem;
    margin-inline: auto;
    display: grid
}

.sources__title {
    font-variation-settings: "wght" 500;
    letter-spacing: var(--track-display);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.05
}

.sources__intro,
.sources__note {
    max-width: var(--measure)
}

.sources__list {
    counter-reset: source;
    gap: .9rem;
    margin: .5rem 0;
    padding: 0;
    list-style: none;
    display: grid
}

.sources__item {
    color: var(--ice);
    grid-template-columns: 3ch 1fr;
    gap: 1rem;
    font-size: 15px;
    line-height: 1.5;
    display: grid
}

.sources__item:before {
    counter-increment: source;
    content: counter(source, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-caption-lg);
    color: var(--gray);
    padding-top: .2em
}

.sources__link {
    color: var(--ice);
    -webkit-text-decoration-color: var(--gray);
    text-decoration-color: var(--gray);
    text-underline-offset: .15em
}

.sources__link:hover {
    -webkit-text-decoration-color: var(--accent);
    text-decoration-color: var(--accent)
}

.preloader {
    z-index: var(--z-preloader);
    background: var(--bg);
    position: fixed;
    inset: 0
}

.preloader[hidden] {
    display: none
}

.preloader__bar {
    background: var(--accent);
    width: 0;
    height: 2px;
    box-shadow: 0 0 12px var(--accent);
    position: absolute;
    top: 0;
    left: 0
}

.preloader__counter {
    left: var(--space-edge);
    bottom: var(--space-edge);
    font-family: var(--font-mono);
    font-size: var(--fs-figure);
    color: var(--ice);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    position: absolute
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.lenis.lenis-autoToggle {
    transition-behavior: allow-discrete;
    transition-property: overflow;
    transition-duration: 1ms
}