/*
 * The result screen: architect/site-spec/RESULT-PAGE.md and the approved
 * mock-up architect/design/mockups/result-r2/c.html (rounds 2-6).
 *
 * Top to bottom: the share strip (a phone), the picture band, the thread with
 * the sidebar beside it, the dark strip "Take with you", how others answered
 * with the CTA again, how this test works, related tests.
 *
 * Class names: .stillnormal-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

/* ---------- small pieces shared by the blocks below ---------- */

.stillnormal-h3 {
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
}

.stillnormal-small {
    margin: 0;
    font-size: 15px;
    color: var(--ink-soft);
}

/* A link that is a button: underlined text, for the dark strip's notes. */
.stillnormal-linkbtn {
    display: inline;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.stillnormal-linkbtn.is-copied {
    color: var(--amber-deep);
}

.stillnormal-ico-dl {
    flex: none;
}

/* ---------- the share strip: a phone, pinned to the top ---------- */

.stillnormal-sharebar {
    display: none;
}

.stillnormal-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.stillnormal-ib.is-copied {
    border-color: var(--amber);
    color: var(--amber-deep);
}

@media (max-width: 900px) {
    .stillnormal-sharebar:not([hidden]) {
        display: block;
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid var(--rule);
        background: var(--paper);
        box-shadow: 0 6px 18px rgba(58, 42, 28, .08);
    }

    .stillnormal-sharebar-in {
        display: grid;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .stillnormal-sharebar-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 36px;
    }

    .stillnormal-share-call {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }

    .stillnormal-cardbtn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 14px 0 10px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--amber);
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    /* Round icons: spread over the row, wrapping rather than widening the page. */
    .stillnormal-share-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 4px;
        row-gap: 6px;
    }
}

/* Anchors land below the strip. */
.stillnormal-has-result [id] {
    scroll-margin-top: var(--stillnormal-bar-h, 0px);
}

/* ---------- the band ---------- */

/* The engine appends a share row of its own to the result; the theme draws one. */
.quiz-engine-result > .quiz-engine-share {
    display: none;
}

.stillnormal-band {
    position: relative;
    width: 100%;
    max-height: 420px;
    margin: 0;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: var(--sand-deep);
}

.stillnormal-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The foot of the picture dissolves into the sand (SKIN.md section 3). */
.stillnormal-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--sand) 0%, rgba(239, 226, 207, .55) 18%, rgba(239, 226, 207, 0) 45%);
    pointer-events: none;
}

/* ---------- the thread, and the sidebar beside it ---------- */

.stillnormal-read {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
    padding-top: 8px;
    padding-bottom: 64px;
}

/*
 * The thread: an amber line with a dot at the top, and every step sewn to it
 * by a short stroke. The line fades out at its foot.
 */
.stillnormal-thread {
    position: relative;
    min-width: 0;
    padding-left: 70px;
}

.stillnormal-thread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--amber) 0%, var(--amber) 85%, rgba(179, 114, 31, 0) 100%);
}

.stillnormal-thread::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--amber);
}

.stillnormal-step {
    position: relative;
    margin: 0 0 30px;
}

.stillnormal-step::before {
    content: "";
    position: absolute;
    left: -70px;
    top: .6em;
    width: 26px;
    height: 2px;
    background: var(--amber);
}

.stillnormal-step.is-scales::before {
    top: 8px;
}

/* abc: the engine draws no scales, and the step goes with them. */
.stillnormal-step.is-scales:has(.quiz-engine-scales:empty) {
    display: none;
}

