:root {
    --interval-text: #e9edea;
    --interval-muted: #9ca6a1;
    --interval-accent: #91dfc7;
    --interval-line: rgba(185, 216, 207, .18);
}

.interval-writing {
    background:
        radial-gradient(circle at 72% 8%, rgba(80, 138, 131, .1), transparent 30rem),
        #06090a;
    color: var(--interval-text);
}

.interval-header,
.interval-rule,
.interval-story {
    max-width: 780px;
}

.interval-header {
    padding-top: clamp(5rem, 10vw, 8.5rem);
}

.interval-back {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: clamp(4rem, 10vw, 7rem);
    color: var(--interval-muted);
    font: 500 .72rem/1 "DM Mono", monospace;
    letter-spacing: .06em;
    text-decoration: none;
}

.interval-back:hover {
    color: var(--interval-accent);
}

.interval-kicker {
    margin: 0 0 1.4rem;
    color: var(--interval-accent);
    font: 500 .68rem/1.4 "DM Mono", monospace;
    letter-spacing: .16em;
}

.interval-header h1 {
    margin: 0;
    font: 400 clamp(5rem, 14vw, 9rem)/.82 "Instrument Serif", Georgia, serif;
    letter-spacing: -.055em;
}

.interval-disclosure {
    max-width: 620px;
    margin: 2.4rem 0 0;
    color: #c5cfca;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.65;
}

.interval-disclosure strong {
    color: var(--interval-text);
    font-weight: 600;
}

.interval-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.4rem;
    margin-top: 2rem;
    color: #7f8b86;
    font: .66rem/1.5 "DM Mono", monospace;
    letter-spacing: .04em;
}

.interval-meta span::before {
    content: "·";
    margin-right: 1.4rem;
    color: #53605b;
}

.interval-rule {
    margin-top: clamp(3.5rem, 8vw, 6rem);
    margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

.interval-rule::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--interval-accent), var(--interval-line) 28%, transparent 80%);
}

.interval-story {
    padding-bottom: clamp(7rem, 14vw, 12rem);
}

.interval-story > p,
.interval-story blockquote p {
    margin: 0 0 1.65em;
    color: var(--interval-text);
    font: 400 clamp(1.18rem, 2vw, 1.34rem)/1.82 "Instrument Serif", Georgia, serif;
    letter-spacing: .002em;
}

.interval-story > p:first-of-type::first-letter {
    float: left;
    margin: .12em .12em 0 0;
    color: var(--interval-accent);
    font-size: 4.25em;
    line-height: .72;
}

.interval-story blockquote {
    margin: clamp(3rem, 7vw, 5rem) 0;
    padding: .4rem 0 .4rem clamp(1.4rem, 5vw, 3rem);
    border-left: 1px solid var(--interval-accent);
}

.interval-story blockquote p {
    margin: 0;
    color: #c8e8de;
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.55rem);
    line-height: 1.72;
}

.interval-story > p:nth-last-child(-n+4) {
    margin-bottom: .75em;
    color: #f1f5f2;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
}

.interval-story > p:last-of-type {
    margin-top: 1.8em;
    color: var(--interval-accent);
}

.interval-fiction-notice {
    margin-top: clamp(5rem, 10vw, 8rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--interval-line);
    color: #74807b;
    font: .62rem/1.7 "DM Mono", monospace;
    letter-spacing: .04em;
}

@media (max-width: 620px) {
    .interval-header {
        padding-top: 4.5rem;
    }

    .interval-back {
        margin-bottom: 4.5rem;
    }

    .interval-header h1 {
        font-size: clamp(4.4rem, 24vw, 6.4rem);
    }

    .interval-meta {
        display: grid;
        gap: .45rem;
    }

    .interval-meta span::before {
        content: none;
    }

    .interval-story > p,
    .interval-story blockquote p {
        line-height: 1.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .interval-writing *,
    .interval-writing *::before,
    .interval-writing *::after {
        scroll-behavior: auto !important;
    }
}