@layer reset, base, layout, components, blocks;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    img {
        max-width: 100%;
    }
}

@layer base {
    :root,
    [data-tone='base'],
    html[data-header='transparent']:has(main > :first-child[data-tone='base']) .site-header {
        --tone-bg: var(--role-surface);
        --tone-fg: var(--role-on-surface);
        --tone-muted: var(--role-muted);
        --tone-border: var(--role-border);
        --tone-accent: var(--role-accent);
        --tone-action: var(--role-primary);
        --tone-on-action: var(--role-on-primary);
        --tone-action-accent: var(--brand-highlight, var(--role-on-primary));
        --tone-eyebrow: var(--role-muted);
        --tone-card: var(--role-surface-alt);
        --tone-link: var(--role-primary);
        --tone-ring: var(--role-ring);
        --tone-logo: var(--scheme-logo);
        --tone-logo-inverse: var(--scheme-logo-inverse);
    }

    /* Without the token these are invalid, so a reader's fallback is resolved at the reader, not at the root. */
    :root {
        --tone-highlight: var(--brand-highlight);
        --tone-on-highlight: var(--brand-on-highlight);
    }

    /* A tone reads which logo its side of the light set takes; the dark scheme swaps the sides for the whole page. */
    :root {
        --scheme-logo: block;
        --scheme-logo-inverse: none;
    }

    :root[data-scheme='dark'] {
        --scheme-logo: none;
        --scheme-logo-inverse: block;
    }

    @media (prefers-color-scheme: dark) {
        :root[data-scheme='auto'] {
            --scheme-logo: none;
            --scheme-logo-inverse: block;
        }
    }

    [data-tone='alt'],
    html[data-header='transparent']:has(main > :first-child[data-tone='alt']) .site-header,
    html[data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='alt']) .site-header {
        --tone-bg: var(--role-surface-alt);
        --tone-fg: var(--role-on-surface);
        --tone-muted: var(--role-muted);
        --tone-border: var(--role-border);
        --tone-accent: var(--role-accent);
        --tone-action: var(--role-primary);
        --tone-on-action: var(--role-on-primary);
        --tone-action-accent: var(--brand-highlight, var(--role-on-primary));
        --tone-eyebrow: var(--role-muted);
        --tone-card: var(--role-surface);
        --tone-link: var(--role-primary);
        --tone-ring: var(--role-ring);
        --tone-logo: var(--scheme-logo);
        --tone-logo-inverse: var(--scheme-logo-inverse);
    }

    [data-tone='brand'],
    html[data-header='transparent']:has(main > :first-child[data-tone='brand']) .site-header,
    html[data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='brand']) .site-header {
        --tone-bg: var(--role-primary);
        --tone-fg: var(--role-on-primary);
        --tone-muted: var(--role-on-primary-muted);
        --tone-border: var(--role-on-primary-muted);
        --tone-accent: var(--brand-highlight, var(--role-on-primary));
        --tone-action: var(--brand-highlight, var(--role-on-primary));
        --tone-on-action: var(--brand-on-highlight, var(--role-primary));
        --tone-action-accent: var(--tone-on-action);
        --tone-eyebrow: var(--brand-highlight, var(--role-on-primary-muted));
        --tone-card: transparent;
        --tone-link: var(--role-on-primary);
        --tone-ring: var(--role-on-primary);
        --tone-surface-accent: var(--brand-highlight, var(--tone-bg));
        --tone-logo: var(--scheme-logo-inverse);
        --tone-logo-inverse: var(--scheme-logo);
    }

    [data-tone='inverse'],
    [data-tone='image'],
    html[data-header='transparent']:has(main > :first-child[data-tone='inverse']) .site-header,
    html[data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='inverse']) .site-header,
    html[data-header='transparent']:has(main > :first-child[data-tone='image']) .site-header,
    html[data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='image']) .site-header {
        --tone-bg: var(--role-inverse);
        --tone-fg: var(--role-on-inverse);
        --tone-muted: var(--role-inverse-muted);
        --tone-border: var(--role-inverse-muted);
        --tone-accent: var(--brand-highlight, var(--role-inverse-accent));
        --tone-action: var(--brand-highlight, var(--role-on-inverse));
        --tone-on-action: var(--brand-on-highlight, var(--role-inverse));
        --tone-action-accent: var(--tone-on-action);
        --tone-eyebrow: var(--brand-highlight, var(--role-inverse-muted));
        --tone-card: transparent;
        --tone-link: var(--role-on-inverse);
        --tone-ring: var(--role-on-inverse);
        --tone-surface-accent: var(--tone-accent);
        --tone-logo: var(--scheme-logo-inverse);
        --tone-logo-inverse: var(--scheme-logo);
    }

    /* Without the highlight token of the brand, --brand-highlight is not set and the tone is the inverse surface. */
    [data-tone='highlight'],
    html[data-header='transparent']:has(main > :first-child[data-tone='highlight']) .site-header,
    html[data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='highlight']) .site-header {
        --tone-bg: var(--brand-highlight, var(--role-inverse));
        --tone-fg: var(--brand-on-highlight, var(--role-on-inverse));
        --tone-muted: var(--tone-fg);
        --tone-border: var(--tone-fg);
        --tone-accent: var(--tone-fg);
        --tone-action: var(--tone-fg);
        --tone-on-action: var(--tone-bg);
        --tone-action-accent: var(--tone-bg);
        --tone-eyebrow: var(--tone-fg);
        --tone-card: transparent;
        --tone-link: var(--tone-fg);
        --tone-ring: var(--tone-fg);
        --tone-highlight: var(--tone-fg);
        --tone-on-highlight: var(--tone-bg);
        --tone-surface-accent: var(--tone-bg);
        --tone-logo: var(--brand-highlight-logo, var(--scheme-logo-inverse));
        --tone-logo-inverse: var(--brand-highlight-logo-inverse, var(--scheme-logo));
    }

    /* In the dark scheme the inverse surface is light, so a photo plate takes the dark surface instead. */
    :root[data-scheme='dark'] [data-tone='image'],
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child[data-tone='image']) .site-header,
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='image']) .site-header {
        --tone-bg: var(--role-surface);
        --tone-fg: var(--role-on-surface);
        --tone-muted: var(--role-muted);
        --tone-border: var(--role-border);
        --tone-accent: var(--role-accent);
        --tone-action: var(--role-primary);
        --tone-on-action: var(--role-on-primary);
        --tone-action-accent: var(--role-on-primary);
        --tone-eyebrow: var(--role-muted);
        --tone-link: var(--role-primary);
        --tone-ring: var(--role-on-surface);
        --tone-logo: none;
        --tone-logo-inverse: block;
    }

    @media (prefers-color-scheme: dark) {
        :root[data-scheme='auto'] [data-tone='image'],
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child[data-tone='image']) .site-header,
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='image']) .site-header {
            --tone-bg: var(--role-surface);
            --tone-fg: var(--role-on-surface);
            --tone-muted: var(--role-muted);
            --tone-border: var(--role-border);
            --tone-accent: var(--role-accent);
            --tone-action: var(--role-primary);
            --tone-on-action: var(--role-on-primary);
            --tone-action-accent: var(--role-on-primary);
            --tone-eyebrow: var(--role-muted);
            --tone-link: var(--role-primary);
            --tone-ring: var(--role-on-surface);
            --tone-logo: none;
            --tone-logo-inverse: block;
        }
    }

    /* The brand and inverse surfaces of the dark set are light, and so is its highlight: they keep the roles of their tone. */
    :root[data-scheme='dark'] [data-tone='brand'],
    :root[data-scheme='dark'] [data-tone='inverse'],
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child[data-tone='brand']) .site-header,
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='brand']) .site-header,
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child[data-tone='inverse']) .site-header,
    :root[data-scheme='dark'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='inverse']) .site-header {
        --brand-highlight: initial;
        --brand-on-highlight: initial;
        --tone-highlight: initial;
        --tone-on-highlight: initial;
    }

    @media (prefers-color-scheme: dark) {
        :root[data-scheme='auto'] [data-tone='brand'],
        :root[data-scheme='auto'] [data-tone='inverse'],
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child[data-tone='brand']) .site-header,
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='brand']) .site-header,
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child[data-tone='inverse']) .site-header,
        :root[data-scheme='auto'][data-header='transparent']:has(main > :first-child > .block:first-child[data-tone='inverse']) .site-header {
            --brand-highlight: initial;
            --brand-on-highlight: initial;
            --tone-highlight: initial;
            --tone-on-highlight: initial;
        }
    }

    /* The primary of the dark set is light, and so is its highlight: the date badge head on the action keeps on_primary. */
    :root[data-scheme='dark'],
    :root[data-scheme='dark'] [data-tone='base'],
    :root[data-scheme='dark'] [data-tone='alt'] {
        --tone-action-accent: var(--role-on-primary);
    }

    @media (prefers-color-scheme: dark) {
        :root[data-scheme='auto'],
        :root[data-scheme='auto'] [data-tone='base'],
        :root[data-scheme='auto'] [data-tone='alt'] {
            --tone-action-accent: var(--role-on-primary);
        }
    }

    [data-tone] {
        background: var(--tone-bg);
        color: var(--tone-fg);
    }

    :where([data-tone]:not(html)) {
        padding: calc(var(--space-unit) * var(--section-factor) * 2 / 3) calc(var(--space-unit) * 1.5);
    }

    html {
        font-synthesis: style;
    }

    body {
        background: var(--tone-bg);
        color: var(--tone-fg);
        font-family: var(--font-main);
        font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        line-height: 1.5;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        letter-spacing: var(--heading-tracking);
        font-style: var(--heading-style);
        text-transform: var(--heading-transform);
        line-height: 1.2;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    :lang(cs) :where(p, li, blockquote, dd):not(.eyebrow, nav li) {
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        text-wrap: pretty;
    }

    /* hyphens is inherited, so the title and the eyebrow of a card inside a list item would split. */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .eyebrow {
        hyphens: manual;
    }

    h1 {
        font-size: calc(clamp(1.75rem, 1.25rem + 2.5cqi, 2.75rem) * var(--type-scale));
    }

    h2 {
        font-size: calc(clamp(1.375rem, 1.125rem + 1.25cqi, 2rem) * (1 + (var(--type-scale) - 1) / 2));
    }

    h3 {
        font-size: calc(clamp(1.125rem, 1rem + 0.625cqi, 1.375rem) * (1 + (var(--type-scale) - 1) / 2));
    }

    a {
        color: var(--tone-link);
        overflow-wrap: anywhere;
    }

    button,
    input,
    select,
    textarea,
    label {
        font-family: var(--font-ui);
        font-size: 1rem;
    }

    :focus-visible {
        outline: 0.1875rem solid var(--tone-ring);
        outline-offset: 0.125rem;
    }

    .icon {
        width: 1.25em;
        height: 1.25em;
        flex: none;
    }

    .visually-hidden,
    .site-footer-bar .site-social-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@layer layout {
    .skip-link {
        position: absolute;
        left: var(--space-unit);
        top: -10rem;
        padding: calc(var(--space-unit) * 0.5) var(--space-unit);
        background: var(--tone-bg);
        color: var(--tone-fg);
    }

    .skip-link:focus {
        top: var(--space-unit);
    }

    :root {
        --site-header-height: 4.5rem;
        --site-utility-height: 2.75rem;
        --site-sidebar-width: 17rem;
        --site-touch: 2.75rem;
        --site-sticky-top: 0rem;
    }

    html[data-sticky-header="true"]:not([data-header="transparent"]) {
        --site-sticky-top: var(--site-header-height);

        scroll-padding-top: calc(var(--site-sticky-top) + var(--space-unit));
    }

    .site-header,
    .site-footer {
        border-color: var(--tone-border);
        border-style: solid;
        border-width: 0;
    }

    .site-header {
        position: relative;
        z-index: 10;
        border-bottom-width: 1px;
        background: var(--tone-bg);
        color: var(--tone-fg);
    }

    html[data-sticky-header="true"]:not([data-header="transparent"]) .site-header {
        position: sticky;
        top: 0;
    }

    .site-utility {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 calc(var(--space-unit) * 1.5);
        height: var(--site-utility-height);
        padding: 0 var(--space-unit);
        overflow: hidden;
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .site-utility-nav .navigation-list,
    .site-utility .site-social {
        flex-wrap: nowrap;
    }

    .site-header-bar {
        display: flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
        min-height: var(--site-header-height);
        padding: calc(var(--space-unit) * 0.5) var(--space-unit);
    }

    .site-header-bar > .site-name {
        margin-right: auto;
    }

    .site-nav {
        font-family: var(--font-ui);
    }

    .site-nav .navigation-list {
        align-items: center;
        column-gap: calc(var(--space-unit) * 1.25);
    }

    .site-nav li {
        position: relative;
    }

    .site-nav .navigation-submenu ul {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        min-width: 12rem;
        padding: calc(var(--space-unit) * 0.5) var(--space-unit);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-surface);
        background: var(--tone-bg);
    }

    .site-nav li:last-child .navigation-submenu ul {
        right: 0;
        left: auto;
    }

    .site-nav a,
    .site-menu-nav a,
    .site-utility-nav a,
    .site-header .site-social a,
    .footer-navigation a,
    .site-footer .site-social a,
    .site-business a,
    .site-menu > summary {
        display: inline-flex;
        align-items: center;
        min-height: var(--site-touch);
    }

    .site-menu > summary {
        position: relative;
        z-index: 2;
        gap: calc(var(--space-unit) * 0.5);
        padding: 0 calc(var(--space-unit) * 0.75);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        background: var(--tone-bg);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        cursor: pointer;
        list-style: none;
    }

    .site-menu > summary::-webkit-details-marker {
        display: none;
    }

    .site-menu > summary::before {
        content: '';
        width: 1.125rem;
        height: 0.125rem;
        margin: 0.375rem 0;
        background: currentcolor;
        box-shadow: 0 -0.375rem currentcolor, 0 0.375rem currentcolor;
    }

    .site-menu[open] > summary::before {
        box-shadow: none;
        transform: rotate(45deg);
    }

    .site-menu-close,
    .site-menu[open] .site-menu-open {
        display: none;
    }

    .site-menu[open] .site-menu-close {
        display: inline;
    }

    .site-menu-panel {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--space-unit) * 1.5);
        padding: calc(var(--site-header-height) + var(--space-unit)) var(--space-unit) calc(var(--space-unit) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .site-menu-nav .navigation-list,
    .site-menu-panel .site-utility-nav .navigation-list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }

    .site-menu-nav {
        font-family: var(--font-heading);
        font-size: 1.25rem;
    }

    .site-menu-nav .navigation-submenu ul {
        padding-left: var(--space-unit);
    }

    .site-footer {
        padding: calc(var(--space-unit) * 2) max(var(--space-unit), (100% - 72rem) / 2);
        border-top-width: 1px;
        color: var(--tone-muted);
    }

    .site-footer > * + * {
        margin-top: calc(var(--space-unit) * 1.25);
    }

    .site-footer-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: calc(var(--space-unit) * 1.5);
    }

    .site-footer-columns ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-footer-title {
        margin: 0;
        font-family: var(--font-ui);
        font-size: 1rem;
        letter-spacing: normal;
        text-transform: none;
    }

    .site-business {
        margin: 0;
        font-style: normal;
    }

    .site-business p {
        margin: 0;
    }

    .site-business-name {
        font-family: var(--font-ui);
        font-weight: 700;
    }

    .site-business-address {
        overflow-wrap: anywhere;
    }

    .site-business-ico {
        font-size: 0.875rem;
    }

    .site-business-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: calc(var(--space-unit) * 1.5);
    }

    html[data-footer='simple'] .site-footer,
    html[data-footer='centered'] .site-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
    }

    html[data-footer='simple'] .site-footer {
        justify-content: space-between;
    }

    html[data-footer='centered'] .site-footer {
        flex-direction: column;
        text-align: center;
    }

    html[data-footer='simple'] .site-footer > *,
    html[data-footer='centered'] .site-footer > * {
        margin: 0;
    }

    .site-footer-bar,
    .site-footer-follow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
    }

    .site-footer-bar {
        justify-content: space-between;
    }

    .site-footer-follow {
        column-gap: var(--space-unit);
    }

    .site-copyright,
    .site-footer-privacy,
    .site-footer-follow-label {
        margin: 0;
    }

    .site-footer-follow-label {
        font-family: var(--font-ui);
    }

    .site-footer-bar .site-social a {
        justify-content: center;
        min-width: var(--site-touch);
    }

    .site-footer-bar .site-social .icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    html[data-footer='centered'] .site-footer .navigation-list,
    html[data-footer='centered'] .site-footer .site-social,
    html[data-footer='centered'] .site-business-contact {
        justify-content: center;
    }

    .site-name {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        color: var(--tone-fg);
        text-decoration: none;
    }

    .site-logo {
        display: block;
        max-width: 100%;
    }

    .site-logo-default {
        display: var(--tone-logo);
    }

    .site-logo-inverse {
        display: var(--tone-logo-inverse);
    }

    main {
        --site-content-width: 72rem;

        position: relative;
        display: grid;
        grid-template-columns: [full-start] minmax(var(--space-unit), 1fr) [content-start] minmax(0, var(--site-content-width)) [content-end] minmax(var(--space-unit), 1fr) [full-end];
        align-content: start;
        padding-block: calc(var(--space-unit) * 1.5);
    }

    main:has(> .page-header:first-child),
    main:has(> :first-child > .block:first-child[data-tone]) {
        padding-top: 0;
    }

    /* The canvas root has display: contents, so its blocks are items of this grid. */
    main > *,
    main > [data-canvas-root] > * {
        grid-column: content;
        min-width: 0;
    }

    .site-to-top {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        grid-column: full;
        align-items: flex-end;
        justify-content: flex-end;
        pointer-events: none;
    }

    .site-to-top-link {
        position: sticky;
        bottom: var(--space-unit);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-right: var(--space-unit);
        border-radius: 50%;
        background: var(--tone-highlight, var(--tone-action));
        color: var(--tone-on-highlight, var(--tone-on-action));
        box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--tone-fg) 24%, transparent);
        pointer-events: auto;
    }

    .page-header {
        position: relative;
        display: grid;
        grid-column: full;
        align-content: end;
        margin-bottom: calc(var(--space-unit) * 2);
        padding: calc(var(--space-unit) * 2.5) var(--space-unit);
        overflow: hidden;
        background-color: var(--tone-bg);
    }

    .page-header-inner {
        position: relative;
        width: 100%;
        max-width: 72rem;
        margin-inline: auto;
    }

    .page-header h1 {
        margin: 0;
    }

    .page-header-lead {
        max-width: 40rem;
        margin: calc(var(--space-unit) * 0.75) 0 0;
        color: var(--tone-muted);
        font-size: 1.125rem;
    }

    .page-header-simple {
        padding-bottom: calc(var(--space-unit) * 1.5);
        border-bottom: 1px solid var(--tone-border);
    }

    .page-header-band {
        padding-block: calc(var(--space-unit) * (var(--section-factor) + 0.5));
    }

    .page-header-cover {
        min-height: min(28rem, 70vh);
        padding-block: calc(var(--space-unit) * 4) calc(var(--space-unit) * 2.5);
    }

    .page-header-cover > .image {
        position: absolute;
        inset: 0;
    }

    .page-header-cover > .image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--tone-bg) 72%, transparent);
    }

    .page-header-cover figcaption {
        position: absolute;
        right: calc(var(--space-unit) * 0.5);
        bottom: calc(var(--space-unit) * 0.25);
        z-index: 1;
    }

    html[data-edges='curve'] .page-header-band,
    html[data-edges='curve'] .page-header-cover {
        border-bottom-left-radius: clamp(1.5rem, 5cqi, 3rem);
        border-bottom-right-radius: clamp(1.5rem, 5cqi, 3rem);
    }

    html[data-edges='curve'] .site-footer {
        border-top-left-radius: clamp(1.5rem, 5cqi, 3rem);
        border-top-right-radius: clamp(1.5rem, 5cqi, 3rem);
    }

    html[data-edges='slant'] .page-header-band,
    html[data-edges='slant'] .page-header-cover {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
    }

    html[data-edges='slant'] .page-header-band {
        padding-bottom: calc(var(--space-unit) * (var(--section-factor) + 0.5) + 2.5rem);
    }

    html[data-edges='slant'] .page-header-cover {
        padding-bottom: calc(var(--space-unit) * 2.5 + 2.5rem);
    }

    html[data-edges='curve'] .page-header-cover figcaption {
        right: calc(var(--space-unit) * 0.5 + clamp(1.5rem, 5cqi, 3rem));
    }

    html[data-edges='slant'] .page-header-cover figcaption {
        bottom: calc(var(--space-unit) * 0.25 + 2.5rem);
    }

    html[data-edges='slant'] .site-footer {
        padding-top: calc(var(--space-unit) * 2 + 2.5rem);
        clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
    }

    html[data-header='transparent'] .site-header {
        position: absolute;
        inset: 0 0 auto;
        border-bottom-width: 0;
        background: transparent;
    }

    html[data-header='transparent'] main {
        padding-top: 0;
    }

    html[data-header='transparent'] main > :first-child {
        padding-top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 1.5);
    }

    html[data-header='transparent'] main > :first-child:has(> .block:first-child[data-tone]) {
        padding-top: 0;
    }

    html[data-header='transparent'] main > :first-child > .block:first-child[data-tone] {
        padding-top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 2);
    }

    html[data-header='transparent'] main > .page-header:first-child {
        padding-top: calc(var(--site-header-offset, var(--site-header-height)) + var(--space-unit) * 2.5);
    }

    @media (max-width: 63.99rem) {
        .site-header-bar > .site-nav,
        .site-utility {
            display: none;
        }
    }

    @media (min-width: 64rem) {
        html:has(.site-utility) {
            --site-header-offset: calc(var(--site-header-height) + var(--site-utility-height));
        }

        html:not([data-header='minimal']) .site-menu {
            display: none;
        }

        html[data-sticky-header="true"]:not([data-header="transparent"]):not([data-header='sidebar']) .site-header:has(> .site-utility) {
            top: calc(var(--site-utility-height) * -1);
        }

        html[data-header='centered'] .site-header-bar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
        }

        html[data-header='centered'] .site-header-bar > .site-name {
            position: relative;
            z-index: 1;
            grid-row: 1;
            grid-column: 2;
            margin: 0;
        }

        html[data-header='centered'] .site-nav {
            display: grid;
            grid-row: 1;
            grid-column: 1 / 4;
            grid-template-columns: subgrid;
        }

        html[data-header='centered'] .site-nav > .navigation-list:last-child {
            grid-column: 3;
            justify-content: flex-end;
        }

        html[data-header='centered'] .site-nav > .navigation-list:first-child {
            grid-column: 1;
            justify-content: flex-start;
        }

        html[data-header='centered'] .site-header-bar > .site-action {
            grid-row: 1;
            grid-column: 4;
        }

        html[data-header='sidebar'] body {
            display: grid;
            grid-template-columns: var(--site-sidebar-width) minmax(0, 1fr);
            grid-template-rows: 1fr auto;
            min-height: 100vh;
        }

        html[data-header='sidebar'] .site-header {
            grid-row: 1 / -1;
            grid-column: 1;
            border-bottom-width: 0;
            border-right-width: 1px;
        }

        html[data-header='sidebar'][data-sticky-header="true"] {
            --site-sticky-top: 0rem;
        }

        html[data-header='sidebar'][data-sticky-header="true"] .site-header {
            position: relative;
            top: auto;
        }

        html[data-header='sidebar'] main,
        html[data-header='sidebar'] .site-footer {
            grid-column: 2;
        }

        html[data-header='sidebar'] .site-utility {
            flex-direction: column;
            align-items: flex-start;
            height: auto;
            padding-block: calc(var(--space-unit) * 0.5);
        }

        html[data-header='sidebar'] .site-utility .navigation-list,
        html[data-header='sidebar'] .site-utility .site-social {
            flex-wrap: wrap;
        }

        .site-sidebar {
            flex-direction: column;
            align-items: flex-start;
            padding-block: calc(var(--space-unit) * 1.5);
        }

        html[data-sticky-header="true"] .site-sidebar {
            position: sticky;
            top: 0;
            max-height: 100vh;
            overflow-y: auto;
        }

        .site-sidebar > .site-name {
            margin-right: 0;
        }

        .site-sidebar .site-nav .navigation-list {
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
        }

        .site-sidebar .site-nav .navigation-submenu ul {
            position: static;
            border: 0;
            padding-block: 0;
        }
    }

    .navigation-list,
    .site-social,
    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.25) var(--space-unit);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav a,
    .site-menu-nav a,
    .site-utility-nav a,
    .footer-navigation a,
    .site-business a,
    .site-social a {
        color: var(--tone-fg);
    }

    .site-social a {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--space-unit) * 0.375);
    }

    .site-nav a[aria-current='page'],
    .site-menu-nav a[aria-current='page'],
    .footer-navigation a[aria-current='page'] {
        font-weight: 700;
    }

    .navigation-submenu summary {
        min-height: var(--site-touch);
        line-height: var(--site-touch);
        cursor: pointer;
        font-family: var(--font-ui);
        font-size: 0.875rem;
        color: var(--tone-muted);
    }

    .navigation-submenu ul {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        padding: 0 0 0 var(--space-unit);
        list-style: none;
    }

    .breadcrumbs {
        margin: 0 0 var(--space-unit);
        font-size: 0.875rem;
        color: var(--tone-muted);
    }

    .breadcrumbs li + li::before {
        content: '/';
        margin-right: var(--space-unit);
    }

    .breadcrumbs [aria-current='page'] {
        color: var(--tone-fg);
    }

    .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: calc(var(--space-unit) * 0.5) var(--space-unit);
        margin: calc(var(--space-unit) * 2) 0 0;
        font-family: var(--font-ui);
    }

    .pagination-status {
        color: var(--tone-muted);
    }

    .not-found {
        padding: calc(var(--space-unit) * 2) 0;
    }

    .not-found h1 {
        margin-top: 0;
    }
}