.stillnormal-result-test {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

/*
 * The result's name. Words are never broken while it can shrink: the script
 * fits the size to the column (result-screen.js) and only then, at its
 * smallest, lets a word break.
 */
.stillnormal-result-name {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(36px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.02em;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

.stillnormal-result-name.is-breaking {
    overflow-wrap: anywhere;
}

.stillnormal-quote {
    max-width: 22em;
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 36px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
    color: var(--amber-deep);
    text-wrap: balance;
}

.stillnormal-quote p {
    margin: 0;
}

.stillnormal-quote em {
    color: var(--amber);
}

/*
 * The scales, as the plugin draws them after scoring (frontend.js, 1.8.0):
 * one .quiz-engine-scale per axis holding a label, a track with its fill, and
 * the value. The fill's size is handed over as --quiz-engine-scale-value, a
 * bare number, so the width is this sheet's to set. No zone captions under
 * the bar (Lex, 2026-09-28). Labels up to ~16 characters sit on one line,
 * longer ones take two.
 */
.stillnormal-thread .quiz-engine-scales {
    display: grid;
    gap: 12px;
    max-width: 620px;
}

.stillnormal-thread .quiz-engine-scale {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.stillnormal-thread .quiz-engine-scale-track {
    position: relative;
    display: block;
    height: 10px;
    border: 0;
    border-radius: 5px;
    background: var(--track);
    overflow: hidden;
}

.stillnormal-thread .quiz-engine-scale-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: calc(var(--quiz-engine-scale-value, 0) * 1%);
    border-radius: 5px;
    background: var(--amber);
}

.stillnormal-thread .quiz-engine-scale-value {
    text-align: right;
    color: var(--amber-deep);
    font-variant-numeric: tabular-nums;
}

.stillnormal-thread .quiz-engine-result-verdict {
    max-width: 36em;
    font-size: 18.5px;
    line-height: 1.65;
}

.stillnormal-thread .quiz-engine-result-verdict p {
    margin: 0 0 1em;
}

.stillnormal-thread .quiz-engine-result-verdict p:last-child {
    margin-bottom: 0;
}

/* The end mark and the author, on one line. */
.stillnormal-signrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 22px;
    row-gap: 14px;
    margin-top: 28px;
}

.stillnormal-endmark {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stillnormal-endmark-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--amber);
}

/* The author: her small round photo, the name and the role beside it. */
.stillnormal-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.stillnormal-author p {
    margin: 0;
}

.stillnormal-author-photo {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
}

.stillnormal-author a {
    text-decoration: none;
}

.stillnormal-author small {
    display: block;
    font-size: 13.5px;
    color: var(--ink-soft);
}

/* The sidebar: sharing the result, then the CTA, sticky on a desktop. */
.stillnormal-aside {
    position: sticky;
    top: 24px;
    min-width: 0;
}

.stillnormal-sharebox {
    padding: 22px 22px 24px;
    border-radius: var(--radius-card);
    background: var(--paper);
}

.stillnormal-savecard {
    display: flex;
    width: 100%;
    margin-top: 12px;
    border-color: var(--rule);
}

.stillnormal-cta {
    padding: 24px 24px 26px;
    border-radius: var(--radius-card);
    background: var(--dark);
    color: var(--cream);
}

.stillnormal-cta.is-side {
    margin-top: 16px;
}

.stillnormal-cta.is-wide {
    align-self: start;
    padding: 36px 40px;
}

.stillnormal-cta p {
    max-width: 28em;
    margin: 0 0 16px;
    font-size: 15.5px;
    color: rgba(243, 231, 214, .8);
}

/*
 * The CTA's title is its headline, not a label: the CoreTypes copy leads with
 * it and the button finishes its sentence (Lex, 2026-09-29). Set as a
 * heading in the display face, the way headings read on the dark strip.
 */
.stillnormal-cta .stillnormal-cta-title {
    max-width: 18em;
    margin-bottom: 12px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--cream);
}

.stillnormal-cta.is-wide .stillnormal-cta-title {
    font-size: 27px;
}

.stillnormal-cta.is-side .stillnormal-btn {
    display: flex;
}

/* ---------- Take with you: the dark strip ---------- */

