@layer block {
    .hero {
        padding-block: var(--space-8) var(--space-6);
        padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
        border-bottom: 1px solid var(--color-border);
        text-align: center;

        & .hero__inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
            max-width: 40rem;
            margin-inline: auto;
        }

        & .hero__label {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-accent);
        }

        & .hero__theme {
            font-family: var(--font-display);
            font-size: var(--text-display-story);
            font-weight: var(--weight-display);
            line-height: var(--leading-display);
            color: var(--color-ink);
            letter-spacing: -0.02em;

            /* No prompt for today — the headline recedes so it reads as a
               quiet day, not as the day's topic. */
            &[data-empty="true"] {
                color: var(--color-text-muted);
            }
        }

        & .hero__tagline {
            font-family: var(--font-body);
            font-size: var(--text-body-md);
            font-weight: var(--weight-body);
            color: var(--color-text-muted);
            line-height: var(--leading-body-md);
            margin-top: var(--space-1);
        }

        /* A footnote to the theme: narrower and quieter than the tagline above
           it, so the eye reads the six words first and this only if it wants to. */
        & .hero__context {
            font-family: var(--font-body);
            font-size: var(--text-body-sm);
            font-weight: var(--weight-body);
            line-height: var(--leading-body-sm);
            color: var(--color-text-muted);
            max-width: 34rem;
            margin-top: var(--space-2);
            text-wrap: pretty;
        }

        /* On its own line, like the eyebrow above the theme. Inline, it read as
           a hanging indent the moment the sentence wrapped — and in centred
           text it always wraps. */
        & .hero__context-label {
            display: block;
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            margin-bottom: var(--space-1);
        }

        /* Underlined but in the same muted ink as the sentence it sits in: the
           brand colour here would out-shout the theme, and it is a bright lime
           that barely clears the paper it is printed on. */
        & .hero__context-source {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.15em;
            text-decoration-thickness: 1px;
            text-decoration-color: var(--color-border);

            &:hover,
            &:focus-visible {
                color: var(--color-ink);
                text-decoration-color: currentColor;
            }
        }

        & .hero__countdown-wrap {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            margin-top: var(--space-1);
        }

        & .hero__countdown-label {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-text-muted);
        }

        & .hero__countdown {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.08em;
            color: var(--color-text-muted);
            font-variant-numeric: tabular-nums;
        }
    }
}