@layer tailwindBase {
    .transform {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1
    }

    .filter {
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow:
    }
}

@layer reset {

    *,
    :after,
    :before {
        box-sizing: border-box;
        position: relative
    }

    :where(*) {
        text-wrap: pretty
    }

    :where(h1, h2, h3, h4) {
        text-wrap: balance
    }

    :where(html:focus-within) {
        scroll-behavior: smooth
    }

    :where(body) {
        line-height: 1.5;
        min-height: 100vh;
        min-height: 100dvh;
        text-rendering: optimizeSpeed
    }

    :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
        margin: 0
    }

    :where(ul[role=list], ol[role=list]),
    ol,
    ul {
        list-style: none
    }

    :where([role=list]) {
        padding: 0
    }

    :where(a:not([class])) {
        -webkit-text-decoration-skip: ink;
        text-decoration-skip-ink: auto
    }

    :where(img, picture, svg, canvas) {
        background-repeat: no-repeat;
        background-size: cover;
        block-size: auto;
        font-style: italic;
        max-inline-size: 100%;
        shape-margin: .75rem;
        vertical-align: middle
    }

    :where(button) {
        all: unset
    }

    :where(button, input, select, textarea) {
        color: inherit;
        font: inherit
    }

    :where(textarea) {
        resize: vertical;
        resize: block
    }

    :where(textarea:not([rows])) {
        min-height: 10em
    }

    :where(button, label, select, summary, [role=button], [role=option]) {
        cursor: pointer
    }

    :where(:target) {
        scroll-margin-block-start: 2ex
    }

    :where(:focus) {
        scroll-margin-block-end: 8vh
    }

    :where(dialog) {
        background: none;
        border: none;
        inset: unset;
        max-height: unset;
        max-width: unset
    }

    :where([popover]) {
        background: none;
        border: none;
        color: inherit;
        inset: unset
    }

    :where([popover]:not(:popover-open)),
    :where(dialog:not([open], [popover])) {
        display: none !important
    }

    :where(html:has(dialog[open]:modal)) {
        overflow: hidden
    }

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

        *,
        :after,
        :before {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important
        }
    }
}