@layer components {
    .not-found {
        text-align: center;
    }

    .not-found-code {
        color: var(--tone-muted);
        font-family: var(--font-heading);
        font-size: 6rem;
        font-weight: 700;
        line-height: 1;
    }

    .not-found-menu {
        margin: calc(var(--space-unit) * 2) 0 0;
        font-family: var(--font-ui);
    }

    .not-found-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.25);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .account-zone {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 2);
        padding: calc(var(--space-unit) * 2) 0;
    }

    .account-sidebar {
        flex: 1 1 14rem;
        font-family: var(--font-ui);
    }

    .account-sidebar ul {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: 0;
        list-style: none;
    }

    .account-sidebar a[aria-current='page'] {
        font-weight: 700;
    }

    .account-nav {
        margin: 0;
    }

    .account-settings {
        padding-top: calc(var(--space-unit) * 1.5);
        border-top: 1px solid var(--tone-border);
    }

    .account-identity {
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .account-form {
        max-width: 28rem;
    }

    .account-data {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0 0 calc(var(--space-unit) * 1.5);
        padding: 0;
        list-style: none;
    }

    .account-content {
        flex: 999 1 24rem;
        min-width: 0;
    }

    .account-badge {
        display: inline-block;
        min-width: 1.5em;
        padding: 0 0.4em;
        border-radius: var(--radius-control);
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-ui);
        font-size: 0.875rem;
        font-weight: 700;
        text-align: center;
    }

    .account-logout {
        margin: 0;
    }

    .account-login {
        max-width: 28rem;
        padding: calc(var(--space-unit) * 2) 0;
    }

    .account-login-google {
        margin: calc(var(--space-unit) * 1.5) 0 0;
        padding: calc(var(--space-unit) * 1.5) 0 0;
        border-top: 1px solid var(--tone-border);
    }

    .account-login-google-button {
        display: inline-flex;
        gap: calc(var(--space-unit) * 0.5);
        align-items: center;
    }

    .account-login-links {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: calc(var(--space-unit) * 1.5) 0 0;
        padding: 0;
        list-style: none;
        font-family: var(--font-ui);
    }

    .field-check label {
        display: flex;
        gap: calc(var(--space-unit) * 0.5);
        align-items: center;
    }

    .button {
        display: inline-block;
        padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.25);
        border: 0.125rem solid var(--tone-action);
        border-radius: var(--radius-control);
        background: var(--tone-action);
        color: var(--tone-on-action);
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        hyphens: manual;
        vertical-align: middle;
        cursor: pointer;
        appearance: none;
    }

    .button-secondary,
    [data-buttons='outline'] .button {
        background: transparent;
        color: var(--tone-link);
    }

    [data-buttons='outline'] .button:not(.button-secondary):hover {
        background: var(--tone-action);
        color: var(--tone-on-action);
    }

    .button-secondary:hover {
        text-decoration: underline;
    }

    .field {
        max-width: 40rem;
        margin: 0 0 var(--space-unit);
    }

    .field label {
        display: block;
        margin-bottom: calc(var(--space-unit) * 0.25);
    }

    .field input:where(:not([type='checkbox'], [type='radio'])),
    .field select,
    .field textarea {
        width: 100%;
        max-width: 100%;
        padding: calc(var(--space-unit) * 0.5);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        background: var(--tone-bg);
        color: var(--tone-fg);
    }

    .field-invalid input,
    .field-invalid select,
    .field-invalid textarea {
        border-color: var(--role-danger);
    }

    .field-errors {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        padding: 0;
        list-style: none;
        color: var(--role-danger);
    }

    .field-help {
        margin: calc(var(--space-unit) * 0.25) 0 0;
        color: var(--tone-muted);
        font-size: 0.875rem;
    }

    .gallery-signature {
        color: var(--tone-muted);
    }

    .flash {
        max-width: 40rem;
        margin: 0 0 var(--space-unit);
        padding: calc(var(--space-unit) * 0.75) var(--space-unit);
        border-left: 0.25rem solid var(--tone-accent);
        border-radius: var(--radius-surface);
        background: var(--tone-card);
        color: var(--tone-fg);
    }

    .flash-info,
    .flash-warning {
        border-left-color: var(--tone-accent);
    }

    .flash-success {
        border-left-color: var(--role-success);
    }

    .flash-danger {
        border-left-color: var(--role-danger);
    }

    .image {
        margin: 0;
    }

    .image img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-surface);
    }

    .page-header-cover > .image img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: cover;
    }

    .site-action {
        display: inline-flex;
        align-items: center;
        min-height: var(--site-touch);
    }

    @media (max-width: 63.99rem) {
        .site-header-bar > .site-action {
            display: none;
        }
    }

    .site-logo .image img {
        width: auto;
        max-width: 100%;
        height: 2.5rem;
        border-radius: 0;
    }

    .image-square img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .image-landscape img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .image-wide img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .image-portrait img {
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

    img[data-focus='top-left'] {
        object-position: 0 0;
    }

    img[data-focus='top'] {
        object-position: 50% 0;
    }

    img[data-focus='top-right'] {
        object-position: 100% 0;
    }

    img[data-focus='left'] {
        object-position: 0 50%;
    }

    img[data-focus='right'] {
        object-position: 100% 50%;
    }

    img[data-focus='bottom-left'] {
        object-position: 0 100%;
    }

    img[data-focus='bottom'] {
        object-position: 50% 100%;
    }

    img[data-focus='bottom-right'] {
        object-position: 100% 100%;
    }

    .image figcaption {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 calc(var(--space-unit) * 0.75);
        margin-top: calc(var(--space-unit) * 0.5);
    }

    .image-caption,
    .image-credit {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .image-ai {
        padding: 0 calc(var(--space-unit) * 0.375);
        border: 1px solid var(--tone-border);
        border-radius: var(--radius-control);
        color: var(--tone-fg);
        font-family: var(--font-ui);
        font-size: 0.75rem;
    }

    [data-photos='duotone'] .image:not(.site-logo .image) {
        background: var(--tone-action);
        isolation: isolate;
    }

    [data-photos='duotone'] .image:not(.site-logo .image) img {
        filter: grayscale(1) contrast(1.15) brightness(1.15);
        mix-blend-mode: screen;
    }

    /* A filter paints only the pixels of the photo, so rounded corners, a round avatar and the caption stay off the colour.
       Each shadow lays the colour under the faded photo again and closes its alpha: 0.6, 0.84, 0.97, then above 0.999. */
    [data-photos='tint'] .image:not(.site-logo .image) img {
        filter: grayscale(1) contrast(1.05) opacity(0.6) drop-shadow(0 0 0 var(--tone-action)) drop-shadow(0 0 0 var(--tone-action)) drop-shadow(0 0 0 var(--tone-action));
    }

    [data-photos='mono'] .image:not(.site-logo .image) img {
        filter: grayscale(1) contrast(1.05);
    }

    [data-surfaces='gradient'] [data-tone='brand'],
    [data-surfaces='gradient'] [data-tone='inverse'],
    [data-surfaces='gradient'] [data-tone='highlight'],
    [data-surfaces='gradient'] .page-header-band {
        background-image: linear-gradient(160deg, color-mix(in srgb, var(--tone-bg) 82%, var(--tone-surface-accent, var(--tone-accent))), var(--tone-bg));
    }

    [data-surfaces='glow'] [data-tone='brand'],
    [data-surfaces='glow'] [data-tone='inverse'],
    [data-surfaces='glow'] [data-tone='highlight'],
    [data-surfaces='glow'] .page-header-band {
        background-image:
            radial-gradient(circle at 0 0, color-mix(in srgb, var(--tone-surface-accent, var(--tone-accent)) 22%, transparent), transparent 40%),
            radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--tone-surface-accent, var(--tone-accent)) 22%, transparent), transparent 40%);
    }

    [data-texture='grain'] .block[data-tone],
    [data-texture='grain'] .page-header,
    [data-texture='grain'] .site-footer {
        position: relative;
        isolation: isolate;
    }

    /* Percent-encoded so the data URI holds no "#", ";" or second "url(": the style rules count every "url(" of the core. */
    [data-texture='grain'] .block[data-tone]::before,
    [data-texture='grain'] .page-header::before,
    [data-texture='grain'] .site-footer::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
        background-size: 12rem;
        pointer-events: none;
    }

    .card {
        padding: calc(var(--space-unit) * 1.25);
        border: 1px solid transparent;
        border-radius: var(--radius-surface);
        color: var(--tone-fg);
    }

    [data-cards='filled'] .card {
        background: var(--tone-card);
    }

    [data-cards='outline'] .card {
        background: transparent;
        border-color: var(--tone-border);
    }

    [data-cards='raised'] .card {
        background: var(--tone-bg);
        box-shadow: 0 0.125rem 0.75rem color-mix(in srgb, var(--tone-fg) 14%, transparent);
    }

    [data-tone='brand'] .card,
    [data-tone='inverse'] .card,
    [data-tone='highlight'] .card,
    [data-tone='image'] .card {
        border-color: var(--tone-border);
    }

    .eyebrow {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        color: var(--tone-eyebrow);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    [data-eyebrow='caps'] .eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    [data-eyebrow='italic'] .eyebrow {
        font-family: var(--font-heading);
        font-size: 1rem;
        font-style: italic;
    }

    [data-eyebrow='dot'] .eyebrow::before {
        content: '';
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.5em;
        border-radius: 50%;
        background: var(--tone-accent);
    }

    .rich-text {
        max-width: 40rem;
    }

    .rich-text > :first-child {
        margin-top: 0;
    }

    .rich-text > :last-child {
        margin-bottom: 0;
    }

    .rich-text p,
    .rich-text ul,
    .rich-text ol {
        margin: 0 0 var(--space-unit);
    }

    .rich-text ul,
    .rich-text ol {
        padding-left: calc(var(--space-unit) * 1.5);
    }

    .rich-text li + li {
        margin-top: calc(var(--space-unit) * 0.25);
    }

    /* A round theme gives controls a pill radius, which would turn the square badge into a circle. */
    .date-badge {
        display: grid;
        flex: none;
        inline-size: 6.5rem;
        min-block-size: 6.5rem;
        margin: 0;
        overflow: hidden;
        border: 0.125rem solid var(--tone-action);
        border-radius: min(var(--radius-surface), 0.875rem);
        box-shadow: 0 0.1875rem 0 var(--tone-action);
        background: var(--tone-bg);
        color: var(--tone-fg);
        text-align: center;
    }

    .date-badge-face {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .date-badge-head {
        display: block;
        padding: calc(var(--space-unit) * 0.25);
        background: var(--tone-action);
        color: var(--tone-action-accent);
        font-family: var(--font-ui);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .date-badge-body {
        display: grid;
        align-content: center;
        padding: calc(var(--space-unit) * 0.375) calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.125);
        font-family: var(--font-heading);
        font-weight: var(--heading-weight);
        font-size: 1.75rem;
        line-height: 1;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .date-badge-date,
    .date-badge-until {
        display: block;
    }

    .date-badge[data-kind='months'] .date-badge-body,
    .date-badge[data-kind='years'] .date-badge-body {
        font-size: 1.125rem;
    }

    .date-badge-until {
        margin-block: calc(var(--space-unit) * 0.125);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.6875rem;
        font-weight: normal;
    }

    .date-badge-foot {
        display: block;
        padding: 0 calc(var(--space-unit) * 0.25) calc(var(--space-unit) * 0.375);
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.6875rem;
    }

    .date-badge[data-kind='undated'] {
        border-style: dashed;
        box-shadow: none;
    }

    .date-badge[data-kind='undated'] .date-badge-head {
        background: var(--tone-card);
        color: var(--tone-fg);
    }

    .date-badge-label {
        font-family: var(--font-ui);
    }

    @media (prefers-reduced-motion: no-preference) {
        html[data-motion='subtle'] {
            scroll-behavior: smooth;
        }

        html[data-motion='subtle'] .card {
            transition: translate 0.25s ease-out, box-shadow 0.25s ease-out;
        }

        html[data-motion='subtle'] .card:hover {
            translate: 0 -0.1875rem;
            box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--tone-fg) 22%, transparent);
        }

        html[data-motion='subtle'] .date-badge {
            transform-origin: top center;
            transition: rotate 0.25s ease-out;
        }

        html[data-motion='subtle'] .card:hover .date-badge {
            rotate: -4deg;
        }

        html[data-motion='subtle'] .button {
            transition: translate 0.2s ease-out, box-shadow 0.2s ease-out;
        }

        html[data-motion='subtle'] .button:hover {
            translate: 0 -0.0625rem;
            box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--tone-fg) 18%, transparent);
        }

        @supports (animation-timeline: view()) {
            @keyframes motion-rise {
                from {
                    translate: 0 1.125rem;
                }
            }

            @keyframes motion-unveil {
                from {
                    clip-path: inset(0 0 14% 0);
                    scale: 1.04;
                }
            }

            @keyframes motion-slide {
                from {
                    translate: -2rem 0;
                }
            }

            @keyframes motion-soft {
                from {
                    translate: 0 0.5rem;
                    scale: 0.985;
                }
            }

            /* A linked picture is clipped by its link, as the figure would clip the focus outline of the link. */
            html[data-motion='subtle'] main > .block:first-child .image:not(:has(> a)),
            html[data-motion='subtle'] main > :first-child > .block:first-child .image:not(:has(> a)),
            html[data-motion='subtle'] main > .block:first-child .image > a,
            html[data-motion='subtle'] main > :first-child > .block:first-child .image > a {
                display: block;
                overflow: clip;
            }

            html[data-motion='subtle'] main > .block:first-child .image img,
            html[data-motion='subtle'] main > :first-child > .block:first-child .image img,
            html[data-motion='subtle'] main .block[data-tone]:not(main > .block:first-child, main > :first-child > .block:first-child),
            html[data-motion='subtle'] .block-grid > * {
                animation: motion-rise linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 60%;
            }

            html[data-motion='subtle'] .block-grid > :nth-child(2) {
                animation-range: entry 0% entry 70%;
            }

            html[data-motion='subtle'] .block-grid > :nth-child(3) {
                animation-range: entry 0% entry 80%;
            }

            html[data-motion='subtle'] .block-grid > :nth-child(n + 4) {
                animation-range: entry 0% entry 90%;
            }

            html[data-motion='subtle'][data-motion-signature='unveil'] main > .block:first-child .image img,
            html[data-motion='subtle'][data-motion-signature='unveil'] main > :first-child > .block:first-child .image img,
            html[data-motion='subtle'][data-motion-signature='slide'] main > .block:first-child .image img,
            html[data-motion='subtle'][data-motion-signature='slide'] main > :first-child > .block:first-child .image img {
                animation-name: motion-unveil;
            }

            html[data-motion='subtle'][data-motion-signature='slide'] main .block[data-tone]:not(main > .block:first-child, main > :first-child > .block:first-child) {
                animation-name: motion-slide;
            }

            html[data-motion='subtle'][data-motion-signature='soft'] .block-grid > * {
                animation-name: motion-soft;
            }
        }

        @supports (animation-timeline: scroll()) {
            @keyframes site-header-shrink {
                to {
                    min-height: calc(var(--site-header-height) * 0.84);
                    padding-block: calc(var(--space-unit) * 0.25);
                }
            }

            @keyframes site-header-shadow {
                to {
                    box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--tone-fg) 16%, transparent);
                }
            }

            @keyframes site-to-top-appear {
                from {
                    opacity: 0;
                    visibility: hidden;
                }
            }

            html[data-motion='subtle'][data-sticky-header="true"]:not([data-header="transparent"]):not([data-header='sidebar']) .site-header-bar {
                animation: site-header-shrink linear both;
                animation-timeline: scroll(root);
                animation-range: 0 2.5rem;
            }

            html[data-motion='subtle'][data-sticky-header="true"]:not([data-header="transparent"]):not([data-header='sidebar']) .site-header {
                animation: site-header-shadow linear both;
                animation-timeline: scroll(root);
                animation-range: 0 2.5rem;
            }

            html[data-motion='subtle'] .site-to-top-link {
                animation: site-to-top-appear linear both;
                animation-timeline: scroll(root);
                animation-range: 30rem 37.5rem;
            }

            /* The base tone of @layer base again: a keyframe cannot borrow a selector. Unregistered properties flip at 50%. */
            @keyframes site-header-fill {
                to {
                    --tone-bg: var(--role-surface);
                    --tone-fg: var(--role-on-surface);
                    --tone-muted: var(--role-muted);
                    --tone-border: var(--role-border);
                    --tone-accent: var(--role-accent);
                    --tone-action: var(--role-primary);
                    --tone-on-action: var(--role-on-primary);
                    --tone-action-accent: var(--brand-highlight, var(--role-on-primary));
                    --tone-eyebrow: var(--role-muted);
                    --tone-card: var(--role-surface-alt);
                    --tone-link: var(--role-primary);
                    --tone-ring: var(--role-ring);
                    --tone-logo: var(--scheme-logo);
                    --tone-logo-inverse: var(--scheme-logo-inverse);
                    background: var(--tone-bg);
                    box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--tone-fg) 16%, transparent);
                }
            }

            html[data-motion='subtle'][data-header='transparent'][data-sticky-header='true'] {
                --site-sticky-top: var(--site-header-offset, var(--site-header-height));

                scroll-padding-top: var(--site-sticky-top);
            }

            html[data-motion='subtle'][data-header='transparent'][data-sticky-header='true'] .site-header {
                position: fixed;
                animation: site-header-fill linear both;
                animation-timeline: scroll(root);
                animation-range: 0 6rem;
            }
        }

        @view-transition {
            navigation: auto;
        }

        .site-header {
            view-transition-name: site-header;
        }

        html:not([data-motion='subtle'])::view-transition-group(*),
        html:not([data-motion='subtle'])::view-transition-old(*),
        html:not([data-motion='subtle'])::view-transition-new(*) {
            animation: none;
        }
    }
}

