@layer components {
    :root {
        --whodunit-board-title: var(--label);
        --whodunit-board-scene: var(--secondary-label);
        --whodunit-board-fact: var(--label);
        --whodunit-board-fact-mark: var(--tint);
    }

    .whodunit-board {
        display: grid;
        gap: 1.5rem;
        inline-size: 100%;
    }

    .whodunit-board__case {
        display: grid;
        gap: 0.375rem;
    }

    .whodunit-board__title {
        color: var(--whodunit-board-title);
        font-size: var(--font-size-title2);
        font-weight: 800;
        letter-spacing: -0.0125rem;
        line-height: 1.2;
        margin: 0;
        text-wrap: balance;
    }

    .whodunit-board__scene {
        color: var(--whodunit-board-scene);
        font-size: var(--font-size-subheadline);
        line-height: 1.45;
        margin: 0;
        text-wrap: pretty;
    }

    .whodunit-board__fact {
        color: var(--whodunit-board-fact);
        font-weight: 650;
        text-decoration: underline;
        text-decoration-color: var(--whodunit-board-fact-mark);
        text-decoration-thickness: 0.125rem;
        text-underline-offset: 0.1875rem;
    }
}