:root {
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
    --neutral-50: hsl(0 0% 98%);
    --neutral-100: hsl(0 0% 94%);
    --neutral-150: hsl(0 0% 92%);
    --neutral-200: hsl(0 0% 89%);
    --neutral-300: hsl(0 0% 80%);
    --neutral-400: hsl(0 0% 57%);
    --neutral-500: hsl(0 0% 50%);
    --neutral-600: hsl(0 0% 38%);
    --neutral-700: hsl(0 0% 27%);
    --neutral-750: hsl(0 0% 25%);
    --neutral-800: hsl(0 0% 24%);
    --neutral-900: hsl(0 0% 10%);
    --neutral-950: hsl(0 0% 0%);
    --teal-450: hsl(191 35% 47%);
    --teal-500: hsl(191 35% 50%);
    --teal-600: hsl(191 35% 40%);
    --teal-700: hsl(191 35% 36%);
    --white: hsl(0 0% 100%);
    --red-425: #ce0500;
    --red-950: #ffe9e9;
    --green-425: #18753c;
    --green-525: #1f8d49;
    --green-950: #b8fec9;
    --amber-600: hsl(38 100% 40%);
    --amber-800: hsl(38 100% 30%);
    --amber-950: hsl(38 100% 92%);
    --blue-425: #0063cb;
    --blue-525: #0078f3;
    --blue-950: #e8edff;
    --olive-500: #6b8e23;
    --gold-500: #b8860b;
    --gold-450: #bba167;
    --slate-500: #6a5acd;
    --brown-600: #8b5a2b;
    --indigo-600: #3949ab;
    --salmon-500: #fa8072;
    --surface-muted: var(--neutral-100);
    --surface-neutral: var(--neutral-150);
    --surface-backdrop: var(--neutral-700);
    --surface-panel: var(--neutral-800);
    --surface-inverse: var(--neutral-950);
    --surface-brand: var(--teal-500);
    --surface-raised: var(--white);
    --action-primary: var(--neutral-900);
    --action-brand: var(--teal-600);
    --action-danger: var(--red-425);
    --status-warning: var(--amber-600);
    --status-warning-text: var(--amber-800);
    --status-warning-surface: var(--amber-950);
    --status-success: var(--green-525);
    --status-success-text: var(--green-425);
    --status-success-surface: var(--green-950);
    --status-danger: var(--red-425);
    --status-danger-surface: var(--red-950);
    --status-info: var(--blue-525);
    --status-info-text: var(--blue-425);
    --status-info-surface: var(--blue-950);
    --status-neutral: var(--neutral-600);
    --status-archived: var(--neutral-800);
    --entity-event: var(--teal-600);
    --entity-activity: var(--olive-500);
    --entity-organization: var(--gold-500);
    --entity-document: var(--slate-500);
    --entity-domain: var(--neutral-950);
    --entity-location: var(--brown-600);
    --entity-visibility: var(--indigo-600);
    --entity-mention: var(--salmon-500);
    --action-neutral: var(--neutral-150);
    --action-disabled: var(--neutral-300);
    --text-on-inverse: var(--white);
    --text-on-inverse-subtle: var(--neutral-400);
    --text-link: var(--teal-700);
    --text-on-field: var(--neutral-750);
    --text-on-field-subtle: var(--neutral-600);
    --border-subtle: var(--neutral-200);
    --border-field: var(--neutral-500);
    --border-strong: var(--neutral-950);
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
    --measure: 50rem;
    --header-height: 4rem;
    --footer-height: 3rem;
    --control-lg: 3.25rem;
    --control-md: 2.75rem;
    --control-xs: 1.5rem;
    --icon-md: 2rem;
    --icon-sm: 1.25rem;
    --font-size-title: 2rem;
    --font-size-title-sm: 1.5rem;
    --font-size-heading: 1.375rem;
    --font-size-label: 1.25rem;
    --font-size-body: 1rem;
    --font-size-lead: 1.25rem;
    --font-size-body-sm: 0.875rem;
    --font-size-caption: 0.8125rem;
    --font-size-overline: 0.75rem;

    --transition-duration: 300ms;
    --transition-timing: ease;

    --popover-backdrop-color: color-mix(in oklab, var(--surface-backdrop) 60%, transparent);
    --facet-shadow: 0.125rem 0 0.625rem color-mix(in oklab, var(--surface-inverse) 10%, transparent);

    --z-overlay: 1000;

    --side-nav-highlight: var(--action-selected);

    --manage-table-row-block-size: 3.25rem;

    --layout-side: clamp(16rem, calc((100cqi - 32rem) / 2), 20rem);
    --layout-centre: calc(100cqi - 2 * var(--layout-side));
    --layout-gutter: clamp(1rem, calc(1rem + (var(--layout-centre) - 32rem) / 4), 2rem);
    --layout-inset: calc(var(--layout-side) + var(--layout-gutter));
}
* { --text-on-colour: lch(from var(--fill) calc((49.5 - l) * infinity) 0 0) }

* { font-family: 'Inter', sans-serif }
*, *::before, *::after { box-sizing: border-box }
header, footer, main, section, article { container-type: inline-size }
fieldset { border: 0 }
h1, h2, h3, h4, h5, h6 { text-wrap: balance }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--text-primary) var(--surface-page);

    @media (prefers-reduced-motion: reduce) { scroll-behavior: auto }
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--surface-page);
    color: var(--text-primary);
}

p, li, caption {
    text-wrap: pretty;
    max-width: 65ch;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow Condensed', sans-serif;
    font-synthesis: none;
    text-transform: uppercase;
}

a {
    color: inherit;
    text-decoration: none;
}

:where(a, button, summary, input:is([type="checkbox"], [type="radio"]), [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-outline-width) solid var(--border-focus);
    outline-offset: var(--focus-outline-offset);
}

[tabindex="-1"]:focus { outline: none }

button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

ul, ol, li, menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity var(--transition-duration) var(--transition-timing);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.link-external { white-space: nowrap }

.skip-link {
    position: absolute;
    transform: translateY(-200%);
    --fill: var(--action-brand);

    background: var(--fill);
    color: var(--text-on-colour);
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    z-index: 2000;

    &:focus-visible {
        transform: translateY(0);
    }
}