@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-card: var(--role-surface-alt);
        --tone-link: var(--role-primary);
        --tone-ring: var(--role-ring);
    }

    [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-card: var(--role-surface);
        --tone-link: var(--role-primary);
        --tone-ring: var(--role-ring);
    }

    [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(--role-on-primary);
        --tone-action: var(--role-on-primary);
        --tone-on-action: var(--role-primary);
        --tone-card: transparent;
        --tone-link: var(--role-on-primary);
        --tone-ring: var(--role-on-primary);
    }

    [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(--role-inverse-accent);
        --tone-action: var(--role-on-inverse);
        --tone-on-action: var(--role-inverse);
        --tone-card: transparent;
        --tone-link: var(--role-on-inverse);
        --tone-ring: var(--role-on-inverse);
    }

    /* 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-link: var(--role-primary);
        --tone-ring: var(--role-ring);
    }

    @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-link: var(--role-primary);
            --tone-ring: var(--role-ring);
        }
    }

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

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

    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);
        text-transform: var(--heading-transform);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    h1 {
        font-size: clamp(1.75rem, 1.25rem + 2.5cqi, 2.75rem);
    }

    h2 {
        font-size: clamp(1.375rem, 1.125rem + 1.25cqi, 2rem);
    }

    h3 {
        font-size: clamp(1.125rem, 1rem + 0.625cqi, 1.375rem);
    }

    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;
    }

    html[data-sticky-header="true"]:not([data-header="transparent"]) {
        scroll-padding-top: calc(var(--site-header-height) + 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-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%;
    }

    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) {
        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-action);
        color: 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) * 3.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-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-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;
    }

    .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;
        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;
    }

    .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;
    }

    .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;
    }

    .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='image'] .card {
        border-color: var(--tone-border);
    }

    .eyebrow {
        margin: 0 0 calc(var(--space-unit) * 0.5);
        color: var(--tone-muted);
        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);
    }

    .date-badge {
        display: grid;
        flex: none;
        inline-size: 6.5rem;
        margin: 0;
        overflow: hidden;
        border: 0.125rem solid var(--tone-action);
        border-radius: var(--radius-control);
        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;
    }

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

    .date-badge-body {
        display: block;
        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;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .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;
        }

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

            html[data-motion='subtle'] .block {
                animation: block-reveal linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 60%;
            }
        }

        @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;
            }
        }
    }
}

@layer blocks {
    .block {
        container-type: inline-size;
        margin: 0 0 calc(var(--space-unit) * 3);
        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-title {
        margin: 0 0 var(--space-unit);
    }

    .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;
    }
}