.stillnormal-take {
    padding-top: 64px;
    padding-bottom: 72px;
    background: var(--dark);
    color: var(--cream);
}

.stillnormal-take .stillnormal-eyebrow {
    color: var(--amber-light);
}

.stillnormal-take .stillnormal-h2 {
    max-width: 20em;
    color: var(--cream);
}

.stillnormal-take .stillnormal-h2 em {
    color: var(--amber-light);
}

.stillnormal-take-note {
    max-width: 38em;
    margin: 0 0 36px;
    font-size: 15px;
    color: rgba(243, 231, 214, .72);
}

.stillnormal-take-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* While the story card does not exist, the other two take its column too. */
.stillnormal-take-grid:has(> .is-story[hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.stillnormal-take-col {
    min-width: 0;
}

.stillnormal-take-h {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--amber-light);
}

.stillnormal-story-preview {
    width: 220px;
    max-width: 100%;
    border-radius: var(--radius-card);
    box-shadow: 0 24px 50px rgba(35, 25, 18, .28);
}

.stillnormal-take .is-story .stillnormal-btn {
    margin-top: 14px;
}

/* A paper note: the step for today, and the words that go with the test. */
.stillnormal-note {
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--paper);
    color: var(--ink);
}

.stillnormal-note-text {
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 300;
    line-height: 1.3;
}

.stillnormal-note-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stillnormal-note-mark .stillnormal-endmark-dot {
    width: 9px;
    height: 9px;
}

.stillnormal-take .stillnormal-note-save {
    margin-top: 12px;
    color: var(--cream);
    font-size: 14px;
}

.stillnormal-send-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 6px;
    margin: 14px 0 0;
    font-size: 14px;
}

/* ---------- how others answered, and the CTA again ---------- */

.stillnormal-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    padding-top: 64px;
    padding-bottom: 56px;
}

.stillnormal-compare {
    min-width: 0;
}

.stillnormal-others-note {
    margin-bottom: 18px;
}

.stillnormal-first {
    margin: 0 0 6px;
    font-size: 17px;
}

.stillnormal-first b,
.stillnormal-others-note b {
    font-weight: 600;
    color: var(--amber-deep);
}

/* The plugin's distribution: its heading is the section's, so it goes. */
.stillnormal-compare .quiz-engine-comparison-heading {
    display: none;
}

.stillnormal-compare .quiz-engine-comparison {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * One result per row: its name and share above, the bar below. The plugin's
 * own sheet lays the words over the bar and gives the row a background; every
 * property it could set is put back here by name.
 */
.stillnormal-compare .quiz-engine-comparison-item {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
    line-height: 1.35;
}

.stillnormal-compare .quiz-engine-comparison-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    border-radius: 5px;
    background: var(--track);
}

.stillnormal-compare .quiz-engine-comparison-item > :not(.quiz-engine-comparison-bar) {
    position: static;
    display: inline;
    inset: auto;
    margin: 0;
    padding: 0;
    transform: none;
    background: none;
    font: inherit;
    color: inherit;
    z-index: auto;
}

.stillnormal-compare .quiz-engine-comparison-bar {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    z-index: 1;
    display: block;
    height: 8px;
    max-width: 100%;
    border-radius: 5px;
    /* Other rows: a muted brown that reads against the track (Lex, 2026-09-29);
       the visitor's own row stays amber. */
    background: #b9a081;
}

.stillnormal-compare .quiz-engine-comparison-mine {
    font-weight: 600;
    color: var(--amber-deep);
}

.stillnormal-compare .quiz-engine-comparison-mine .quiz-engine-comparison-bar {
    background: var(--amber);
}

/* ---------- how this test works ---------- */

.stillnormal-appx {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    padding-top: 56px;
    padding-bottom: 40px;
    border-top: 1px solid var(--rule);
}

/* The accordion keeps its own heading for the cover; here the column has it. */
.stillnormal-about-slot .stillnormal-about > .stillnormal-h2 {
    display: none;
}