@layer blocks {
    .block {
        container-type: inline-size;
        margin: 0 0 calc(var(--space-unit) * var(--section-factor));
        overflow-wrap: anywhere;
    }

    .block:last-child,
    .block:has(+ .site-to-top:last-child) {
        margin-bottom: 0;
    }

    .block[data-tone] {
        border-radius: var(--radius-surface);
    }

    .block[data-width='narrow'] {
        margin-inline: auto;
        width: 100%;
        max-width: 42rem;
    }

    main > .block[data-width='wide'],
    main > [data-canvas-root] > .block[data-width='wide'] {
        grid-column: full;
    }

    /* :where() keeps the weight of .image img, so the shape a block type gives its image, a round avatar, stays. */
    :where(main > .block[data-width='wide']:not([data-tone]), main > [data-canvas-root] > .block[data-width='wide']:not([data-tone])) .image img {
        border-radius: 0;
    }

    :where(main > .block[data-width='wide']:not([data-tone]), main > [data-canvas-root] > .block[data-width='wide']:not([data-tone])) .image figcaption {
        /* Only under an image at least a quarter as wide as its container: the caption of an avatar keeps its width. */
        margin-inline: clamp(0rem, (100% - 25cqi) * 100, var(--space-unit));
    }

    main > .block[data-width='wide'][data-tone],
    main > [data-canvas-root] > .block[data-width='wide'][data-tone] {
        padding-inline: max(var(--space-unit), (100% - 90rem) / 2);
        border-radius: 0;
    }

    html[data-edges='curve'] main > .block:first-child[data-tone],
    html[data-edges='curve'] main > :first-child > .block:first-child[data-tone] {
        border-bottom-left-radius: clamp(1.5rem, 5cqi, 3rem);
        border-bottom-right-radius: clamp(1.5rem, 5cqi, 3rem);
    }

    /* :where() lets a variant that sets its own padding win; the canvas is left out, the cut would crop its selection. */
    html[data-edges='slant'] :where(main > .block:first-child[data-tone], main > :first-child:not([data-canvas-root]) > .block:first-child[data-tone]) {
        padding-bottom: calc(var(--space-unit) * var(--section-factor) * 2 / 3 + 2.5rem);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
    }

    .block-title {
        margin: 0 0 var(--space-unit);
    }

    /* The selector outweighs .hero-accent of cms in this same layer, which sets only the colour of the accent. */
    [data-heading-accent='underline'] :is(h1, h2, h3) em {
        text-decoration: underline 0.12em var(--tone-accent);
        text-underline-offset: 0.12em;
        text-decoration-skip-ink: none;
    }

    [data-heading-accent='highlight'] :is(h1, h2, h3) em {
        padding-inline: 0.15em;
        border-radius: var(--radius-control);
        background: var(--tone-highlight, var(--tone-action));
        color: var(--tone-on-highlight, var(--tone-on-action));
        box-decoration-break: clone;
    }

    .block-actions {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 0.75);
        margin: calc(var(--space-unit) * 1.5) 0 0;
    }

    .block-grid {
        --block-grid-min: 16rem;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--block-grid-min)), 1fr));
        gap: calc(var(--space-unit) * 1.5);
        margin: 0;
        padding: 0;
        list-style: none;
    }
}