#page-title {
    border-block-end: 1px solid var(--rule);
    padding: 1rem var(--page-gutter);
    display: flex;
    align-items: center;
    gap: 1rem;

    hgroup {
        flex: 1;
        font-family: var(--font-title);
        font-size: var(--size-title);
        text-align: center;
        text-transform: uppercase;
        color: var(--ink-primary);

        &:first-child:nth-last-child(2) { text-align: start }
        &:nth-child(2):last-child { text-align: end }
        h1, p { margin: 0 }
        h1 { font-weight: var(--weight-answer) }

        p {
            font-size: var(--size-body);
            font-weight: var(--weight-body);
            color: var(--ink-muted);
        }
    }

    &[data-title="celebration"] {
        border-block-end: none;

        h1 {
            font-size: var(--size-hero);
            font-weight: var(--weight-hero);
        }

        p { font-size: var(--size-title) }
    }
}