.stillnormal-about-slot .stillnormal-about {
    margin: 0;
}

.stillnormal-appx .stillnormal-credits {
    margin: 22px 0 0;
}

.stillnormal-appx .stillnormal-credits-about {
    font-size: 15px;
}

/* The author stands under the verdict on the result; here only the reviewer. */
.stillnormal-appx .stillnormal-credits-line.is-author {
    display: none;
}

.stillnormal-related-slot .stillnormal-related {
    padding-top: 40px;
    padding-bottom: 20px;
}

/* ---------- phone ---------- */

@media (max-width: 900px) {
    .stillnormal-read {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-bottom: 40px;
    }

    .stillnormal-thread {
        padding-left: 44px;
    }

    .stillnormal-step::before {
        left: -44px;
        width: 18px;
    }

    .stillnormal-result-name {
        font-size: 38px;
    }

    .stillnormal-quote {
        font-size: 24px;
    }

    .stillnormal-thread .quiz-engine-scale {
        grid-template-columns: 120px minmax(0, 1fr) 52px;
        font-size: 14px;
    }

    .stillnormal-thread .quiz-engine-result-verdict {
        font-size: 17px;
    }

    /* The strip at the top shares on a phone; the CTA follows the verdict. */
    .stillnormal-aside {
        position: static;
    }

    .stillnormal-sharebox {
        display: none;
    }

    .stillnormal-cta.is-side {
        margin-top: 0;
    }

    /* On a phone the CTA already follows the verdict: once is enough. */
    .stillnormal-cta.is-wide {
        display: none;
    }

    .stillnormal-take {
        padding-top: 44px;
        padding-bottom: 48px;
    }

    .stillnormal-take-grid,
    .stillnormal-take-grid:has(> .is-story[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .stillnormal-story-preview {
        margin: 0 auto;
    }

    .stillnormal-two {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .stillnormal-appx {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 36px;
    }
}

/* ---------- hover, only on a real pointer ---------- */

@media (hover: hover) and (pointer: fine) {
    .stillnormal-ib:hover:not(:active) {
        border-color: var(--amber);
    }

    .stillnormal-author a:hover,
    .stillnormal-linkbtn:hover {
        color: var(--amber-deep);
    }

    .stillnormal-take .stillnormal-linkbtn.stillnormal-note-save:hover {
        color: var(--amber-light);
    }
}

/* ---------- the PNG card and the step note ---------- */

/*
 * Templates, never shown: result-screen.js copies them off-screen and draws
 * the copy at 1080 CSS px wide, so the picture is 1080 px without scaling.
 * V5 "The thread" (architect/design/mockups/cards/v5.css): 9:16 for stories,
 * the same composition at 4:5 for a post (.is-feed), and the step as a note
 * for the phone's screen (.is-note). Sizes are the mock-up's, in px of the
 * picture.
 */
.stillnormal-png-src {
    display: none;
}

.stillnormal-png {
    position: relative;
    width: 1080px;
    height: 1920px;
    overflow: hidden;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--text);
}

.stillnormal-png-band {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 360px;
}

.stillnormal-png-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.stillnormal-png-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--sand) 0%, rgba(239, 226, 207, .55) 22%, rgba(239, 226, 207, 0) 55%);
}

.stillnormal-png-thread {
    position: absolute;
    left: 120px;
    top: 400px;
    bottom: 120px;
    width: 3px;
    background: linear-gradient(180deg, var(--amber) 0%, var(--amber) 80%, rgba(179, 114, 31, 0) 100%);
}

.stillnormal-png-thread::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--amber);
    transform: translateX(-50%);
}

.stillnormal-png-col {
    position: absolute;
    left: 190px;
    right: 100px;
    top: 400px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
}

.stillnormal-png-step {
    position: relative;
    flex: none;
    margin: 0 0 50px;
}