@layer fonts {
    @font-face {
        font-display: swap;
        font-family: Relative Torn;
        font-style: normal;
        font-weight: 500;
        src: local("Relative Torn"), url(https://thetornproject.com/assets/fonts/relative-torn.woff2) format("woff2")
    }

    @font-face {
        font-display: swap;
        font-family: Relative Bold;
        font-style: normal;
        font-weight: 700;
        src: local("Relative Bold"), url(https://thetornproject.com/assets/fonts/relative-bold.woff2) format("woff2")
    }

    @font-face {
        font-display: swap;
        font-family: Relative Medium;
        font-style: normal;
        font-weight: 300;
        src: local("Relative Medium"), url(https://thetornproject.com/assets/fonts/relative-medium.woff2) format("woff2")
    }

    @font-face {
        font-display: swap;
        font-family: Relative Mono;
        font-style: normal;
        font-weight: 500;
        src: local("Relative Mono"), url(https://thetornproject.com/assets/fonts/relative-mono-10-pitch.woff2) format("woff2")
    }

    @font-face {
        font-display: swap;
        font-family: Roboto;
        font-style: normal;
        font-weight: 500;
        src: local("Roboto"), url(https://thetornproject.com/assets/fonts/Roboto-VariableFont_wdth,wght.ttf) format("ttf")
    }

    @font-face {
        font-display: swap;
        font-family: Roboto;
        font-style: italic;
        font-weight: 500;
        src: local("Roboto"), url(https://thetornproject.com/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf) format("ttf")
    }
}

@layer tailwindComponents {
    :root {
        --color-coral: #ff8d77;
        --color-aubergine: #33233a;
        --color-honey: #ffeb73;
        --color-plum: #4b2e60;
        --color-white: #fff;
        --color-black: #000;
        --color-brown: #603526;
        --color-off-white: #fffef0;
        --space-zero: clamp(0rem, -0.00rem + 0.00vw, 0.000052631578947368424rem);
        --space-2xs: clamp(0.15789473684210525rem, 0.13rem + 0.15vw, 0.2631578947368421rem);
        --space-xs: clamp(0.2631578947368421rem, 0.23rem + 0.15vw, 0.3684210526315789rem);
        --space-s: clamp(0.5263157894736842rem, 0.47rem + 0.29vw, 0.7368421052631579rem);
        --space-m: clamp(0.7368421052631579rem, 0.63rem + 0.51vw, 1.105263157894737rem);
        --space-l: clamp(1rem, 0.82rem + 0.88vw, 1.631578947368421rem);
        --space-xl: clamp(2rem, 1.73rem + 1.32vw, 2.9473684210526314rem);
        --space-2xl: clamp(3rem, 2.59rem + 1.98vw, 4.421052631578948rem);
        --space-3xl: clamp(5rem, 4.32rem + 3.29vw, 7.368421052631579rem);
        --space-xs-s: clamp(0.2631578947368421rem, 0.13rem + 0.66vw, 0.7368421052631579rem);
        --space-s-m: clamp(0.5263157894736842rem, 0.36rem + 0.80vw, 1.105263157894737rem);
        --space-m-l: clamp(0.7368421052631579rem, 0.48rem + 1.24vw, 1.631578947368421rem);
        --space-l-xl: clamp(1rem, 0.44rem + 2.71vw, 2.9473684210526314rem);
        --space-l-2xl: clamp(2rem, 1.30rem + 3.37vw, 4.421052631578948rem);
        --space-xl-2xl: clamp(3rem, 1.74rem + 6.07vw, 7.368421052631579rem);
        --space-2xl-3xl: clamp(5rem, 3.05rem + 9.44vw, 11.789473684210526rem);
        --size-xs: clamp(0.7368421052631579rem, 0.65rem + 0.44vw, 1.0526315789473684rem);
        --size-sm: clamp(0.9357894736842106rem, 0.84rem + 0.46vw, 1.263157894736842rem);
        --size-base: clamp(1.0526315789473684rem, 0.89rem + 0.80vw, 1.6268421052631579rem);
        --size-md: clamp(1.368421052631579rem, 1.19rem + 0.88vw, 2rem);
        --size-lg: clamp(1.6842105263157894rem, 1.38rem + 1.48vw, 2.75rem);
        --size-xl: clamp(2.8421052631578947rem, 2.69rem + 0.74vw, 3.375rem);
        --size-2xl: clamp(3.1047368421052632rem, 1.77rem + 6.46vw, 7.75rem);
        --size-3xl: clamp(4.953157894736842rem, 3.14rem + 8.75vw, 11.25rem);
        --font-display: Relative Torn, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        --font-base: Relative Medium, system-ui, sans-serif;
        --font-torn: Relative Torn, system-ui, sans-serif;
        --font-mono: Relative Mono, ui-monospace, Source Code Pro, monospace;
        --font-roboto: Roboto, system-ui, sans-serif
    }
}

@layer typography {
    body {
        color: var(--color-text);
        font-family: var(--font-base);
        font-size: var(--size-base);
        font-size-adjust: from-font;
        font-weight: var(--font-regular);
        letter-spacing: var(--tracking, .05ch);
        line-height: var(--leading-standard)
    }

    body article .body {
        font-family: var(--font-roboto);
        letter-spacing: 0
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-display);
        font-weight: var(--font-extra-bold);
        letter-spacing: var(--tracking-s);
        line-height: 1.2;
        margin-block-end: var(--space-l)
    }

    h1 {
        font-size: var(--size-3xl)
    }

    @media screen and (max-width:750px) {
        h1 {
            font-size: var(--size-2xl)
        }
    }

    h2 {
        font-size: var(--size-2xl)
    }

    h3 {
        font-size: var(--size-xl)
    }

    h4 {
        font-size: var(--size-lg)
    }

    h5 {
        font-size: var(--size-md)
    }

    .fs-small {
        font-size: var(--size-sm)
    }

    .fs-base {
        font-size: var(--size-base)
    }

    .fs-md {
        font-size: var(--size-md)
    }

    .fs-lg {
        font-size: var(--size-lg)
    }

    .fs-xl {
        font-size: var(--size-xl)
    }

    .fs-2xl {
        font-size: var(--size-2xl)
    }

    .fs-3xl {
        font-size: var(--size-3xl)
    }

    b,
    strong {
        font-family: var(--font-display);
        font-weight: var(--font-extra-bold)
    }
}

@layer variables {
    :root {
        --Z-INDEX-0: 0;
        --Z-INDEX-1: 1;
        --Z-INDEX-2: 2;
        --Z-INDEX-3: 3;
        --Z-INDEX-4: 4;
        --Z-INDEX-5: 5;
        --Z-INDEX-CAROUSEL-VIEWPORT: 5002;
        --Z-INDEX-CAROUSEL-BUTTONS: 5001;
        --Z-INDEX-JUMP-LINKS: 7001;
        --Z-INDEX-AUDIO-LINKS: 8001;
        --Z-INDEX-NAV: 9000;
        --Z-INDEX-NAV-MODAL: 9001;
        --gutter: var(--space-m-l);
        --border-radius: 0.3rem;
        --transition-duration: 250ms;
        --transition-timing: ease;
        --wrapper-width: 85rem;
        --tracking: -0.05ch;
        --tracking-s: -0.075ch;
        --tracking-wide: 0.025ch;
        --gradient-brown-rtl: linear-gradient(90deg, #844d3d 10%, #6b3d2d 50%, #60311f 90%);
        --gradient-brown: var(--gradient-brown-rtl);
        --gradient-brown-ltr: linear-gradient(90deg, #844d3d 10%, #6b3d2d 50%, #60311f 90%);
        --gradient-brown-up: linear-gradient(180deg, #844d3d 10%, #6b3d2d 50%, #60311f 90%);
        --gradient-brown-down: linear-gradient(180deg, #844d3d 10%, #6b3d2d 50%, #60311f 90%);
        --horizontal-brown-gradient: linear-gradient(90deg, #84503b, #6c3a27 64%, #542513);
        --vertical-brown-gradient: linear-gradient(180deg, #84503b, #6c3a27 64%, #542513);
        --yet-another-brown-gradient: radial-gradient(114% 81% at 3% 1%, #764330 1%, #683929 83%);
        --section-height: 100vh;
        --carousel-viewport-height: 500px;
        --carousel-cell-width: 33%;
        --s1: var(--space-s)
    }

    .bg-gradient-brown {
        background: var(--gradient-brown)
    }

    :root {
        --color-dark: var(--color-aubergine);
        --color-light: var(--color-honey);
        --color-text: var(--color-coral);
        --color-bg: var(--color-plum);
        --color-bg-accent: #fdfdfd;
        --color-bg-accent-2: #f7f7f7
    }
}

@layer global {
    html {
        color-scheme: light dark
    }

    body {
        accent-color: var(--color-primary);
        background-color: var(--color-bg);
        color: var(--color-text);
        display: flex;
        flex-direction: column
    }

    main {
        flex: auto
    }

    blockquote:not([class]),
    li,
    p {
        max-inline-size: 65ch
    }

    blockquote {
        border-inline-start: .5rem solid var(--color-primary);
        font-size: var(--size-lg);
        padding: var(--space-m-l)
    }

    blockquote>*+* {
        margin-block-start: var(--space-m-l)
    }

    blockquote :last-child {
        font-family: var(--font-base);
        font-size: var(--size-step-1);
        font-style: normal
    }

    input,
    textarea {
        caret-color: var(--color-primary)
    }

    svg {
        block-size: 2ex;
        flex: none;
        inline-size: auto
    }

    hr {
        background-color: var(--color-bg);
        border: 0;
        height: 2px;
        margin-block: var(--space-m-l);
        margin-inline-start: 0;
        width: 100%
    }

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

    a:hover {
        text-decoration: underline;
        text-decoration-thickness: .08em
    }

    :focus-visible {
        outline: 3px solid;
        outline-offset: .3ch
    }

    ::-moz-selection {
        background-color: var(--color-text);
        color: var(--color-bg)
    }

    ::selection {
        background-color: var(--color-text);
        color: var(--color-bg)
    }

    .preload-transitions * {
        transition: none !important
    }

    @media (scripting:none) {
        .require-js {
            display: none
        }
    }
}

@layer compositions {

    .blocked,
    .blocked:last-child {
        border-block-end: solid 1px var(--color-aubergine);
        margin-block-end: var(--gutter, 3rem);
        padding-block-end: var(--gutter, 3rem)
    }

    .box {
        border: var(--border-thin) solid;
        outline: var(--border-thin) transparent;
        outline-offset: calc(var(--border-thin)*-1);
        padding: var(--s1)
    }

    :where(.cluster) {
        align-items: var(--cluster-vertical-alignment, center);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gutter, var(--space-s-l));
        justify-content: var(--cluster-horizontal-alignment, flex-start)
    }

    figcaption {
        font-size: var(--size-xs);
        max-width: 604px
    }

    .flex-row {
        display: flex;
        flex-direction: row
    }

    :where(.flow)>h5 {
        --flow-space: var(--space-2xl, 2rem);
        margin-block-end: 0
    }

    :where(.flow)>*+* {
        margin-block-start: var(--flow-space, 1em)
    }

    :where(.grid) {
        display: grid;
        gap: var(--gutter, var(--space-s-m));
        grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr))
    }

    :where(.grid)[data-rows=masonry] {
        align-items: start;
        grid-template-rows: masonry
    }

    :where(.grid)[data-layout="50-50"] {
        --grid-placement: auto-fit;
        --grid-min-item-size: clamp(16rem, 50vw, 18rem)
    }

    :where(.grid)[data-layout=thirds] {
        --grid-placement: auto-fit;
        --grid-min-item-size: clamp(16rem, 33%, 25rem)
    }

    .body a {
        color: currentcolor
    }

    .body a,
    .body a:hover {
        text-decoration: underline
    }

    .body a:hover {
        text-decoration-thickness: .08em
    }

    .body a[target=_blank]:after {
        content: " ↗ "
    }

    ol {
        list-style: decimal
    }

    ol li,
    ul li {
        margin-block-end: var(--gutter, 1em)
    }

    .reel {
        --cluster-horizontal-alignment: space-around;
        --cluster-vertical-alignment: stretch
    }

    .reel .card {
        width: 376px
    }

    :where(.repel) {
        align-items: var(--repel-vertical-alignment, center);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gutter, var(--space-s-l));
        justify-content: space-between
    }

    :where(.repel)[data-nowrap] {
        flex-wrap: nowrap
    }

    :where(.sidebar) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gutter, var(--space-s-l))
    }

    :where(.sidebar):not([data-direction])>:first-child {
        flex-basis: var(--sidebar-target-width, 20rem);
        flex-grow: 1
    }

    :where(.sidebar):not([data-direction])>:last-child {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: var(--sidebar-content-min-width, 50%)
    }

    :where(.sidebar)[data-direction=rtl]>:last-child {
        flex-basis: var(--sidebar-target-width, 20rem);
        flex-grow: 1
    }

    :where(.sidebar)[data-direction=rtl]>:first-child {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: var(--sidebar-content-min-width, 50%)
    }

    .stack {
        align-items: var(--stack-horizontal-alignment, flex-start);
        display: flex;
        flex-direction: column;
        justify-content: var(--stack-vertical-alignment, flex-start)
    }

    .stack>*+* {
        margin-block-start: var(--s1)
    }

    .wrapper {
        --gap: clamp(1rem, 6vw, 3rem);
        --full: minmax(var(--gap), 1fr);
        --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
        --popout: minmax(0, 2rem);
        --feature: minmax(0, 40rem);
        display: grid;
        grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]
    }

    .wrapper>* {
        grid-column: content
    }

    .prose-wrapper {
        --wrapper-width: 64rem
    }

    .popout {
        grid-column: popout
    }

    .feature {
        grid-column: feature
    }

    .full {
        grid-column: full
    }

    .bleed-left {
        grid-column-end: content-end;
        grid-column-start: full-start
    }

    .bleed-right {
        grid-column-start: content-start
    }

    .bleed-right,
    .right {
        grid-column-end: full-end
    }

    .right {
        grid-column-start: content-end
    }

    .left {
        grid-column-end: content-start;
        grid-column-start: full-start
    }
}

@layer blocks {
    .audio_player {
        font-size: var(--size-sm);
        min-width: 9rem
    }

    .audio_player ul {
        display: flex;
        justify-content: space-around;
        list-style-type: none;
        margin-block-end: 0;
        padding-inline: unset
    }

    .audio_player ul li {
        background-image: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline: unset
    }

    .audio_player ul li .audio-button {
        align-items: center;
        border-bottom: 1px solid #eee;
        color: var(--color-aubergine);
        display: flex;
        flex-direction: column;
        padding-bottom: 45px
    }

    .audio_player ul li .audio-button .button-icon {
        align-items: center;
        background-color: var(--color-plum);
        border-radius: 30px;
        display: flex;
        height: 60px;
        justify-content: center;
        transition: background-color .25s ease-in;
        width: 60px
    }

    .audio_player ul li .audio-button .button-icon svg {
        color: var(--color-honey)
    }

    .audio_player ul li .audio-button .button-icon:hover {
        background-color: var(--color-coral)
    }

    .audio_player ul li .audio-button .button-icon-pause,
    .audio_player ul li .audio-button .button-icon-play {
        display: flex
    }

    .audio-options > iframe {
        border: 0;
        width: 100%;
        height: 80px
    }

    .panel {
        background-color: #fff;
        border-radius: 1rem;
        box-shadow: 0 3vw 8vw rgba(0, 0, 0, .2);
        padding: 1rem
    }

    .audio-player-links {
        margin-block: 4rem 2rem;
        padding-left: 1.25vw;
        padding-right: 1.25vw
    }

    .banner {
        align-items: flex-start;
        background-color: var(--color-plum);
        background-size: cover;
        display: flex;
        height: 100vh;
        justify-content: space-between;
        padding: 1rem 3rem
    }

    .banner.home {
        height: -moz-max-content;
        height: max-content
    }

    .banner {
        text-transform: uppercase
    }

    .banner svg {
        height: 63px;
        width: 108px
    }

    .banner h1 {
        align-self: center;
        font-size: var(--size-2xl)
    }

    @media (min-width:750px) {
        .banner h1 {
            align-self: flex-end;
            font-size: var(--size-3xl)
        }
    }

    .banner.focus-center {
        background-position-x: center
    }

    .banner.focus-right {
        background-position-x: right
    }

    .banner.focus-left {
        background-position-x: left
    }

    @media screen and (max-width:480px) {
        .banner {
            height: 80vh
        }
    }

    .banner.end-point {
        max-height: 628px
    }

    section.banner.home {
        height: 100vh;
        text-transform: uppercase;
        width: 100vw
    }

    section.banner.home .stack {
        --stack-vertical-alignment: flex-end;
        --s1: 0;
        align-self: stretch
    }

    section.banner.home h1 {
        align-self: flex-start;
        font-size: var(--size-3xl);
        margin-block: 0
    }

    section.banner.home h2 {
        font-size: var(--size-2xl);
        margin-block-end: 0
    }

    section.banner.home svg {
        height: auto
    }

    section.banner.home h1>svg {
        height: 50vh;
        width: 682px
    }

    section.banner.home h2>svg {
        height: 25vh;
        width: 535px
    }

    section.banner.home .three-words>svg {
        height: 25vh;
        width: 443px
    }

    .banner.home .bg {
        background-size: cover;
        height: 100vh;
        left: 0;
        position: absolute;
        top: 0;
        transition: opacity .75s ease;
        width: 100vw
    }

    .banner.home .bg.bg-img {
        opacity: 0
    }

    .banner.home .bg.bg-img.active {
        opacity: 1
    }

    .banner.home #video-holder video {
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100vw
    }

    .banner.split-title h1 {
        align-items: flex-start;
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        font-size: var(--size-3xl);
        justify-self: flex-end;
        width: 100%
    }

    .banner.split-title h1 span {
        display: block
    }

    .banner.split-title h1 span:first-child {
        align-self: flex-end
    }

    .banner.split-title h1 span:nth-child(2) {
        align-self: flex-start
    }

    blockquote p {
        font-size: 2rem;
        font-size: var(--size-md)
    }

    blockquote cite {
        font-size: 1.6rem;
        font-size: var(--size-sm);
        font-style: italic
    }

    blockquote cite:before {
        content: "~ "
    }

    blockquote.fancy {
        border-inline-start: 0
    }

    blockquote.fancy:after,
    blockquote.fancy:before {
        display: block;
        font-family: Relative, Georgia, Times, Garamond, serif;
        font-size: var(--blockquote-quote-size, 4rem);
        line-height: 1
    }

    blockquote.fancy:before {
        content: open-quote
    }

    blockquote.fancy:after {
        content: close-quote;
        margin-block-start: var(--blockquote-spacing, 4rem)
    }

    blockquote.fancy p {
        font-size: var(--blockquote-font-size, 4rem)
    }

    .flow>blockquote:first-child {
        margin-block-start: 0
    }

    .button-alt {
        --button-bg: var(--color-coral);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-coral)
    }

    .button-alt:hover,
    .button-alt[aria-current=page],
    .button-alt[aria-pressed=true],
    .button-alt[data-state=active] {
        --button-bg: var(--color-honey);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-honey)
    }

    .button.button-alt-coral:hover,
    .button.button-alt-coral[aria-current=page],
    .button.button-alt-coral[aria-pressed=true],
    .button.button-alt-coral[data-state=active] {
        --button-bg: var(--color-coral);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-coral)
    }

    .button {
        background-color: var(--button-bg, var(--color-aubergine));
        border: 2px solid var(--button-bg, var(--color-aubergine));
        border-radius: var(--button-border-radius, 10rem);
        color: var(--button-text, var(--color-coral));
        display: block;
        font: inherit;
        font-weight: var(--font-bold);
        height: -moz-min-content;
        height: min-content;
        padding: 1rem var(--space-s);
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        width: 100%
    }

    .button:hover,
    .button[aria-current=page],
    .button[aria-pressed=true],
    .button[data-state=active] {
        --button-bg: var(--color-honey);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-honey)
    }

    .button-outline {
        --button-bg: var(--color-honey);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-aubergine);
        border: 2px solid var(--button-border)
    }

    .button-outline:hover,
    .button-outline[aria-current=page],
    .button-outline[aria-pressed=true],
    .button-outline[data-state=active] {
        --button-bg: var(--color-aubergine);
        --button-text: var(--color-honey);
        --button-border: var(--color-aubergine)
    }

    div.wrapper.bg-coral {
        background-color: var(--color-aubergine)
    }

    .button-filters {
        --button-bg: var(--color-aubergine);
        --button-text: var(--color-honey);
        --button-border: var(--color-aubergine);
        line-height: 2.5rem;
        padding: unset;
        padding-block: .25rem;
        padding-inline: 2.6rem;
        width: unset
    }

    .button-filters.faded {
        --button-bg: var(--color-honey);
        --button-text: var(--color-aubergine);
        --button-border: var(--color-aubergine);
        border: 2px solid var(--button-border);
        opacity: .5
    }

    .button-filters:hover,
    .button-filters[aria-current=page],
    .button-filters[aria-pressed=true],
    .button-filters[data-state=active] {
        --button-bg: var(--color-aubergine);
        --button-text: var(--color-honey);
        --button-border: var(--color-aubergine)
    }

    .card-container {
        --cluster-vertical-alignment: stretch;
        --cluster-horizontal-alignment: stretch;
        pointer-events: none
    }

    .card-container .card {
        pointer-events: auto
    }

    .card-container:hover .card:not(:hover) {
        filter: blur(7px);
        opacity: .75;
        transform: scale(.975);
        transition: all .3s ease
    }

    .card-container .card:hover {
        filter: blur(0);
        opacity: 1;
        text-decoration: none;
        transform: scale(1.025)
    }

    .card {
        --card-bg-color: #333;
        --card-content-bg-color: var(--color-coral);
        background-color: var(--card-bg-color, var(--color-white));
        border: none;
        border-radius: .25rem;
        color: var(--color-aubergine, #333);
        max-width: 290px;
        min-height: 415px;
        overflow: hidden;
        text-transform: none
    }

    .card a {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .card a:hover {
        text-decoration: none
    }

    .card picture {
        display: flex;
        flex-grow: 1
    }

    .card img {
        aspect-ratio: 16/9;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .card :where(h2, h3) {
        text-wrap: auto
    }

    .card .card-headnotes,
    .card .headnotes {
        background-color: var(--card-bg-color);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: .5rem
    }

    .card .card-headnotes>span,
    .card .headnotes>span {
        font-size: var(--size-step-min-4);
        text-transform: uppercase
    }

    .card .card-content {
        background-color: var(--card-content-bg-color);
        display: flex;
        flex-direction: column;
        flex-grow: 1
    }

    .card .card-content .media {
        background-color: #fff;
        padding: .5rem
    }

    .card .card-content .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: .5rem
    }

    .card .card-content .content h2 {
        color: var(--color-aubergine);
        flex-grow: 1;
        font-size: var(--size-step-1)
    }

    .card .card-content .content .button {
        align-self: flex-end
    }

    article.member {
        width: 450px
    }

    @media screen and (min-width:1195px) {
        article.member {
            width: 30%
        }
    }

    article.member {
        margin-block-end: 3rem
    }

    article.member h3 {
        font-family: var(--font-base);
        margin-block-end: 0
    }

    article.member img {
        border-radius: 10px;
        height: auto;
        width: 450px;
        width: 100%
    }

    article.member .bit {
        color: var(--color-honey);
        font-size: var(--size-sm);
        text-transform: uppercase
    }

    article.member .bit:before {
        content: "“ "
    }

    article.member .bit:after {
        content: " ”"
    }

    article.member p {
        margin-block-start: 1.5rem;
        max-width: 500px
    }

    .cred-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start
    }

    .cred-list figure {
        background-color: var(--color-white);
        border-radius: 10px;
        padding: 0 1rem
    }

    .cred-list figure img {
        height: auto;
        width: 200px
    }

    .embla__container a:first-of-type .card:is(.embla__slide) {
        margin-inline-start: 34px
    }

    article.headed-card {
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        height: 482px;
        justify-content: space-between;
        overflow: hidden;
        position: relative;
        width: 376px
    }

    article.headed-card div {
        padding: 1rem
    }

    article.headed-card .heading {
        font-size: var(--size-base);
        z-index: var(--Z-INDEX-3)
    }

    article.headed-card .meta {
        align-items: center;
        background-color: var(--color-white);
        display: flex;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        gap: var(--space-xs);
        justify-content: flex-start;
        text-transform: uppercase;
        z-index: var(--Z-INDEX-3)
    }

    article.headed-card .bg-image {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: var(--Z-INDEX-2)
    }

    article.headed-card .text {
        background-color: var(--color-white);
        color: var(--color-aubergine);
        z-index: var(--Z-INDEX-3)
    }

    article.headed-card .text h1,
    article.headed-card .text h3 {
        background-color: #fff;
        font-size: var(--size-base);
        font-weight: 700;
        text-decoration: none;
        text-transform: none
    }

    article.headed-card .text h1:hover,
    article.headed-card .text h3:hover {
        text-decoration: none
    }

    .instagram-card {
        overflow: hidden;
        width: 300px
    }

    .instagram-card img {
        -o-object-fit: contain;
        object-fit: contain
    }

    .instagram-card:is(.embla__slide) {
        border: 5px solid var(--color-honey)
    }

    .instagram-card:is(.embla__slide):first-of-type {
        margin-left: 34px
    }

    article.journey-card {
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        height: 716px;
        justify-content: space-between;
        min-width: 376px;
        overflow: hidden;
        position: relative;
        width: 376px
    }

    article.journey-card div {
        padding: 1rem
    }

    article.journey-card .meta {
        align-items: center;
        background-color: var(--color-white);
        display: flex;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        gap: var(--space-xs);
        justify-content: flex-start;
        text-transform: uppercase;
        z-index: var(--Z-INDEX-3)
    }

    article.journey-card .bg-image {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: var(--Z-INDEX-2)
    }

    article.journey-card .text {
        background-color: var(--color-white);
        color: var(--color-aubergine);
        font-size: var(--size-sm);
        z-index: var(--Z-INDEX-3)
    }

    ;

    article.journey-card .text h1 {
        text-wrap: auto;
        font-size: var(--size-lg);
        text-transform: none
    }

    article.card.journeys-link-card {
        --card-bg-color: var(--color-white);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: 276px;
        max-width: 376px;
        min-height: unset
    }

    @media screen and (min-width:850px) {
        article.card.journeys-link-card {
            height: 376px
        }
    }

    article.card.journeys-link-card div {
        padding: 1.65rem
    }

    article.card.journeys-link-card .meta {
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        text-transform: uppercase
    }

    article.card.journeys-link-card .text {
        background-color: var(--color-white);
        color: var(--color-aubergine);
        display: flex;
        flex-direction: column;
        font-size: var(--size-sm);
        gap: var(--space-xs);
        height: 100%;
        justify-content: space-between;
        padding-block-end: 3.5rem;
        padding-block-start: 0;
        z-index: var(--Z-INDEX-3)
    }

    article.card.journeys-link-card .text h1 {
        text-wrap: auto;
        font-size: var(--size-lg);
        text-transform: none
    }

    a.journeys-link:hover {
        text-decoration: none
    }

    article.practice-card {
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        height: 482px;
        justify-content: space-between;
        overflow: hidden;
        position: relative;
        width: 376px
    }

    article.practice-card div {
        padding: 1rem
    }

    article.practice-card .meta {
        align-items: center;
        background-color: var(--color-white);
        display: flex;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        gap: var(--space-xs);
        justify-content: flex-start;
        text-transform: uppercase;
        z-index: var(--Z-INDEX-3)
    }

    article.practice-card .bg-image {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: var(--Z-INDEX-2)
    }

    article.practice-card .text {
        background-color: var(--color-white);
        color: var(--color-aubergine);
        font-size: var(--size-sm);
        z-index: var(--Z-INDEX-3)
    }

    ;

    article.practice-card .text h1 {
        font-size: var(--size-lg);
        text-transform: none
    }

    .resource-card {
        --card-bg-color: var(--color-white)
    }

    .resource-card.sans-heading {
        display: none
    }

    .resource-card.large {
        max-width: 752px;
        min-height: 585px;
        width: 752px
    }

    @media screen and (min-width:800px) {
        .resource-card.large {
            grid-column: span 2;
            grid-row: span 2
        }
    }

    .resource-card.large img {
        aspect-ratio: 1/1;
        -o-object-fit: cover;
        object-fit: cover
    }

    .resource-card h1 {
        text-transform: none
    }

    .worksheet-card {
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        height: 482px;
        justify-content: space-between;
        overflow: hidden;
        position: relative;
        width: 376px
    }

    .worksheet-card .meta {
        align-items: center;
        background-color: var(--color-white);
        color: var(--color-aubergine);
        display: flex;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        gap: var(--space-xs);
        justify-content: flex-start;
        padding: 1rem;
        text-transform: uppercase;
        z-index: var(--Z-INDEX-2)
    }

    .worksheet-card .bg-image {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(.5rem);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .worksheet-card .faded-bg {
        display: none
    }

    .worksheet-card .text {
        color: var(--color-white);
        font-size: var(--size-sm);
        min-height: 6rem;
        padding: 1rem;
        width: auto;
        z-index: var(--Z-INDEX-2)
    }

    .worksheet-card.no-blur .bg-image {
        filter: none
    }

    .worksheet-card.no-blur .text {
        background-color: var(--color-white);
        color: var(--color-aubergine)
    }

    .worksheet-card.coral-fade .faded-bg {
        background-color: var(--color-coral);
        display: block;
        height: 100%;
        left: 0;
        opacity: .35;
        position: absolute;
        top: 0;
        width: 100%
    }

    .embla {
        --slide-height: 19rem;
        --slide-spacing: 1rem;
        --slide-size: 100%;
        --slide-spacing-sm: 1.6rem;
        --slide-size-sm: 50%;
        --slide-spacing-lg: 2rem;
        --slide-size-lg: 33.33333%;
        max-width: 89vw;
        overflow: visible;
        position: relative
    }

    .embla__viewport {
        overflow: hidden;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: var(--Z-INDEX-CAROUSEL-VIEWPORT)
    }

    @media screen and (min-width:750px) {
        .embla__viewport {
            margin-left: 6rem;
            width: 80%
        }
    }

    .embla__container {
        backface-visibility: hidden;
        display: flex;
        gap: 1rem;
        margin-left: calc(var(--slide-spacing)*-1);
        padding-block: 1rem;
        touch-action: pan-y pinch-zoom
    }

    @media (min-width:750px) {
        .embla__container {
            margin-left: calc(var(--slide-spacing-sm)*-1)
        }
    }

    @media (min-width:1200px) {
        .embla__container {
            margin-left: calc(var(--slide-spacing-lg)*-1)
        }
    }

    .embla__container {
        pointer-events: none
    }

    .embla__container .embla__slide {
        flex: 0 0 var(--slide-size);
        max-width: 300px;
        min-width: 0;
        pointer-events: auto
    }

    @media (min-width:750px) {
        .embla__container .embla__slide {
            flex: 0 0 var(--slide-size-sm)
        }
    }

    @media (min-width:1200px) {
        .embla__container .embla__slide {
            flex: 0 0 var(--slide-size-lg)
        }
    }

    .embla__container.blurring:hover .embla__slide:not(:hover) {
        opacity: .5;
        transform: scale(.975);
        transition: all .3s ease
    }

    .embla__container.blurring .embla__slide:hover {
        opacity: 1;
        transform: scale(1.025)
    }

    .embla__buttons {
        align-items: center;
        display: none;
        flex-direction: row;
        gap: .6rem;
        height: 300px;
        justify-content: space-between;
        left: 0;
        margin-block-start: 26px;
        position: absolute;
        top: 0;
        width: 93%;
        z-index: var(--Z-INDEX-CAROUSEL-BUTTONS)
    }

    .embla__button {
        -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), .5);
        align-items: center;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid var(--color-aubergine);
        border-radius: 50%;
        box-shadow: inset 0 0 0 .2rem var(--detail-medium-contrast);
        cursor: pointer;
        display: flex;
        height: 3.6rem;
        justify-content: center;
        margin: 0;
        padding: 0;
        text-decoration: none;
        touch-action: manipulation;
        width: 3.6rem;
        z-index: var(--Z-INDEX-1)
    }

    .embla__button,
    .embla__button.light {
        background-color: var(--color-honey);
        color: var(--color-aubergine)
    }

    .embla__button.dark {
        background-color: var(--color-aubergine);
        color: var(--color-honey);
        outline-color: var(--color-aubergine)
    }

    .embla__button.brown {
        background-color: var(--color-brown);
        color: var(--color-aubergine)
    }

    .embla__button.coral {
        background-color: var(--color-coral);
        border-width: 2px;
        color: var(--color-aubergine)
    }

    .embla__button:disabled {
        cursor: default;
        opacity: .5
    }

    .embla__button:not(:disabled):focus-visible,
    .embla__button:not(:disabled):hover {
        transform: scale(1.125);
        transition: all .125s ease
    }

    .embla__button__svg {
        height: 35%;
        width: 35%
    }

    .embla.js,
    .embla.js .embla__viewport {
        overflow: hidden
    }

    .embla.js .embla__buttons {
        display: flex
    }

    .footer-grid {
        display: grid;
        gap: var(--s1);
        grid-template-columns: 1fr
    }

    footer {
        --region-space-bottom: var(--space-s, 1rem)
    }

    footer #svg-wordmark {
        fill: var(--color-coral);
        height: 142px;
        width: 240px
    }

    footer .socmed,
    footer h2 {
        display: flex;
        gap: 4rem;
        justify-content: center
    }

    footer .socmed a:hover,
    footer h2 a:hover {
        color: var(--color-honey)
    }

    .footer-nav {
        --s1: var(--space-l);
        --stack-vertical-alignment: space-between;
        margin-inline-start: 0;
        text-transform: uppercase
    }

    .footer-nav a {
        display: block;
        font-size: var(--size-base)
    }

    .footer-nav a:hover {
        color: var(--color-honey)
    }

    .footer-nav a:before {
        background-color: var(--color-honey)
    }

    .cell-form {
        --stack-vertical-alignment: space-between;
        --stack-horizontal-alignment: stretch
    }

    .cell-form h2 {
        font-size: var(--size-md);
        justify-content: flex-start
    }

    .cell-form p.description {
        display: none
    }

    .cell-form form {
        flex-direction: column
    }

    .cell-nav {
        --stack-horizontal-alignment: center
    }

    .cell-socmed svg {
        fill: currentColor;
        height: 54px;
        width: 54px
    }

    .cell-extra {
        --cluster-horizontal-alignment: flex-start;
        --region-space-top: var(--space-xl)
    }

    @media screen and (min-width:1132px) {
        .footer-grid {
            grid-template-columns: 25% 25% 50%;
            grid-template-rows: repeat(3)
        }

        .cell-wordmark {
            grid-column: 1
        }

        .cell-nav {
            --stack-horizontal-alignment: flex-start;
            grid-column: 2;
            grid-row: 1/span 2
        }

        .cell-form {
            --region-space-top: 0;
            --region-space-bottom: 0;
            grid-column: 3;
            grid-row: 1/span 2
        }

        .cell-form p.description {
            display: block
        }

        .cell-form form {
            flex-direction: column
        }

        .cell-socmed {
            grid-column: 1;
            grid-row: 2
        }

        .cell-extra {
            grid-column: 1/span 3;
            grid-row: 3
        }
    }

    .contact-form-container {
        color: var(--color-aubergine);
        display: flex;
        flex-direction: column;
        font-size: var(--size-md);
        gap: 1rem
    }

    .contact-form-container .form-group,
    .contact-form-container p {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding-block: 2rem
    }

    .contact-form-container .help-text {
        font-size: var(--size-sm)
    }

    .contact-form-container abbr {
        text-decoration: none
    }

    .contact-form-container input,
    .contact-form-container textarea {
        background-color: transparent;
        border: 1px solid var(--color-aubergine);
        border-radius: .5rem;
        padding: .5rem;
        padding-inline-start: 1.5rem
    }

    .contact-form-container textarea {
        min-width: 100%
    }

    .contact-form-container input:not([type=checkbox]) {
        width: 100%
    }

    .contact-form-container input[type=checkbox] {
        height: 20px;
        width: 20px
    }

    .contact-form-container .wpcf7-list-item {
        margin: 0 !important
    }

    .contact-form-container button[type=submit],
    .contact-form-container input[type=submit] {
        background-color: var(--color-aubergine);
        border-radius: 5rem;
        color: var(--color-honey);
        cursor: pointer;
        padding: .5rem 3rem;
        text-align: center;
        width: -moz-max-content;
        width: max-content
    }

    .contact-form-container input[type=submit]:disabled {
        cursor: not-allowed;
        opacity: .5
    }

    .contact-form-container .honeypot {
        left: -9999px;
        position: absolute
    }

    .contact-form-container .wpcf7-not-valid-tip {
        color: var(--color-honey) !important
    }

    .contact-form-container p:has(input[aria-invalid=true]) *,
    .contact-form-container p:has(textarea[aria-invalid=true]) * {
        border-color: var(--color-coral) !important;
        color: var(--color-coral) !important
    }

    .contact-form-container input[aria-invalid=true],
    .contact-form-container textarea[aria-invalid=true] {
        border-color: var(--color-honey);
        border-width: 5px
    }

    .contact-form-container .wpcf7-response-output {
        border-color: var(--color-coral) !important;
        border-radius: .5rem
    }

    .newsletter-form-container .input-group {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 1rem;
        text-transform: uppercase
    }

    .newsletter-form-container input[type=text] {
        background-color: var(--color-aubergine);
        border: 2px solid var(--input-border, var(--color-coral));
        border-radius: 5rem;
        flex: 1;
        padding: 10px;
        width: 100%
    }

    .newsletter-form-container input[type=text]::-moz-placeholder {
        color: var(--placeholder-color, var(--color-coral));
        font-size: var(--size-sm);
        text-transform: uppercase
    }

    .newsletter-form-container input[type=text]::placeholder {
        color: var(--placeholder-color, var(--color-coral));
        font-size: var(--size-sm);
        text-transform: uppercase
    }

    .newsletter-form-container button[type=submit] {
        background-color: var(--button-bg, var(--color-coral));
        border: 2px solid var(--button-bg, var(--color-coral));
        border-radius: var(--button-border-radius, 10rem);
        color: var(--button-text, var(--color-aubergine));
        flex: 1;
        padding-block: 10px;
        text-align: center;
        width: 100%
    }

    .newsletter-form-container button[type=submit]:hover {
        --button-bg: var(--color-honey);
        --button-border: var(--color-honey);
        --button-text: var(--color-aubergine)
    }

    @media (min-width:600px) {
        .newsletter-form-container .input-group {
            flex-direction: row
        }

        .newsletter-form-container input[type=text] {
            flex: 2
        }

        .newsletter-form-container button[type=submit] {
            border-radius: 5rem;
            cursor: pointer
        }
    }

    .input--hidden {
        display: none !important
    }

    #guest {
        flex-direction: column;
        grid-column-end: full-end;
        grid-column-start: full-start
    }

    @media(min-width:750px) {
        #guest {
            flex-direction: row;
            grid-column-end: content-end
        }
    }

    #guest {
        background-color: var(--color-honey);
        display: flex;
        gap: 2rem;
        padding: 2rem
    }

    #guest .bio-avatar,
    #guest .bio-details {
        background-color: var(--color-honey);
        grid-column-end: content-end;
        grid-column-start: full-start
    }

    #guest .bio-details {
        font-size: var(--size-lg);
        margin-block-start: 0
    }

    #guest figure {
        border-radius: 50%;
        flex-shrink: 0;
        height: 200px;
        overflow: hidden;
        width: 200px
    }

    .jump-links {
        display: none;
        padding: .5rem
    }

    @media (min-width:750px) {
        .jump-links {
            display: flex;
            flex-direction: column;
            margin-block-end: 2rem;
            position: sticky;
            top: 0;
            z-index: var(--Z-INDEX-JUMP-LINKS)
        }
    }

    .jump-links nav {
        padding: .5rem
    }

    .jump-links nav li,
    .jump-links nav ul {
        background-image: unset;
        list-style-type: none;
        margin: 0;
        padding: 0
    }

    .jump-links ul {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: .5rem;
        justify-content: space-around
    }

    .jump-links li a {
        font-size: var(--size-sm)
    }

    .navigation {
        position: fixed;
        right: 0;
        top: 0;
        z-index: var(--Z-INDEX-NAV)
    }

    .navigation #toggle {
        opacity: 0
    }

    .navigation .hamburger {
        background-color: var(--color-aubergine);
        border-radius: 7px 0 0 7px;
        color: var(--color-honey);
        height: 45px;
        margin-left: -2em;
        margin-top: -45px;
        padding: .25rem;
        position: absolute;
        right: 0;
        top: 4em;
        width: 2em;
        z-index: var(--Z-INDEX-5)
    }

    .navigation .hamburger>svg {
        height: 40px;
        width: 40px
    }

    .navigation .hamburger>#nav-burger-closed {
        display: block
    }

    .navigation .hamburger>#nav-burger-open {
        display: none
    }

    .navigation .nav-modal {
        align-items: center;
        background-color: var(--color-honey);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        height: 100vh;
        justify-content: center;
        left: -100vw;
        line-height: 1.5ch;
        min-width: 100vw;
        opacity: 0;
        overflow: hidden;
        position: fixed;
        text-transform: uppercase;
        top: -100vh;
        width: 100vw
    }

    .navigation nav {
        color: var(--color-black);
        margin-left: 25%;
        text-align: left
    }

    .navigation nav ul {
        padding-inline-start: 0
    }

    .navigation nav li {
        max-inline-size: unset;
        padding-left: 2rem;
        width: -moz-max-content;
        width: max-content
    }

    .navigation nav a {
        display: inline-block;
        position: relative;
        text-decoration: none
    }

    @media screen and (min-width:750px) and (prefers-reduced-motion:no-preference) {
        .navigation nav a {
            transition: color .2s ease-in-out
        }
    }

    .navigation nav a {
        font-size: var(--size-xl);
        letter-spacing: 1px
    }

    @media screen and (min-width:750px) {
        .navigation nav a {
            font-size: var(--size-2xl)
        }
    }

    .navigation nav a {
        line-height: 1
    }

    .navigation nav a:focus-visible {
        outline: none
    }

    .navigation nav a:before {
        background-color: var(--color-plum);
        content: "";
        height: 0;
        left: -.5em;
        position: absolute;
        width: .25em
    }

    @media screen and (prefers-reduced-motion:no-preference) {
        .navigation nav a:before {
            transition: height .2s ease-in-out
        }
    }

    .navigation nav a:focus,
    .navigation nav a:hover {
        color: var(--color-plum)
    }

    .navigation nav a:focus:before,
    .navigation nav a:hover:before {
        height: 100%
    }

    @media screen and (min-width:750px) and (prefers-reduced-motion:no-preference) {
        .navigation nav .nav-list {
            align-items: center;
            box-sizing: content-box;
            display: flex;
            flex-direction: column;
            margin-inline: auto;
            max-inline-size: 60ch
        }
    }

    .navigation nav .nav-list li {
        max-width: 75vw
    }

    @media screen and (prefers-reduced-motion:no-preference) {

        .navigation #toggle:active~label,
        .navigation #toggle:focus~label,
        .navigation #toggle:hover~label {
            transform: scale(1.25);
            transition: transform .3s ease-in-out
        }
    }

    @media screen and (prefers-reduced-motion:reduce) {

        .navigation #toggle:active~label,
        .navigation #toggle:focus~label,
        .navigation #toggle:hover~label {
            outline: .25rem solid blue;
            outline-offset: 3px
        }
    }

    .navigation #toggle:checked+.hamburger #nav-burger-closed {
        display: none
    }

    .navigation #toggle:checked+.hamburger #nav-burger-open {
        display: block
    }

    .navigation #toggle:checked+.hamburger+.nav-modal {
        left: 0;
        opacity: 1;
        top: 0
    }

    @media screen and (min-width:750px) and (prefers-reduced-motion:no-preference) {
        .navigation #toggle:checked+.hamburger+.nav-modal {
            transition: opacity .3s ease-in-out
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li {
            transition: padding .5s ease-in-out
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:first-child {
            transition-delay: 0s
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(2) {
            transition-delay: 1s
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(3) {
            transition-delay: .5s
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(4) {
            transition-delay: .75s
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:first-child {
            padding-inline-start: 3ch
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(2) {
            padding-inline-end: 18ch
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(3) {
            padding-inline-start: 12ch
        }

        .navigation #toggle:checked+.hamburger+.nav-modal li:nth-child(4) {
            padding-inline-end: 10.8ch
        }
    }

    .navigation #nav-search {
        align-self: stretch;
        margin-block-start: 2rem
    }

    body.no-js .navigation #nav-burger {
        display: none
    }

    body.no-js .navigation #nav-modal {
        background-color: var(--color-honey);
        left: 0;
        opacity: 1;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: var(--Z-INDEX-NAV-MODAL)
    }

    body.no-js .navigation .primary-nav {
        font-size: var(--size-2xl);
        line-height: 1.5ch
    }

    body.no-js .navigation .primary-nav a {
        color: var(--color-black);
        text-decoration: none;
        text-transform: uppercase
    }

    body.no-js .navigation .primary-nav a:hover {
        color: var(--color-plum)
    }

    body.no-js .navigation .primary-nav ul {
        list-style-type: none
    }

    body.about .banner {
        background-position: 50%;
        background-repeat: no-repeat
    }

    body.blank {
        background-color: var(--color-white);
        color: var(--color-aubergine)
    }

    body.blank main h1 {
        font-size: var(--size-xl)
    }

    body.blank main h2 {
        font-size: var(--size-lg)
    }

    body.blank main ul {
        list-style-type: disc
    }

    body.blank main ul li {
        padding-left: 0
    }

    body.contact {
        background-color: var(--color-white)
    }

    @media screen and (max-width:750px) {
        body.contact .banner {
            gap: 27rem
        }

        body.contact .banner h1 {
            font-size: var(--size-xl)
        }
    }

    body.contact .banner {
        background-position-y: 50%
    }

    body.contact main ul {
        list-style-type: disc
    }

    body.contact main ul li {
        padding-left: 0
    }

    body.contact .body {
        --wrapper-width: 45ch
    }

    body.contact .body ul li {
        margin-block-end: unset
    }

    body.contact .contact-form-container {
        color: unset
    }

    body.contact .contact-form-container input,
    body.contact .contact-form-container textarea {
        border-color: var(--color-honey)
    }

    body.journeys section.journeys-intro {
        --section-height: auto;
        background-color: #33233a;
        color: #ff8d77;
        gap: 2rem
    }

    body.journeys section.journeys-intro .stack {
        max-inline-size: 54rem
    }

    body.journeys section.journeys-intro .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-m-l);
        justify-content: flex-end
    }

    body.journeys section.journeys-intro .card-container ul {
        display: flex;
        flex-direction: row;
        gap: 1.75rem
    }

    @media (max-width:900px) {
        body.journeys section.journeys-intro .card-container ul {
            flex-direction: column
        }
    }

    body.journeys article.journey {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg)
    }

    body.journeys article.journey .banner {
        align-items: flex-start;
        background-color: #603526;
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        justify-content: flex-end;
        max-height: 760px
    }

    body.journeys article.journey .banner h1 {
        align-self: unset;
        color: #fff
    }

    body.journeys article.journey .content {
        background-color: #fff;
        color: #33233a;
        display: flex
    }

    @media screen and (min-width:850px) {
        body.journeys article.journey .content {
            flex-direction: row
        }
    }

    body.journeys article.journey .content .journey-meta {
        color: var(--Torn-Aubergine, #33233a);
        font-family: var(--font-relative);
        font-size: 20px;
        font-style: normal;
        font-weight: 750;
        letter-spacing: .2px;
        line-height: 40px;
        text-transform: uppercase
    }

    body.journeys article.journey .content .journey-meta ul {
        margin-block-start: 0;
        padding-inline: 0
    }

    body.journeys article.journey .content .journey-meta ul li {
        background-image: none;
        padding-inline: 0
    }

    @media screen and (min-width:850px) {
        body.journeys article.journey .content .journey-body {
            width: 50%
        }
    }

    body.journeys article.journey .content .journey-body h2 {
        font-size: var(--size-lg)
    }

    body.journeys article.journey .content .journey-body summary {
        align-items: center;
        display: flex;
        font-size: var(--size-lg);
        font-weight: 700;
        justify-content: space-between;
        list-style: none
    }

    body.journeys article.journey .content .journey-body summary:after {
        background: url(../icons/arrow.svg) no-repeat;
        background-size: cover;
        content: "";
        height: 10px;
        transition: .2s;
        width: 18px
    }

    body.journeys article.journey .content .journey-body details[open]>summary:after {
        transform: rotate(180deg)
    }

    body.journeys article.journey .content .journey-body summary::-webkit-details-marker {
        display: none
    }

    body.journeys article.journey .content .journey-body summary {
        border-radius: 5px
    }

    body.journeys article.journey .content .journey-body details[open] summary {
        border-radius: 5px 5px 0 0
    }

    body.journeys article.journey .content .journey-body details {
        border-block-end: solid 1px var(--color-aubergine);
        margin-block-end: 2rem;
        padding-block-end: 1rem
    }

    body.journeys article.journey .content .journey-body details:has(summary:empty) {
        display: none
    }

    body.landing .body {
        letter-spacing: .005ch
    }

    body.landing .landing-readmore {
        margin: var(--gutter, 1rem);
        width: unset
    }

    @media (max-width:750px) {
        body.podcast h1 {
            font-size: var(--size-2xl)
        }
    }

    body.podcast .transcript {
        margin-top: 2rem
    }

    body.podcast .transcript p {
        margin-block-end: 1rem
    }

    body.podcast .transcript strong {
        display: block;
        position: relative
    }

    @media (min-width:750px) {
        body.podcast .transcript strong {
            padding-inline-end: .75rem;
            position: absolute;
            right: 100%;
            text-align: right;
            width: 50%
        }
    }

    body.podcast .resource .body img {
        width: unset
    }

    body.podcast #resources h3 {
        font-size: var(--size-lg)
    }

    @media (min-width:750px) {
        body.podcast #resources h3 {
            font-size: var(--size-xl)
        }
    }

    body.podcast #resources ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        list-style-type: none;
        padding-inline-start: 0
    }

    @media (min-width:750px) {
        body.podcast #resources ul.references-list {
            flex-direction: row
        }
    }

    body.podcast #resources ul.references-list .reference-item {
        align-items: flex-end;
        background-image: none;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-block-end: 1rem;
        padding-inline-start: 0
    }

    @media (min-width:750px) {
        body.podcast #resources ul.references-list .reference-item {
            flex-direction: row;
            gap: 1rem;
            width: 50%
        }
    }

    body.podcast #resources ul.references-list .reference-item .reference-details {
        align-self: flex-end;
        font-size: var(--size-sm)
    }

    body.podcast #resources ul.references-list .reference-item .reference-book-cover img {
        height: auto;
        width: 200px
    }

    @media (min-width:750px) {
        body.podcast #resources ul.references-list .reference-item .reference-book-cover img {
            height: 200px;
            min-width: 150px;
            -o-object-fit: cover;
            object-fit: cover;
            width: 150px
        }
    }

    @media (max-width:750px) {
        body.podcast #references ul {
            align-items: center;
            gap: 2rem;
            padding-inline-start: 0
        }

        body.podcast #references ul .reference-item {
            gap: 1rem
        }

        body.podcast #references ul .reference-item .reference-details {
            align-self: center
        }
    }

    body.podcast .section-notes .audio-player-links {
        max-width: -moz-min-content;
        max-width: min-content;
        position: absolute;
        right: 0;
        top: 0;
        z-index: var(--Z-INDEX-AUDIO-LINKS)
    }

    @media (max-width:1200px) {
        body.podcast .section-notes .audio-player-links {
            position: relative
        }
    }

    @media (max-width:750px) {
        body.podcast .section-notes {
            display: flex;
            flex-direction: column
        }

        body.podcast .section-notes #show-notes {
            order: 2
        }

        body.podcast .section-notes .audio-player-links {
            margin-inline-start: 5vw;
            order: 1
        }

        body.podcast .section-notes .audio-links {
            align-items: center;
            display: flex;
            flex-direction: column
        }
    }

    body.podcast .jump-anchor {
        padding-block-start: 4rem
    }

    body.podcast .jump-anchor#guest {
        padding-block-start: 6rem
    }

    #credits {
        margin-block-start: 6rem
    }

    #credits h4 {
        font-size: var(--size-md)
    }

    #credits p {
        font-size: var(--size-xs)
    }

    body#privacy-policy .banner svg {
        color: var(--color-honey);
        height: 20rem;
        top: 10rem;
        width: 30rem
    }

    .resource {
        padding-block-end: 6rem
    }

    .resource header {
        margin-block-end: var(--flow-space, 1em)
    }

    .resource header blockquote {
        --blockquote-quote-size: 8rem;
        --blockquote-spacing: 2rem;
        --blockquote-font-size: var(--size-lg)
    }

    .resource .meta-title {
        --content: 45ch
    }

    @media screen and (max-width:750px) {
        .resource .meta-title {
            --content: 90%
        }
    }

    .resource .meta {
        display: flex;
        flex-direction: row;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        padding-block-end: 2rem;
        padding-block-start: .5rem;
        text-transform: uppercase
    }

    .resource .meta [class^=icon-] {
        height: 30px;
        padding-inline-end: .5rem;
        width: 30px
    }

    .resource .meta .icon-article {
        content: url(../icons/article.svg)
    }

    .resource .meta .icon-guide {
        content: url(../icons/file-text-line.svg)
    }

    .resource .meta .icon-love {
        content: url(../icons/heart-line.svg)
    }

    .resource .meta .icon-qandas {
        content: url(../icons/question-answer-line.svg)
    }

    .resource .meta .icon-podcast {
        content: url(../icons/headphones.svg)
    }

    .resource .meta .icon-story {
        content: url(../icons/story.svg)
    }

    .resource .meta .article-type {
        text-transform: capitalize
    }

    .resource .meta .icon-publication-date {
        content: url(../icons/calendar.svg);
        padding-inline-end: .5rem;
        padding-inline-start: 1.5rem
    }

    .resource .body {
        --wrapper-width: 45ch
    }

    .resource .body .block-type-image,
    .resource .body .block-type-quote,
    .resource .body blockquote,
    .resource .body img {
        background-color: var(--color-honey);
        grid-column-end: content-end;
        grid-column-start: full-start
    }

    .resource .body blockquote.bleed-right {
        grid-column-end: full-end
    }

    .resource .body .block-type-image img,
    .resource .body img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .resource .body .block-type-quote blockquote,
    .resource .body blockquote {
        border-inline-start: 0
    }

    .resource .body .block-type-image+.block-type-quote,
    .resource .body img+blockquote {
        margin-block-start: 0
    }

    .resource .body h2 {
        font-size: var(--size-lg)
    }

    .resource .body ul {
        list-style-type: disc
    }

    .resource .body .small-print {
        font-size: var(--size-sm)
    }

    .resource .body .top-space {
        margin-block-start: var(--space-2xl)
    }

    .resource .button.readmore {
        margin-block-start: 4rem
    }

    body.resources {
        background-color: var(--color-honey)
    }

    body.resources .blurb {
        color: var(--color-aubergine);
        padding: 2rem
    }

    body.resources .blurb p {
        max-inline-size: unset
    }

    .next-cta {
        grid-template-columns: repeat(1, 1fr);
        padding: 2rem
    }

    @media screen and (min-width:800px) {
        .next-cta {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (min-width:1098px) {
        .next-cta {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    .next-cta .card.next-card {
        border-radius: 6.8px;
        height: unset;
        max-height: unset;
        max-width: unset;
        min-height: unset;
        min-width: unset;
        width: unset
    }

    .next-cta .card.next-card .meta {
        background-color: var(--color-coral);
        font-family: var(--font-base);
        font-size: var(--size-md);
        height: 72px;
        line-height: 26px;
        padding: 1rem;
        text-transform: unset
    }

    .next-cta .card.next-card img {
        flex-grow: 1
    }

    .pagination {
        --wrapper-width: 45ch;
        display: flex;
        flex-direction: row;
        grid-column: content;
        justify-content: space-between
    }

    @media screen and (min-width:1098px) {
        .pagination {
            --gap: clamp(1rem, 6vw, 3rem);
            --full: minmax(var(--gap), 1fr);
            --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
            display: grid;
            grid-column: full;
            grid-template-columns: [full-start] var(--full) [center-start] var(--content) [center-end] var(--full) [full-end]
        }
    }

    .pagination a {
        display: flex;
        flex-direction: column
    }

    .pagination-next,
    .pagination-prev {
        margin-block-end: 2rem;
        transition: border .25s ease-in
    }

    .pagination-next:hover,
    .pagination-prev:hover {
        border-color: var(--color-plum)
    }

    .pagination-next span,
    .pagination-prev span {
        display: inline-block;
        margin-block-start: 1rem
    }

    .pagination-next span.label,
    .pagination-prev span.label {
        font-size: var(--size-sm);
        text-transform: uppercase
    }

    .pagination-next span.title,
    .pagination-prev span.title {
        text-wrap: balance
    }

    @media screen and (max-width:1098px) {

        .pagination-next span.title,
        .pagination-prev span.title {
            display: none
        }

        .pagination-next span.label,
        .pagination-prev span.label {
            word-break: break-all
        }
    }

    .pagination-next svg,
    .pagination-prev svg {
        height: 80px;
        width: 80px
    }

    .pagination-next a:focus,
    .pagination-next a:hover,
    .pagination-prev a:focus,
    .pagination-prev a:hover {
        color: var(--color-plum)
    }

    @media screen and (min-width:1098px) {
        .pagination-prev {
            grid-column-end: center-start;
            grid-column-start: full-start
        }

        .pagination-prev .title {
            text-align: right
        }
    }

    .pagination-prev {
        align-items: flex-start;
        border-inline-end: .5rem solid transparent
    }

    .pagination-prev svg {
        transform: rotate(180deg)
    }

    @media screen and (min-width:1098px) {
        .pagination-prev a {
            align-items: flex-end;
            justify-content: flex-end
        }

        .pagination-next {
            grid-column-end: full-end;
            grid-column-start: center-end
        }
    }

    .pagination-next {
        border-inline-start: .5rem solid transparent;
        padding-inline-start: 1rem
    }

    .pagination-next:before {
        background-color: var(--color-plum);
        content: "";
        height: 0;
        left: -.5em;
        position: absolute;
        width: .25em
    }

    @media (prefers-reduced-motion:no-preference) {
        .pagination-next:before {
            transition: height .2s ease-in-out
        }
    }

    .pagination-next:hover:after {
        height: 100%
    }

    .pathway {
        background-color: var(--color-white);
        border: 1px solid var(--color-aubergine);
        border-radius: 1rem;
        font-size: var(--size-sm);
        grid-column: feature-start;
        grid-row: 1/8;
        height: -moz-max-content;
        height: max-content;
        left: 2rem;
        max-width: 20vw;
        padding: 1rem;
        position: sticky;
        top: 4rem;
        z-index: var(--Z-INDEX-JUMP-LINKS)
    }

    .pathway h3 {
        font-size: var(--size-md)
    }

    .pathway ol,
    .pathway ul {
        list-style-position: inside;
        padding-inline-start: 0
    }

    .pathway ol a,
    .pathway ul a {
        text-decoration: none
    }

    .pathway ol a:hover,
    .pathway ul a:hover {
        text-decoration: underline
    }

    .pathway .past a {
        color: grey;
        text-decoration: none
    }

    .pathway .next {
        font-weight: 700
    }

    .pathway .next a:after {
        content: ">>";
        margin-inline-start: .5rem
    }

    .pathway .next a:hover {
        text-decoration: underline
    }

    .pathway .current {
        background-color: #000;
        color: #fff;
        font-weight: 700;
        padding: .5rem 1rem
    }

    .resource-qanda .pathway {
        grid-row: 1/5
    }

    .pathway:nth-of-type(2) {
        display: none
    }

    body.landing .pathway {
        grid-column: content;
        grid-row: inherit;
        left: 0;
        margin-block-end: 0;
        margin-block-start: 4rem;
        max-width: unset;
        position: relative;
        top: 0
    }

    @media screen and (max-width:1200px) {
        body:not(.landing) .pathway {
            display: block;
            grid-column: content;
            grid-row: 1;
            grid-row: unset;
            left: 0;
            margin-block-end: 2rem;
            margin-block-start: 4rem;
            max-width: unset;
            position: relative;
            top: 0
        }
    }

    .prose {
        --flow-space: var(--space-m-l, 1rem);
        --wrapper-width: 45ch
    }

    .prose p {
        max-inline-size: 45ch
    }

    .resources-filter {
        gap: var(--gutter, var(--space-s-m));
        padding-inline: 2rem
    }

    .resources-filter .dropdown-container .dropdown {
        background-color: var(--color-honey);
        border: 2px solid var(--color-aubergine);
        border-radius: 5rem;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
        color: var(--color-aubergine);
        cursor: pointer;
        display: inline-block;
        line-height: 2.5rem;
        position: relative;
        text-transform: uppercase
    }

    .resources-filter .dropdown-container .dropdown .select {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-inline: 1rem;
        padding-block: .25rem
    }

    .resources-filter .dropdown-container .dropdown .dropdown-content {
        background-color: var(--color-honey);
        margin: .2rem;
        padding: 0 1rem 1rem;
        text-transform: none;
        z-index: 1
    }

    .resources-filter .dropdown-container .dropdown .dropdown-content ul {
        --gutter: 0.5rem;
        border-block-start: 2px solid var(--color-aubergine);
        list-style: none;
        margin-block-start: 1rem;
        padding-block-start: 1rem;
        padding-inline-start: 0
    }

    .resources-filter .dropdown-container .dropdown .dropdown-content ul li {
        margin-block-end: var(--gutter, 1em);
        max-inline-size: 65ch;
        padding-inline-start: 1rem
    }

    .resources-filter .dropdown-container .dropdown .dropdown-content .button-outline {
        padding: 0
    }

    .resources-filter .dropdown-container.open .dropdown {
        border-radius: 1rem
    }

    .resources-filter .dropdown-container.open .dropdown svg {
        transform: rotate(180deg)
    }

    .resources-filter .filters-cell {
        display: flex;
        flex-direction: row;
        font-size: var(--size-sm);
        gap: var(--gutter, var(--space-s-m));
        justify-content: space-between
    }

    .search-cell form {
        --gutter: 1rem;
        display: flex;
        flex-direction: column;
        gap: var(--gutter, var(--space-s-m))
    }

    @media (max-width:750px) {

        .resources-filter .double-cell,
        .resources-filter .filters-cell {
            flex-direction: column
        }

        .resources-filter .dropdown,
        .resources-filter .dropdown-container {
            width: 100%
        }

        .resources-filter .dropdown {
            cursor: pointer
        }

        .resources-filter .button-filters {
            padding-inline: unset;
            width: 100%
        }
    }

    .search-form-cell form {
        display: flex;
        gap: var(--gutter)
    }

    @media (max-width:750px) {
        .search-form-cell form {
            flex-direction: column
        }
    }

    .search-form-cell .search {
        display: flex;
        width: 100%
    }

    .search-form-cell .search-button {
        border: 2px solid var(--color-aubergine);
        border-inline-start-width: 0
    }

    .search-form-cell input {
        background-color: var(--color-honey);
        border-color: #33233a;
        border-radius: 2rem 0 0 2rem;
        border-right-width: 0;
        color: #33233a;
        flex-grow: 1;
        font-size: 1.2rem;
        outline: 0;
        padding: .25rem
    }

    .search-form-cell input[type=text] {
        font-size: var(--size-sm);
        padding-inline-start: 2rem
    }

    .search-form-cell input::-moz-placeholder {
        color: #33233a
    }

    .search-form-cell input::placeholder {
        color: #33233a
    }

    .search-form-cell input.button {
        line-height: 2.5rem;
        min-width: 14rem;
        padding-block: .25rem
    }

    .search-form-cell button[type=submit] {
        align-items: center;
        background: var(--color-honey);
        border-color: #33233a;
        border-left-width: 0;
        border-radius: 0 2rem 2rem 0;
        color: var(--button-color-text);
        display: inline-flex;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
        gap: .5rem;
        justify-content: var(--button-align);
        line-height: 1;
        overflow-x: clip;
        padding: .25rem;
        position: relative;
        text-align: var(--button-align);
        white-space: nowrap
    }

    .search-form-cell button[type=submit]>svg {
        block-size: 3ex
    }

    .search-form-cell .button-clear-search {
        background-color: var(--color-honey);
        border-color: var(--color-aubergine);
        border-radius: 2rem 2rem 2rem 2rem;
        border-right-width: unset;
        font-size: var(--size-sm);
        min-width: 14rem;
        text-transform: uppercase
    }

    .search-form-cell .button-clear-search:not(.faded) {
        cursor: pointer
    }

    .resources-button {
        background-color: var(--color-honey);
        border-color: var(--color-aubergine);
        border-radius: 2rem;
        font-size: 1.2rem;
        line-height: 2.5rem;
        min-width: 14rem;
        text-transform: uppercase
    }

    .resources-filter-grid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: space-between
    }

    @media (max-width:1440px) {
        .resources-filter-grid {
            grid-template-columns: repeat(1, auto)
        }
    }

    @media (max-width:750px) {
        .resources-filter-grid {
            justify-content: stretch
        }
    }

    .filter-messages {
        padding-block-start: 3rem;
        padding-inline: 2rem
    }

    .clear-filter-buttons {
        display: flex;
        gap: 3rem;
        font-size: var(--size-sm);
    }

    @media (max-width:750px) {
        .clear-filter-buttons {
            flex-direction: column
        }
    }


    .filter-messages .clear-filter-buttons a span {
        color: var(--color-plum)
    }

    .filter-messages .clear-filter-buttons a:hover span {
        color: var(--color-honey)
    }

    .search:focus-within {
        border-width: .25rem
    }

    @media (min-width:750px) {
        section {
            padding-inline: 64px
        }
    }

    section {
        display: flex;
        flex-direction: column;
        gap: var(--size-xl);
        justify-content: space-between;
        padding-block-end: 56px;
        padding-block-start: 26px
    }

    section .card-container.cluster {
        --cluster-horizontal-alignment: center
    }

    @media screen and (min-width:750px) {
        section .card-container.cluster {
            --cluster-horizontal-alignment: flex-end
        }
    }

    section:not(.banner, .interstitial, .bg)>* {
        margin-inline: 1rem
    }

    section.bg {
        background: linear-gradient(270deg, #683929, #7b4835 49%, #764330 97%)
    }

    section.bg a {
        margin-block-start: 2rem
    }

    section.bg .bg-image {
        background-position-x: left 0;
        background-position-y: top 65%;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: var(--Z-INDEX-0)
    }

    @media screen and (max-width:1350px) {
        section.bg {
            padding-inline: 24px
        }

        section.bg .bg-image {
            background-position-x: right;
            display: none
        }
    }

    @media screen and (max-width:600px) {
        section.bg h2 {
            font-size: 52px
        }

        section.bg h3 {
            text-wrap: auto;
            font-size: 22px
        }

        section.bg ul,
        section.bg ul+p {
            font-size: 18px
        }
    }

    .inner {
        align-items: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: space-between
    }

    .inner,
    .rightward {
        display: flex;
        flex-direction: row
    }

    .rightward {
        gap: 64px;
        justify-content: flex-end;
        padding: 0;
        width: max-780px
    }

    .rightward .stack {
        --stack-vertical-alignment: flex-end;
        max-inline-size: 45rem
    }

    .rightward img {
        aspect-ratio: 1/1;
        -o-object-fit: contain;
        object-fit: contain;
        width: 604px
    }

    li {
        fill: var(--color-honey)
    }

    section.newsletter {
        background-image: var(--vertical-brown-gradient);
        background-position: 0 0;
        background-size: 100% auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 520px
    }

    section.newsletter .bg-image {
        background-position: 0
    }

    section.newsletter h3 {
        font-size: var(--size-lg)
    }

    section.newsletter .form-container {
        width: 100%
    }

    section.newsletter .input-group {
        --placeholder-color: var(--color-aubergine);
        color: var(--color-aubergine)
    }

    section.newsletter .input-group input[type=text] {
        --button-bg: var(--color-aubergine);
        --input-border: var(--color-aubergine);
        background-color: transparent
    }

    section.newsletter .input-group {
        --button-bg: var(--color-aubergine);
        --button-text: var(--color-coral);
        --button-border: var(--color-aubergine)
    }

    section.newsletter .input-group input {
        flex: 1
    }

    @media screen and (max-width:600px) {
        section.newsletter {
            gap: 0;
            min-height: 780px
        }

        section.newsletter .bg-image {
            background-position-x: left
        }
    }

    @media screen and (max-width:1350px) {
        section.newsletter {
            min-height: 780px;
            padding-inline: 24px
        }

        section.newsletter .bg-image {
            background-position-x: left;
            display: block
        }
    }

    section.interstitial {
        left: 0;
        padding: 0;
        position: sticky;
        top: 0
    }

    section.interstitial-safari-exception {
        position: relative
    }

    section.interstitial-safari-exception img {
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover
    }

    section.practices .embla {
        max-width: unset
    }

    @media screen and (min-width:750px) {
        section.practices .embla__viewport {
            width: 85%
        }
    }

    @media screen and (min-width:1880px) {
        section.practices .embla__viewport {
            width: 90%
        }
    }

    section.practices .embla__buttons {
        width: 98%
    }

    @media screen and (min-width:750px) {
        section.practices .embla__buttons {
            width: 99%
        }
    }

    section.practices .rightward .stack .button {
        padding-inline: var(--space-3xl)
    }

    @media screen and (max-width:800px) {
        section.practices .rightward {
            justify-content: center
        }
    }

    .section--text-cards .card-container.cluster {
        --cluster-horizontal-alignment: space-around;
        flex-wrap: wrap
    }

    section.our-story .rightward:has(img) {
        justify-content: center
    }

    section.our-story p {
        max-inline-size: 45ch
    }

    section.next-cta {
        background: linear-gradient(to bottom right, #804d3a, #925b48 19%, #774834 34%, #633422 49%) 100% 100% /50% 50% no-repeat, linear-gradient(to bottom left, #804d3a, #925b48 19%, #774834 34%, #633422 49%) 0 100% /50% 50% no-repeat, linear-gradient(to top left, #804d3a, #925b48 19%, #774834 34%, #633422 49%) 0 0 /50% 50% no-repeat, linear-gradient(to top right, #804d3a, #925b48 19%, #774834 34%, #633422 49%) 100% 0 /50% 50% no-repeat
    }

    section.next-cta div {
        display: flex;
        flex-direction: row;
        gap: 2rem
    }

    section.next-cta div img {
        height: 303px
    }

    section.newsletter2 {
        background: var(--bg-image, none), linear-gradient(270deg, #683929, #7b4835 49%, #764330 97%);
        background-position-y: 40%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        min-height: 520px;
        padding: 0
    }

    section.newsletter2 .bg-image {
        all: unset;
        background-position: left 50%;
        background-repeat: no-repeat;
        flex-grow: 1
    }

    @media (max-width:1549px) {
        section.newsletter2 .bg-image {
            background-position-y: 40%;
            min-height: 600px
        }
    }

    @media (max-width:1270px) {
        section.newsletter2 .bg-image {
            display: none
        }
    }

    section.newsletter2 .stack {
        gap: 1rem
    }

    section.newsletter2 .buffer {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        justify-content: flex-end;
        padding-block-end: 56px;
        padding-block-start: 26px;
        padding-inline: 64px
    }

    section.newsletter2 p.description {
        max-inline-size: 65ch
    }

    @media (max-width:1500px) {
        section.newsletter2 p.description {
            max-inline-size: 30ch
        }
    }

    aside.instagram {
        padding-block-end: 56px;
        padding-block-start: 26px
    }

    @media (min-width:750px) {
        aside.instagram {
            padding-inline: 64px
        }
    }

    aside.instagram {
        display: flex;
        flex-direction: column;
        gap: var(--size-xl);
        justify-content: space-between
    }

    aside.instagram .card-container.cluster {
        --cluster-horizontal-alignment: center
    }

    @media screen and (min-width:750px) {
        aside.instagram .card-container.cluster {
            --cluster-horizontal-alignment: flex-end
        }
    }

    aside.instagram h2 {
        font-size: var(--size-xl)
    }

    aside.instagram .embla {
        max-width: unset
    }

    @media screen and (max-width:1000px) {
        aside.instagram .embla.js .embla__viewport {
            flex-direction: column
        }
    }

    aside.instagram .embla.js .embla__buttons {
        width: 100%
    }

    @media screen and (max-width:1000px) {
        aside.instagram .embla.js .embla__buttons {
            display: none
        }
    }

    @media screen and (min-width:1000px) {
        .home-podcast {
            flex-direction: row
        }
    }

    section.wp-block-torn-about-story p {
        align-self: flex-end
    }

    section.wp-block-torn-about-story figure {
        align-self: center;
        width: 604px
    }

    section.wp-block-torn-about-story figure img {
        aspect-ratio: 1/1;
        -o-object-fit: contain;
        object-fit: contain;
        width: 604px
    }

    section.wp-block-torn-about-story figure figcaption {
        font-size: var(--size-xs)
    }

    section.credits {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    section.credits h2,
    section.credits h3,
    section.credits h4 {
        align-self: flex-start
    }

    section.credits p {
        max-inline-size: 45ch
    }

    .resource-list {
        grid-template-columns: repeat(1, 1fr);
        padding: 2rem
    }

    @media screen and (min-width:800px) {
        .resource-list {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (min-width:1098px) {
        .resource-list {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    .resource-list article.card {
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-width: unset;
        overflow: hidden;
        position: relative;
        width: unset
    }

    .resource-list article.card div {
        padding: 1rem
    }

    .resource-list article.card .meta {
        align-items: center;
        background-color: var(--color-white);
        display: flex;
        flex-grow: 0;
        font-family: var(--font-mono);
        font-size: var(--size-sm);
        gap: var(--space-xs);
        justify-content: space-between;
        text-transform: uppercase;
        z-index: var(--Z-INDEX-3)
    }

    .resource-list article.card .meta span {
        gap: 1rem
    }

    .resource-list article.card .meta img {
        aspect-ratio: 1/1;
        flex-grow: 1;
        -o-object-fit: cover;
        object-fit: cover
    }

    .resource-list article.card .text {
        background-color: var(--color-white);
        color: var(--color-aubergine);
        flex-grow: 0;
        font-size: var(--size-sm);
        z-index: var(--Z-INDEX-3)
    }

    .resource-list article.card .text h1 {
        text-wrap: auto;
        font-size: var(--size-lg);
        text-transform: none
    }

    .resource-list article.card img {
        flex-grow: 1
    }

    .resource-list article.card.large {
        min-height: 585px
    }

    @media screen and (min-width:800px) {
        .resource-list article.card.large {
            grid-column: span 2;
            grid-row: span 2
        }
    }

    .resource-list article.card.large img {
        aspect-ratio: 1/1;
        -o-object-fit: cover;
        object-fit: cover
    }

    @media screen and (min-width:800px) {
        .resource-list:hover .card:not(:hover) {
            opacity: .85;
            transform: scale(.975)
        }

        .resource-list .card {
            transform: scale(.975)
        }

        .resource-list .card:hover {
            opacity: 1;
            text-decoration: none;
            transform: scale(1.025);
            transition: all .3s ease
        }

        .home .resource-list {
            padding-block: 0
        }

        .home .resource-list .card {
            transform: scale(1)
        }

        .home .resource-list .card:hover {
            filter: blur(0);
            opacity: 1;
            transform: scale(1.025)
        }

        .home .resource-list:hover .card:not(:hover) {
            filter: blur(7px)
        }
    }
}

@layer tailwindUtilities {
    .static {
        position: static
    }

    .fixed {
        position: fixed
    }

    .block {
        display: block
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .transform {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .bg-aubergine {
        background-color: #33233a
    }

    .bg-brown {
        background-color: #603526
    }

    .bg-coral {
        background-color: #ff8d77
    }

    .bg-honey {
        background-color: #ffeb73
    }

    .bg-plum {
        background-color: #4b2e60
    }

    .bg-white {
        background-color: #fff
    }

    .font-mono {
        font-family: Relative Mono, ui-monospace, Source Code Pro, monospace
    }

    .text-aubergine {
        color: #33233a
    }

    .text-black {
        color: #000
    }

    .text-coral {
        color: #ff8d77
    }

    .text-honey {
        color: #ffeb73
    }

    .text-plum {
        color: #4b2e60
    }

    .text-white {
        color: #fff
    }

    .underline {
        text-decoration-line: underline
    }

    .filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    flow-space-zero {
        --flow-space: clamp(0rem, -0.00rem + 0.00vw, 0.000052631578947368424rem)
    }

    flow-space-2xs {
        --flow-space: clamp(0.15789473684210525rem, 0.13rem + 0.15vw, 0.2631578947368421rem)
    }

    flow-space-xs {
        --flow-space: clamp(0.2631578947368421rem, 0.23rem + 0.15vw, 0.3684210526315789rem)
    }

    flow-space-s {
        --flow-space: clamp(0.5263157894736842rem, 0.47rem + 0.29vw, 0.7368421052631579rem)
    }

    flow-space-m {
        --flow-space: clamp(0.7368421052631579rem, 0.63rem + 0.51vw, 1.105263157894737rem)
    }

    flow-space-l {
        --flow-space: clamp(1rem, 0.82rem + 0.88vw, 1.631578947368421rem)
    }

    flow-space-xl {
        --flow-space: clamp(2rem, 1.73rem + 1.32vw, 2.9473684210526314rem)
    }

    flow-space-2xl {
        --flow-space: clamp(3rem, 2.59rem + 1.98vw, 4.421052631578948rem)
    }

    flow-space-3xl {
        --flow-space: clamp(5rem, 4.32rem + 3.29vw, 7.368421052631579rem)
    }

    flow-space-xs-s {
        --flow-space: clamp(0.2631578947368421rem, 0.13rem + 0.66vw, 0.7368421052631579rem)
    }

    flow-space-s-m {
        --flow-space: clamp(0.5263157894736842rem, 0.36rem + 0.80vw, 1.105263157894737rem)
    }

    flow-space-m-l {
        --flow-space: clamp(0.7368421052631579rem, 0.48rem + 1.24vw, 1.631578947368421rem)
    }

    flow-space-l-xl {
        --flow-space: clamp(1rem, 0.44rem + 2.71vw, 2.9473684210526314rem)
    }

    flow-space-l-2xl {
        --flow-space: clamp(2rem, 1.30rem + 3.37vw, 4.421052631578948rem)
    }

    flow-space-xl-2xl {
        --flow-space: clamp(3rem, 1.74rem + 6.07vw, 7.368421052631579rem)
    }

    flow-space-2xl-3xl {
        --flow-space: clamp(5rem, 3.05rem + 9.44vw, 11.789473684210526rem)
    }

    spot-color-coral {
        --spot-color: #ff8d77
    }

    spot-color-aubergine {
        --spot-color: #33233a
    }

    spot-color-honey {
        --spot-color: #ffeb73
    }

    spot-color-plum {
        --spot-color: #4b2e60
    }

    spot-color-white {
        --spot-color: #fff
    }

    spot-color-black {
        --spot-color: #000
    }

    spot-color-brown {
        --spot-color: #603526
    }

    spot-color-off-white {
        --spot-color: #fffef0
    }

    .bottom-border {
        border-block-end: solid 1px var(--color-aubergine);
        margin-block-end: var(--gutter, 3rem);
        padding-block-end: var(--gutter, 3rem)
    }

    .center {
        align-items: center;
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        margin-inline: auto;
        max-inline-size: 60ch
    }

    span.email>s {
        display: none
    }

    :where(.hidden) {
        clip: rect(0 0 0 0);
        border: 0;
        height: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }

    :where(.icon) {
        height: .75em;
        height: 1.5cap;
        width: .75em;
        width: 1.5cap
    }

    :where(.with-icon) {
        align-items: center;
        display: inline-flex
    }

    :where(.with-icon .icon) {
        margin-inline-end: var(--space, .5em)
    }

    .region {
        padding-block-end: var(--region-space-bottom, var(--space-l-xl));
        padding-block-start: var(--region-space-top, var(--space-l-xl))
    }

    body {
        opacity: 1;
        transition: opacity 1s
    }

    @starting-style {
        body {
            opacity: 0
        }
    }
}

footer .cell-wordmark {
    display: flex;
    gap: 4rem;
    justify-content: center;
    font-size: var(--size-2xl);
}