/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-border-style: solid
        }
    }
}

:root {
    color-scheme: light dark;
    hanging-punctuation: first allow-end last;
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased
}

@view-transition {
    navigation: auto
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer custom {

    *,
    :before,
    :after {
        box-sizing: border-box
    }

    * {
        margin: 0
    }

    body {
        -webkit-font-smoothing: antialiased;
        line-height: 1.6
    }

    img,
    picture,
    video,
    canvas {
        max-width: 100%;
        display: block
    }

    input,
    button,
    textarea,
    select {
        font: inherit
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word
    }

    #root,
    #__next {
        isolation: isolate
    }

    ul,
    ol {
        padding: 0;
        list-style: none
    }

    .animate {
        opacity: 0;
        transition: opacity .3s ease-out, transform .3s ease-out;
        transform: translateY(3rem)
    }

    .animate.visible {
        opacity: 1;
        transform: translateY(0)
    }

    .badge {
        background-color: var(--beige-200);
        border-radius: calc(var(--spacing)*99);
        color: var(--primary);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-tight);
        padding-inline: calc(var(--spacing)*1.5);
        white-space: nowrap;
        text-decoration: none
    }

    .card {
        background-color: var(--beige-400);
        color: var(--grey-900);
        flex-direction: column;
        align-items: start;
        width: 100%;
        text-decoration-color: #0000;
        display: flex
    }

    .card img {
        transition: all .5s ease-in-out
    }

    .card:hover,
    .card:active {
        background-color: var(--beige-500);
        box-shadow: var(--shadow-xs);
        text-decoration-color: #0000
    }

    .comments {
        max-width: var(--container-3xl);
        row-gap: calc(var(--spacing)*4);
        flex-direction: column;
        width: 100%;
        margin-inline: auto;
        display: flex
    }

    .cc-w-i {
        flex-direction: column;
        display: flex
    }

    .cc-w-i .cc-i {
        border-block-start: 1px solid var(--beige-600);
        margin-block-start: calc(var(--spacing)*4);
        padding-block-start: calc(var(--spacing)*4)
    }

    .cc-f-m {
        background-color: var(--grey-50);
        padding: calc(var(--spacing)*4)
    }

    .cc-f-wrap {
        row-gap: 0
    }

    .cc-n {
        margin-block: calc(var(--spacing)*1)
    }

    .cc-w-h {
        margin-block-end: calc(var(--spacing)*2)
    }

    .cc-sub {
        align-items: center;
        column-gap: var(--spacing);
        font-size: var(--text-xs);
        margin-inline: var(--spacing);
        display: flex
    }

    .cc-sub .cc-icon svg {
        height: calc(var(--spacing)*3)
    }

    .cc-sub .cc-icon-check svg {
        opacity: 0
    }

    .cc-sub.is-subscribed {
        color: var(--success)
    }

    .cc-sub.is-subscribed .cc-icon-check svg {
        opacity: 1
    }

    .cc-f-btn {
        background-color: var(--grey-900);
        border: 1px solid var(--grey-900);
        color: var(--white);
        cursor: pointer;
        font-size: var(--text-xs);
        align-items: center;
        gap: var(--spacing);
        height: calc(var(--spacing)*11);
        letter-spacing: var(--tracking-wider);
        padding: calc(var(--spacing)*1) calc(var(--spacing)*6) calc(var(--spacing)*1);
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
        text-wrap: nowrap;
        justify-content: center;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s;
        display: inline-flex
    }

    .cc-f-btn:hover {
        background-color: var(--grey-800);
        border-color: var(--grey-800);
        color: var(--grey-50)
    }

    .cc-w {
        row-gap: calc(var(--spacing)*6);
        flex-direction: column;
        display: flex
    }

    .cc-w .cc-v {
        align-items: center;
        column-gap: calc(var(--spacing)*2);
        display: flex
    }

    .cc-w .cc-v form {
        justify-content: center
    }

    .cc-w .cc-v form button {
        display: flex
    }

    .cc-w .cc-v .cc-v-up:after {
        content: "";
        height: calc(var(--spacing)*3);
        width: calc(var(--spacing)*3);
        background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m4.5%2015.75%207.5-7.5%207.5%207.5%22%20%2F%3E%3C%2Fsvg%3E) 50% no-repeat;
        display: inline-flex
    }

    .cc-w .cc-v .cc-v-down:after {
        content: "";
        height: calc(var(--spacing)*3);
        width: calc(var(--spacing)*3);
        background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22m19.5%208.25-7.5%207.5-7.5-7.5%22%20%2F%3E%3C%2Fsvg%3E) 50% no-repeat;
        display: inline-flex
    }

    .cc-i-wrap .cc-i-content {
        row-gap: calc(var(--spacing)*2);
        flex-direction: column;
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-header {
        align-items: baseline;
        column-gap: calc(var(--spacing)*2);
        border: none;
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-header [itemprop=creator] {
        align-items: flex-end;
        column-gap: calc(var(--spacing)*2);
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-header [itemprop=creator] .cc-icon-right-arrow {
        color: var(--grey-600);
        height: calc(var(--spacing)*3);
        width: calc(var(--spacing)*3);
        margin-block-end: calc(var(--spacing)*.5)
    }

    .cc-i-wrap .cc-i-content .cc-i-header .cc-ll {
        column-gap: calc(var(--spacing)*2);
        margin-inline-start: auto;
        padding-block-end: calc(var(--spacing)*1.5);
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-header .cc-ll .cc-i-share {
        color: var(--grey-500)
    }

    .cc-i-wrap .cc-i-content .cc-i-header .cc-i-flag {
        color: #0000;
        cursor: pointer;
        width: calc(var(--spacing)*3);
        background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 fill%3D%22%23b4b2aa%22 viewBox%3D%220 0 256 256%22%3E%3Cpath d%3D%22M232%2C56V176a8%2C8%2C0%2C0%2C1-2.76%2C6c-15.28%2C13.23-29.89%2C18-43.82%2C18-18.91%2C0-36.57-8.74-53-16.85C105.87%2C170%2C82.79%2C158.61%2C56%2C179.77V224a8%2C8%2C0%2C0%2C1-16%2C0V56a8%2C8%2C0%2C0%2C1%2C2.77-6h0c36-31.18%2C68.31-15.21%2C96.79-1.12C167%2C62.46%2C190.79%2C74.2%2C218.76%2C50A8%2C8%2C0%2C0%2C1%2C232%2C56Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-flex
    }

    .cc-i-wrap .cc-i-content .cc-i-body {
        padding-block-end: calc(var(--spacing)*6)
    }

    .cc-i-wrap .cc-i-content .cc-i-footer {
        color: var(--grey-600);
        column-gap: calc(var(--spacing)*2);
        font-size: var(--text-xs);
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-footer a {
        color: var(--grey-600)
    }

    .cc-i-wrap .cc-i-content .cc-i-footer .cc-ll {
        column-gap: calc(var(--spacing)*2);
        display: flex
    }

    .cc-i-wrap .cc-i-content .cc-i-footer .cc-ll .cc-i-delete {
        cursor: pointer
    }

    .cc-i-wrap [data-role=replies] {
        padding-inline-start: calc(var(--spacing)*4)
    }

    .cc-i-wrap .cc-e,
    .cc-i-wrap .cc-n {
        color: var(--error);
        font-size: var(--text-xs)
    }

    summary {
        align-items: center;
        column-gap: calc(var(--spacing));
        cursor: pointer;
        list-style: none;
        display: flex
    }

    summary::-webkit-details-marker {
        display: none
    }

    form {
        row-gap: calc(var(--spacing)*2);
        flex-direction: column;
        width: 100%;
        display: flex
    }

    @media (min-width:40rem) {
        form {
            row-gap: calc(var(--spacing)*4)
        }
    }

    label {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        row-gap: calc(var(--spacing));
        flex-direction: column;
        width: 100%;
        display: flex
    }

    label span {
        margin-inline: var(--spacing)
    }

    label:has(input[type=checkbox]) {
        align-items: center;
        column-gap: calc(var(--spacing)*2);
        flex-direction: row;
        margin-block-start: calc(var(--spacing)*2);
        display: flex
    }

    label:has(input[type=checkbox]) input[type=checkbox] {
        height: calc(var(--spacing)*4);
        width: calc(var(--spacing)*4)
    }

    input[type=text],
    input[type=search],
    input[type=password],
    input[type=email],
    input[type=tel] {
        background-color: light-dark(var(--white), var(--grey-900));
        border: 1px solid light-dark(var(--grey-300), var(--grey-700));
        font-size: var(--text-base);
        height: calc(var(--spacing)*11);
        padding: calc(var(--spacing)*2) calc(var(--spacing)*4) calc(var(--spacing)*1.5);
        outline: none;
        width: 100%
    }

    textarea {
        background-color: light-dark(var(--white), var(--grey-900));
        border: 1px solid light-dark(var(--grey-300), var(--grey-700));
        field-sizing: content;
        font-size: var(--text-base);
        min-height: calc(var(--spacing)*32);
        padding: calc(var(--spacing)*2) calc(var(--spacing)*4) calc(var(--spacing)*1.5);
        outline: none;
        width: 100%
    }

    button {
        cursor: pointer
    }

    .btn {
        background-color: var(--grey-800);
        border: 1px solid var(--grey-300);
        border-radius: calc(var(--spacing)*99);
        color: var(--white);
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: var(--text-xxs);
        align-self: flex-start;
        align-items: center;
        gap: var(--spacing);
        height: calc(var(--spacing)*11);
        letter-spacing: var(--tracking-wider);
        padding: calc(var(--spacing)*1) calc(var(--spacing)*6) calc(var(--spacing)*1);
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
        text-wrap: nowrap;
        justify-content: center;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s;
        display: inline-flex
    }

    .btn:hover {
        background-color: var(--grey-900);
        border-color: var(--grey-900);
        color: var(--primary-bg)
    }

    .btn.btn-outline {
        border-color: var(--grey-400);
        color: var(--grey-800);
        background-color: #0000
    }

    .btn.btn-outline:hover {
        border-color: var(--grey-500)
    }

    .success {
        background-color: var(--success-bg);
        color: var(--success);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        padding: calc(var(--spacing)*2)
    }

    .error {
        background-color: var(--error-bg);
        color: var(--error);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        padding: calc(var(--spacing)*2)
    }

    html,
    body {
        background-color: var(--beige-300)
    }

    #header {
        border-block-end: 1px solid var(--grey-400);
        font-size: var(--text-sm);
        font-family: var(--font-heading)
    }

    #header > .wrapper {
        align-items: center;
        column-gap: calc(var(--spacing)*8);
        font-size: var(--text-xs);
        flex-direction: row;
        padding-block: 0;
        display: flex
    }

    #header > .wrapper a,
    #header > .wrapper button {
        color: var(--grey-900);
        cursor: pointer;
        font-family: var(--font-mono);
        letter-spacing: var(--tracking-tight);
        padding: calc(var(--spacing)*3);
        text-underline-offset: 4px;
        text-transform: uppercase;
        text-wrap: nowrap;
        align-items: center;
        -webkit-text-decoration: underline #0000;
        text-decoration: underline #0000;
        text-decoration-thickness: .5px;
        transition: all .3s ease-in-out;
        display: inline-flex
    }

    #header > .wrapper a:hover,
    #header > .wrapper button:hover {
        color: var(--primary);
        -webkit-text-decoration-color: inherit;
        -webkit-text-decoration-color: inherit;
        text-decoration-color: inherit
    }

    #header > .wrapper .logo {
        font-family: var(--font-logo);
        font-size: var(--text-3xl);
        letter-spacing: var(--tracking-wide);
        padding: calc(var(--spacing)*4) 0;
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
        justify-self: flex-start;
        align-items: center;
        text-decoration: none;
        display: inline-flex
    }

    main {
        flex-direction: column;
        min-height: calc(100vh - 120px);
        display: flex
    }

    main > section {
        flex-direction: column;
        flex-grow: 1;
        display: flex
    }

    main > section > .wrapper {
        padding-block: calc(var(--spacing)*8);
        flex-direction: column;
        flex-grow: 1;
        display: flex
    }

    @media (min-width:40rem) {
        main > section > .wrapper {
            padding-block: calc(var(--spacing)*16)
        }
    }

    main > section + section {
        border-block-start: 1px solid var(--grey-400)
    }

    main > .wrapper > article {
        max-width: var(--container-3xl);
        row-gap: calc(var(--spacing)*8);
        width: 100%;
        flex-direction: column;
        margin-inline: auto;
        padding-block-start: calc(var(--spacing)*16);
        padding-block-end: calc(var(--spacing)*24);
        display: flex
    }

    #footer {
        border-block-start: 1px solid var(--grey-400)
    }

    #footer .logo {
        color: var(--grey-900);
        font-family: var(--font-logo);
        font-size: var(--text-2xl);
        letter-spacing: var(--tracking-wide);
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
        justify-self: flex-start;
        align-items: center;
        text-decoration: none;
        display: inline-flex
    }

    footer {
        background-color: var(--beige-900);
        color: var(--white);
        font-size: var(--text-sm)
    }

    footer > .wrapper {
        padding-block: calc(var(--spacing)*2);
        flex-direction: column;
        row-gap: 0
    }

    @media (min-width:40rem) {
        footer > .wrapper {
            flex-direction: row;
            align-items: center
        }
    }

    footer > .wrapper a {
        color: var(--white);
        padding: calc(var(--spacing)*2)
    }

    footer > .wrapper a:hover {
        color: var(--primary-light)
    }

    .wrapper {
        border-inline: 1px solid var(--grey-400);
        max-width: var(--container-7xl);
        padding-inline: calc(var(--spacing)*8);
        row-gap: calc(var(--spacing)*8);
        flex-direction: column;
        width: 100%;
        margin-inline: auto;
        display: flex
    }

    .intro {
        max-width: var(--container-5xl);
        row-gap: calc(var(--spacing)*2);
        flex-direction: column;
        width: 100%;
        display: flex
    }

    .content {
        max-width: var(--container-3xl);
        padding-block: calc(var(--spacing)*16);
        row-gap: calc(var(--spacing)*8);
        flex-direction: column;
        width: 100%;
        margin-inline: auto;
        display: flex
    }

    .alert {
        background-color: var(--beige-400);
        font-size: var(--text-sm);
        padding: calc(var(--spacing)*4)
    }

    .toast {
        background-color: var(--primary-light);
        padding: calc(var(--spacing)*4);
        bottom: calc(var(--spacing)*2);
        right: calc(var(--spacing)*2);
        position: fixed
    }

    [popover] {
        border: 1px solid var(--grey-300);
        min-width: calc(var(--spacing)*32);
        padding: calc(var(--spacing)*4);
        position-anchor: auto;
        position-area: bottom span-left;
        transition-behavior: allow-discrete;
        margin-block-start: calc(var(--spacing));
        transition-property: opacity, overlay, scale, transform;
        transition-duration: .3s;
        transition-timing-function: ease
    }

    [popover]:popover-open {
        opacity: 1;
        flex-direction: column;
        display: flex;
        transform: translateY(0)
    }

    dialog[popover].drawer {
        background-color: var(--grey-50);
        max-width: var(--container-xl);
        position-area: unset;
        width: 100%;
        height: 100svh;
        margin-left: auto
    }

    dialog[popover].modal {
        max-width: var(--container-3xl);
        position-area: unset;
        width: 100%;
        height: 90svh;
        margin: auto
    }

    dialog[popover].search {
        margin: calc(var(--spacing)*32) auto 0;
        max-width: var(--container-3xl);
        position-area: unset;
        width: 100%
    }

    @starting-style {
        [popover].drawer:popover-open {
            opacity: 0;
            transform: translate(100%)
        }
    }

    dialog::backdrop {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background: #000000b3
    }

    body:has(dialog[popover]:popover-open) {
        overflow: hidden
    }

    @font-face {
        font-family: BBH Hegarty;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/assets/fonts/bbh-hegarty-latin-regular.woff2)format("woff2")
    }

    @font-face {
        font-family: Fira Sans Extra Condensed;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/assets/fonts/fira-sans-extra-condensed-latin-regular.woff2)format("woff2")
    }

    @font-face {
        font-family: Lexend;
        font-weight: 400 700;
        font-display: swap;
        src: url(/assets/fonts/lexend-latin-vf.woff2)format("woff2-variations")
    }

    @font-face {
        font-family: Manrope;
        font-weight: 200 800;
        font-display: swap;
        src: url(/assets/fonts/manrope-latin-vf.woff2)format("woff2-variations")
    }

    @font-face {
        font-family: Inter;
        font-weight: 100 900;
        font-display: swap;
        src: url(/assets/fonts/inter-latin-vf.woff2)format("woff2-variations")
    }

    @font-face {
        font-family: JetBrains Mono;
        font-weight: 100 800;
        font-display: swap;
        src: url(/assets/fonts/jetbrains-mono-latin-vf.woff2)format("woff2-variations")
    }

    @font-face {
        font-family: DM Mono;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/assets/fonts/dm-mono-latin-regular.woff2)format("woff2")
    }

    body {
        color: light-dark(var(--grey-900), var(--grey-50))
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        font-family: var(--font-heading);
        letter-spacing: var(--tracking-tighter);
        text-wrap: balance;
        font-weight: 500
    }

    h1,
    .h1 {
        font-size: var(--text-3xl);
        line-height: var(--text-4xl--line-height)
    }

    @media (min-width:40rem) {

        h1,
        .h1 {
            font-size: var(--text-4xl);
            line-height: var(--text-5xl--line-height)
        }
    }

    h2,
    .h2 {
        font-size: var(--text-lg);
        line-height: var(--text-xl--line-height)
    }

    @media (min-width:40rem) {

        h2,
        .h2 {
            font-size: var(--text-3xl);
            line-height: var(--text-4xl--line-height)
        }
    }

    h2 a,
    .h2 a {
        color: inherit
    }

    h3,
    .h3 {
        font-size: var(--text-lg);
        line-height: var(--text-xl--line-height)
    }

    @media (min-width:40rem) {

        h3,
        .h3 {
            font-size: var(--text-2xl);
            line-height: var(--text-3xl--line-height)
        }
    }

    h4,
    .h4 {
        font-size: var(--text-lg);
        line-height: var(--text-xl--line-height)
    }

    @media (min-width:40rem) {

        h4,
        .h4 {
            font-size: var(--text-lg);
            line-height: var(--text-xl--line-height)
        }
    }

    h5,
    .h5 {
        font-weight: 400
    }

    h6,
    .h6 {
        font-size: var(--text-sm);
        font-weight: 400
    }

    a {
        color: var(--primary);
        text-underline-offset: 4px;
        align-items: center;
        -webkit-text-decoration: underline #0000;
        text-decoration: underline #0000;
        text-decoration-thickness: .5px;
        transition: all .3s ease-in-out;
        display: inline-flex
    }

    a:hover {
        -webkit-text-decoration-color: inherit;
        -webkit-text-decoration-color: inherit;
        text-decoration-color: inherit
    }

    a.link {
        color: var(--primary)
    }

    hr {
        background-color: var(--grey-200);
        height: 1px;
        margin-block: calc(var(--spacing)*3);
        border: none;
        width: 100%
    }

    .overscore {
        color: var(--primary);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        letter-spacing: var(--tracking-normal);
        text-transform: uppercase;
        align-items: flex-start;
        margin-inline: 1px;
        font-weight: 400;
        display: flex
    }

    .overscore + h2 {
        margin-block-start: calc(var(--spacing)*-2)
    }

    .metadata {
        color: light-dark(var(--grey-600), var(--grey-300));
        font-family: var(--font-mono);
        font-size: var(--text-xxs);
        letter-spacing: var(--tracking-tight);
        align-items: flex-start;
        display: flex
    }

    .standfirst {
        color: light-dark(var(--grey-700), var(--grey-300));
        max-width: var(--container-3xl);
        text-wrap: balance;
        margin-block-start: calc(var(--spacing)*2);
        margin-inline-start: calc(var(--spacing)*.5)
    }

    .list {
        flex-direction: column;
        display: flex
    }

    .list a {
        color: var(--grey-900);
        font-size: var(--text-sm);
        text-underline-offset: 4px;
        -webkit-text-decoration: underline #0000;
        text-decoration: underline #0000;
        text-decoration-thickness: .5px;
        transition: all .3s ease-in-out
    }

    .list a:hover {
        color: var(--primary);
        -webkit-text-decoration-color: inherit;
        -webkit-text-decoration-color: inherit;
        text-decoration-color: inherit
    }

    .copy {
        text-wrap: pretty
    }

    .copy > * + * {
        margin-block-start: calc(var(--spacing)*6)
    }

    .copy a:not(.btn):not(.icon) {
        color: var(--primary);
        text-decoration: underline;
        -webkit-text-decoration-color: inherit;
        -webkit-text-decoration-color: inherit;
        text-decoration-color: inherit;
        text-underline-offset: 4px;
        text-decoration-thickness: .5px;
        transition: all .3s ease-in-out
    }

    .copy h2:not(:first-child) {
        margin-block-start: calc(var(--spacing)*8)
    }

    .copy ol,
    .copy ul {
        row-gap: calc(var(--spacing)*2);
        flex-direction: column;
        display: flex
    }

    .copy ol li,
    .copy ul li {
        padding-inline-start: calc(var(--spacing)*4)
    }

    .copy ol li > ol,
    .copy ol li > ul,
    .copy ul li > ol,
    .copy ul li > ul {
        margin-block-start: calc(var(--spacing)*2)
    }

    .copy ol {
        padding-inline-start: 25px;
        list-style-type: decimal
    }

    .copy ul {
        padding-inline-start: 20px;
        list-style-type: disc
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: "Inter", system-ui, sans-serif;
        --font-mono: "DM Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
        --spacing: .25rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-xl: 36rem;
        --container-3xl: 48rem;
        --container-5xl: 64rem;
        --container-7xl: 80rem;
        --text-xs: .75rem;
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl--line-height: 1;
        --tracking-tighter: -.05em;
        --tracking-tight: -.025em;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --shadow-xs: 0 1px 2px 0 #0000000d;
        --aspect-video: 16 / 9;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --font-logo: "BBH Hegarty", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
        --font-heading: "Inter", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
        --text-xxs: .7rem;
        --primary: #bf00ff;
        --primary-bg: #fdf7ff
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --primary-bg: color-mix(in srgb, var(--primary) 3%, white)
        }
    }

    :root,
    :host {
        --primary-light: #faebff
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --primary-light: color-mix(in srgb, var(--primary) 8%, white)
        }
    }

    :root,
    :host {
        --primary-dark: #8600b3
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --primary-dark: color-mix(in srgb, var(--primary) 70%, black)
        }
    }

    :root,
    :host {
        --grey-50: #fcfbf9;
        --grey-100: #f7f6f3;
        --grey-200: #f1f0ed;
        --grey-300: #e8e7e2;
        --grey-400: #dbdad4;
        --grey-500: #b3b2ac;
        --grey-600: #86857f;
        --grey-700: #575652;
        --grey-800: #302f2c;
        --grey-900: #171614;
        --grey-950: #070706;
        --color-grey-600: var(--grey-600);
        --white: white;
        --beige: #d1c9af;
        --beige-100: #fafaf7
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-100: color-mix(in srgb, var(--beige) 10%, white)
        }
    }

    :root,
    :host {
        --beige-200: #f6f4ef
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-200: color-mix(in srgb, var(--beige) 20%, white)
        }
    }

    :root,
    :host {
        --beige-300: #f1efe7
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-300: color-mix(in srgb, var(--beige) 30%, white)
        }
    }

    :root,
    :host {
        --beige-400: #ede9df
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-400: color-mix(in srgb, var(--beige) 40%, white)
        }
    }

    :root,
    :host {
        --beige-500: #e8e4d7
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-500: color-mix(in srgb, var(--beige) 50%, white)
        }
    }

    :root,
    :host {
        --beige-600: #e3dfcf
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-600: color-mix(in srgb, var(--beige) 60%, white)
        }
    }

    :root,
    :host {
        --beige-700: #3f3c35
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-700: color-mix(in srgb, var(--beige) 30%, black)
        }
    }

    :root,
    :host {
        --beige-800: #2a2823
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-800: color-mix(in srgb, var(--beige) 20%, black)
        }
    }

    :root,
    :host {
        --beige-900: #151412
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --beige-900: color-mix(in srgb, var(--beige) 10%, black)
        }
    }

    :root,
    :host {
        --color-beige-200: var(--beige-200);
        --color-beige-400: var(--beige-400);
        --error: #fe4a49;
        --error-bg: #fff6f6
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --error-bg: color-mix(in srgb, var(--error) 5%, white)
        }
    }

    :root,
    :host {
        --warning: #ff7f00;
        --warning-bg: #fff9f2
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --warning-bg: color-mix(in srgb, var(--warning) 5%, white)
        }
    }

    :root,
    :host {
        --success: teal;
        --success-bg: #f2f9f9
    }

    @supports (color:color-mix(in lab, red, red)) {

        :root,
        :host {
            --success-bg: color-mix(in srgb, var(--success) 5%, white)
        }
    }
}

