@layer grag-page {
    body.grag-page-body {
        --grag-petrol: var(--color-accent-strong);
        --grag-gold: var(--color-warm);
        --grag-panel: var(--color-surface);
        --grag-technical: var(--color-surface-raised);
        --grag-participation: var(--color-bg-deep);
        --grag-rule: var(--color-border);
    }

    .grag-page {
        padding-block-start: clamp(3.5rem, 8vw, 7rem);
        overflow-wrap: anywhere;
    }

    .grag-hero {
        display: grid;
        gap: clamp(2.5rem, 7vw, 6rem);
        padding-block-end: clamp(4rem, 9vw, 8rem);
        border-block-end: 1px solid var(--grag-rule);
    }

    .grag-hero-title,
    .grag-hero-copy,
    .grag-section-header,
    .grag-section-copy,
    .grag-panel,
    .grag-privacy,
    .grag-participation-notice,
    .grag-participation-action,
    .machine-voice,
    .grag-finale {
        display: grid;
    }

    .grag-hero-title {
        align-content: start;
        gap: 1.25rem;
    }

    .grag-hero-title .eyebrow {
        max-inline-size: 42ch;
        color: var(--grag-petrol);
    }

    .grag-hero h1 {
        max-inline-size: 12ch;
        overflow-wrap: normal;
        color: var(--color-text);
        font-family: var(--font-interface);
        font-size: clamp(2rem, 6.5vw, 5rem);
        letter-spacing: -0.045em;
        line-height: 1.06;
    }

    .grag-hero h1 span {
        display: block;
    }

    .grag-hero-copy {
        align-content: end;
        gap: 1.4rem;
    }

    .grag-lede,
    .grag-lead {
        color: var(--color-text);
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        line-height: 1.45;
    }

    .grag-note {
        padding-inline-start: 1.25rem;
        border-inline-start: 0.2rem solid var(--grag-gold);
        color: var(--color-muted);
        font-family: var(--font-interface);
        font-size: 0.82em;
    }

    .grag-sections {
        display: grid;
    }

    .grag-section {
        display: grid;
        gap: clamp(2rem, 6vw, 5rem);
        min-inline-size: 0;
        padding-block: clamp(4rem, 8vw, 7rem);
        border-block-end: 1px solid var(--grag-rule);
    }

    .grag-section-header {
        align-content: start;
        gap: 0.6rem;
        min-inline-size: 0;
    }

    .grag-index {
        color: var(--grag-gold);
        font-family: var(--font-interface);
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        line-height: 1.5;
    }

    .grag-section .section-label,
    .grag-finale .section-label {
        color: var(--grag-petrol);
    }

    .grag-section h2 {
        margin-block-start: 0.35rem;
        font-size: clamp(1.6rem, 3vw, 2.5rem);
    }

    .grag-section-copy {
        gap: 1.4rem;
        min-inline-size: 0;
    }

    .grag-section-copy > *,
    .machine-voice > * {
        max-inline-size: var(--reading-max);
    }

    .grag-quote {
        margin: 0.4rem 0;
        padding: clamp(1.2rem, 3vw, 2rem);
        border-inline-start: 0.25rem solid var(--grag-gold);
        color: var(--color-text);
        font-size: clamp(1.35rem, 2.5vw, 2rem);
        font-style: italic;
        line-height: 1.4;
    }

    .grag-panel,
    .grag-privacy {
        gap: 0.8rem;
        padding: clamp(1.25rem, 4vw, 2rem);
        border: 1px solid var(--grag-rule);
        border-inline-start: 0.3rem solid var(--grag-gold);
        background: var(--grag-panel);
        border-radius: var(--radius-medium);
    }

    .grag-panel > :last-child {
        font-size: 1.12em;
    }

    .grag-comparison {
        display: grid;
        gap: 1rem;
        margin: 0.5rem 0;
    }

    .grag-comparison div {
        display: grid;
        gap: 0.8rem;
        padding: clamp(1.2rem, 3vw, 1.75rem);
        border-block-start: 0.2rem solid var(--grag-petrol);
        background: var(--grag-panel);
        border-radius: var(--radius-medium);
    }

    .grag-comparison dt {
        color: var(--grag-petrol);
        font-family: var(--font-interface);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .grag-comparison dd {
        margin: 0;
    }

    .grag-possibilities {
        display: grid;
        gap: 0;
        margin-block: 0.5rem;
        border-block: 1px solid var(--grag-rule);
        list-style: none;
    }

    .grag-possibilities li {
        padding-block: 0.65rem;
        color: var(--color-text);
        font-family: var(--font-interface);
        font-size: clamp(1.35rem, 3vw, 2rem);
        line-height: 1.25;
    }

    .grag-possibilities li + li {
        border-block-start: 1px solid var(--color-border);
    }

    .grag-section--technical {
        margin-inline: calc(-1 * min(var(--gutter), 2rem));
        padding-inline: min(var(--gutter), 2rem);
        background: var(--grag-technical);
    }

    .grag-section--technical .grag-section-copy {
        color: var(--color-muted);
        font-family: var(--font-interface);
        font-size: 0.88em;
        line-height: 1.7;
    }

    .grag-section--technical .grag-privacy {
        color: var(--color-text);
        font-family: var(--font-reading);
        font-size: 1em;
    }

    .grag-section--participation {
        margin-inline: calc(-1 * min(var(--gutter), 2rem));
        padding-inline: min(var(--gutter), 2rem);
        border-block-start: 0.25rem solid var(--grag-gold);
        background: var(--grag-participation);
        scroll-margin-block-start: 0;
    }

    .grag-section--participation .grag-section-header h2 {
        max-inline-size: none;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .grag-participation {
        --reading-max: 64ch;

        font-family: var(--font-reading);
        font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
        font-weight: 400;
        line-height: 1.65;
    }

    .grag-participation > .grag-lead {
        font-family: var(--font-reading);
        font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
        font-weight: 400;
        line-height: 1.45;
    }

    .grag-participation-notice,
    .grag-participation-action {
        gap: 1rem;
        inline-size: 100%;
        max-inline-size: var(--reading-max);
        padding: clamp(1.25rem, 4vw, 2rem);
        border: 1px solid var(--grag-rule);
        background: var(--grag-technical);
    }

    .grag-participation-notice {
        border-inline-start: 0.3rem solid var(--grag-petrol);
    }

    .grag-participation-notice code {
        font-family: var(--font-code);
        font-size: 0.86em;
        line-height: inherit;
        vertical-align: baseline;
    }

    .grag-participation-action {
        border-block-start: 0.3rem solid var(--grag-gold);
    }

    .grag-participation-check {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.8rem;
        align-items: start;
        cursor: pointer;
    }

    .grag-participation-check input {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        margin: 0.25rem 0 0;
        accent-color: var(--color-accent);
    }

    .grag-participation-button {
        max-inline-size: 100%;
        justify-self: start;
    }

    .grag-participation-button:disabled {
        border-color: var(--color-control-border);
        background: var(--color-surface-raised);
        color: var(--color-muted);
        cursor: not-allowed;
    }

    .grag-participation-note {
        color: var(--color-muted);
        font-family: inherit;
        font-size: 0.88em;
        line-height: 1.6;
    }

    .grag-section--voice {
        margin-block-start: clamp(3rem, 7vw, 6rem);
        padding-inline: clamp(1.25rem, 5vw, 4rem);
        border: 1px solid var(--grag-rule);
        border-inline-start: 0.35rem solid var(--grag-gold);
        background: var(--grag-panel);
        border-radius: var(--radius-medium);
    }

    .machine-voice {
        gap: 1.25rem;
        margin: 0;
        font-size: clamp(1.2rem, 2.2vw, 1.55rem);
        line-height: 1.6;
    }

    .machine-signature {
        margin-block-start: 1rem;
        color: var(--grag-gold);
        font-family: var(--font-interface);
        font-size: clamp(0.95rem, 2vw, 1.2rem);
        font-style: normal;
        letter-spacing: 0.03em;
        line-height: 1.4;
    }

    .grag-finale {
        gap: 1.5rem;
        padding-block: clamp(5rem, 11vw, 10rem);
    }

    .grag-finale h2 {
        max-inline-size: 24ch;
        font-size: clamp(1.9rem, 4vw, 3.75rem);
    }

    .grag-finale > :last-child {
        color: var(--color-muted);
        font-size: clamp(1.2rem, 2vw, 1.5rem);
    }

    @media (min-width: 40rem) {
        .grag-comparison {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .grag-hero {
            grid-template-columns: minmax(0, 1.1fr) minmax(24rem, 0.9fr);
            align-items: end;
        }

        .grag-section {
            grid-template-columns: minmax(11rem, 0.6fr) minmax(0, 1.4fr);
        }

        .grag-section--participation {
            grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        }
    }

    @media (forced-colors: active) {
        .grag-note,
        .grag-quote,
        .grag-panel,
        .grag-privacy,
        .grag-participation-notice,
        .grag-participation-action,
        .grag-comparison div,
        .grag-section--voice {
            border-color: CanvasText;
        }
    }
}