.stillnormal-png-step::before {
    content: "";
    position: absolute;
    left: -70px;
    top: .55em;
    width: 34px;
    height: 3px;
    background: var(--amber);
}

.stillnormal-png-step.is-scales::before {
    top: 12px;
}

.stillnormal-png-test {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

/* Fitted by the script from 140 down, the way the page's name is. */
.stillnormal-png-name {
    margin: 0;
    font-family: var(--display);
    font-size: 140px;
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.02em;
    overflow-wrap: normal;
    text-wrap: balance;
}

.stillnormal-png-name.is-breaking {
    overflow-wrap: anywhere;
}

.stillnormal-png-quote {
    font-family: var(--display);
    font-size: 60px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.16;
    color: var(--amber-deep);
    text-wrap: balance;
}

.stillnormal-png-quote p {
    margin: 0;
}

.stillnormal-png-quote em {
    color: var(--amber);
}

.stillnormal-png .quiz-engine-scales {
    display: grid;
    gap: 22px;
}

.stillnormal-png .quiz-engine-scale {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 22px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

.stillnormal-png .quiz-engine-scale-track {
    position: relative;
    display: block;
    height: 16px;
    border-radius: 8px;
    background: var(--track);
    overflow: hidden;
}

.stillnormal-png .quiz-engine-scale-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: calc(var(--quiz-engine-scale-value, 0) * 1%);
    border-radius: 8px;
    background: var(--amber);
}

.stillnormal-png .quiz-engine-scale-value {
    text-align: right;
    color: var(--amber-deep);
}

/* Text cut to the room left on a short card: it fades out at the foot. */
.stillnormal-png-text.is-cut {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0) 100%);
}

/* The last step before the call: the call keeps its own distance. */
.stillnormal-png-step.stillnormal-png-text {
    margin-bottom: 0;
}

.stillnormal-png-text p {
    max-width: 24em;
    margin: 0;
    font-size: 36px;
    line-height: 1.5;
}

/* Paragraph 3, fading out: the text is longer than the card shows. */
.stillnormal-png-more {
    max-height: 150px;
    margin-top: 26px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
}

.stillnormal-png-call {
    flex: none;
    margin-top: auto;
    padding-top: 20px;
}

.stillnormal-png-call p {
    margin: 0 0 20px;
    font-family: var(--display);
    font-size: 44px;
    line-height: 1.25;
}

.stillnormal-png-call b {
    display: inline-block;
    padding: 26px 40px;
    border-radius: 999px;
    background: var(--amber);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

/* 4:5 for a post: the same card, shorter, everything a step smaller. */
.stillnormal-png.is-feed {
    height: 1350px;
}

.stillnormal-png.is-feed .stillnormal-png-band {
    height: 300px;
}

.stillnormal-png.is-feed .stillnormal-png-thread,
.stillnormal-png.is-feed .stillnormal-png-col {
    top: 330px;
    bottom: 80px;
}

.stillnormal-png.is-feed .stillnormal-png-step {
    margin-bottom: 36px;
}

.stillnormal-png.is-feed .stillnormal-png-name {
    font-size: 120px;
}

.stillnormal-png.is-feed .stillnormal-png-quote {
    font-size: 50px;
}

.stillnormal-png.is-feed .stillnormal-png-text p {
    font-size: 32px;
}

.stillnormal-png.is-feed .stillnormal-png-call p {
    font-size: 38px;
}

/* The step for today, 9:16: the words large in the middle, the mark at the foot. */
.stillnormal-png.is-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 160px 130px;
}

.stillnormal-png-label {
    margin: 0 0 40px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

.stillnormal-png-notetext {
    margin: 0;
    font-family: var(--display);
    font-size: 76px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.stillnormal-png-mark {
    position: absolute;
    left: 130px;
    bottom: 120px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stillnormal-png-mark .stillnormal-endmark-dot {
    width: 22px;
    height: 22px;
}