@layer utilities {
    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .top-px {
        top: 1px
    }

    .right-px {
        right: 1px
    }

    .bottom-px {
        bottom: 1px
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .-m-4 {
        margin: calc(var(--spacing) * -4)
    }

    .-mx-4 {
        margin-inline: calc(var(--spacing) * -4)
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-8 {
        margin-block: calc(var(--spacing) * 8)
    }

    .mbe-8 {
        margin-block-end: calc(var(--spacing) * 8)
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mt-16 {
        margin-top: calc(var(--spacing) * 16)
    }

    .mr-auto {
        margin-right: auto
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .-ml-1 {
        margin-left: calc(var(--spacing) * -1)
    }

    .ml-2 {
        margin-left: calc(var(--spacing) * 2)
    }

    .ml-auto {
        margin-left: auto
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .table {
        display: table
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .size-3 {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

    .size-5 {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .size-6 {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6)
    }

    .size-7 {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7)
    }

    .size-full {
        width: 100%;
        height: 100%
    }

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .w-full {
        width: 100%
    }

    .max-w-3xl {
        max-width: var(--container-3xl)
    }

    .max-w-lg {
        max-width: var(--container-lg)
    }

    .max-w-md {
        max-width: var(--container-md)
    }

    .grow {
        flex-grow: 1
    }

    .break-inside-avoid {
        break-inside: avoid
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-baseline {
        align-items: baseline
    }

    .items-center {
        align-items: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    .gap-16 {
        gap: calc(var(--spacing) * 16)
    }

    .gap-x-1 {
        column-gap: calc(var(--spacing) * 1)
    }

    .gap-x-2 {
        column-gap: calc(var(--spacing) * 2)
    }

    .gap-x-4 {
        column-gap: calc(var(--spacing) * 4)
    }

    .gap-x-8 {
        column-gap: calc(var(--spacing) * 8)
    }

    .gap-x-16 {
        column-gap: calc(var(--spacing) * 16)
    }

    .gap-y-1 {
        row-gap: calc(var(--spacing) * 1)
    }

    .gap-y-2 {
        row-gap: calc(var(--spacing) * 2)
    }

    .gap-y-4 {
        row-gap: calc(var(--spacing) * 4)
    }

    .gap-y-6 {
        row-gap: calc(var(--spacing) * 6)
    }

    .gap-y-8 {
        row-gap: calc(var(--spacing) * 8)
    }

    .gap-y-16 {
        row-gap: calc(var(--spacing) * 16)
    }

    .self-center {
        align-self: center
    }

    .self-end {
        align-self: flex-end
    }

    .overflow-hidden {
        overflow: hidden
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .bg-beige-200 {
        background-color: var(--color-beige-200)
    }

    .bg-beige-400 {
        background-color: var(--color-beige-400)
    }

    .object-cover {
        object-fit: cover
    }

    .p-2 {
        padding: calc(var(--spacing) * 2)
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2)
    }

    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }

    .py-16 {
        padding-block: calc(var(--spacing) * 16)
    }

    .py-32 {
        padding-block: calc(var(--spacing) * 32)
    }

    .text-center {
        text-align: center
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-grey-600 {
        color: var(--color-grey-600)
    }

    .italic {
        font-style: italic
    }

    @media (min-width:40rem) {
        .sm\:mx-auto {
            margin-inline: auto
        }

        .sm\:mr-auto {
            margin-right: auto
        }

        .sm\:w-lg {
            width: var(--container-lg)
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:items-end {
            align-items: flex-end
        }

        .sm\:gap-x-32 {
            column-gap: calc(var(--spacing) * 32)
        }
    }

    @media (min-width:48rem) {
        .md\:flex {
            display: flex
        }

        .md\:columns-2 {
            columns: 2
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (min-width:64rem) {
        .lg\:columns-3 {
            columns: 3
        }

        .lg\:columns-4 {
            columns: 4
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}