@font-face {
    font-family: 'Source Serif 4';
    src: url("../fonts/SourceSerif4Variable-Roman.otf-wY2rN0j.woff2") format('woff2'),
        url("../fonts/SourceSerif4Variable-Roman.otf-w50Sz5L.woff") format('woff');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url("../fonts/SourceSerif4Variable-Italic.otf-TjB8U-W.woff2") format('woff2'),
        url("../fonts/SourceSerif4Variable-Italic.otf-2xKkg2j.woff") format('woff');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url("../fonts/SourceSans3VF-Upright.otf-QG1Nnrn.woff2") format('woff2'),
        url("../fonts/SourceSans3VF-Upright.otf-7xLO2_u.woff") format('woff');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url("../fonts/SourceSans3VF-Italic.otf-CjkGm57.woff2") format('woff2'),
        url("../fonts/SourceSans3VF-Italic.otf-ZPVTGoU.woff") format('woff');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url("../fonts/BerkeleyMono-Regular-bRSmJcE.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url("../fonts/BerkeleyMono-Bold-8xf8vgx.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url("../fonts/BerkeleyMono-Oblique-QMd6PVe.woff2") format('woff2');
    font-weight: 400;
    font-style: oblique;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url("../fonts/BerkeleyMono-Bold-Oblique-6MffFIU.woff2") format('woff2');
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
}

* {
    box-sizing: border-box;
    max-inline-size: var(--measure);
}

:root {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    font-optical-sizing: auto;
    font-variant-numeric: oldstyle-nums;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;

    --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --measure: 68ch;

    color-scheme: light dark;

    .light {
        color-scheme: light;
    }

    .dark {
        color-scheme: dark;
    }

    --color: light-dark(#1a1a1a, #d6d4d0);
    --background-color: light-dark(#fdfdfc, #161616);
    --color-inverse: light-dark(#d6d4d0, #1a1a1a);
    --background-color-inverse: light-dark(#161616, #fdfdfc);
    color: var(--color);
    background-color: var(--background-color);

}

html,
body,
div,
header,
hgroup,
nav,
main,
footer {
    max-inline-size: none;
}

body {
    margin: 0;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

code {
    font-family: var(--font-mono);
    font-size: 0.82em;
}

:not(pre)>code {
    padding: 0.12em 0.35em;
    border-radius: 3px;
}

pre {
    font-family: var(--font-mono);
    font-size: 0.82em;
    line-height: 1.55;
    padding: 1.2em 1.5em;
    margin-block: 1.4em;
    overflow-x: auto;
}

pre code {
    font-size: inherit;
    padding: 0;
}

blockquote {
    border-inline-start: 2px solid;
    padding-inline-start: 1.2em;
    margin-block: 1.4em;
    margin-inline: 0;
    font-style: italic;

    p:last-child {
        margin-block-end: 0;
    }
}

input[type=email] {
    font-family: inherit;
    font-size: inherit;
    padding: var(--s-2);
    border: var(--s-5) solid;
}

input[type=submit] {
    appearance: none;

    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    padding: var(--s-1);
    width: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(240, 240, 240);
}

input[type=submit]:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

hr {
    border-bottom: 0.0125em solid;
    /* width: 70ch; */
    margin-inline-start: 0px;
}

.center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: calc(var(--measure) * 1.5);
}

.press-page {
    --measure: 82ch;
    max-inline-size: 112ch;
}

.cover {
    display: flex;
    flex-direction: column;
    min-block-size: 85vh;
    padding: 1rem;
}

.cover>* {
    margin-block: 1rem;
}

.cover> :first-child:not(div) {
    margin-block-start: 0;
}

.cover> :last-child:not(div) {
    margin-block-end: 0;
}

.cover>div {
    margin-block: auto;
}

.cover.publication>div {
    margin-block-start: 0;
    margin-block-end: auto;
}

.box {
    padding: var(--padding, var(--s1));
    border: var(--border-thin) solid;
}

.box * {
    color: inherit;
}

.box.invert {
    color: var(--color-inverse);
    background-color: var(--background-color-inverse);
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.switcher>* {
    flex-grow: 1;
    flex-basis: calc((40rem - 100%) * 999);
}

.switcher> :nth-last-child(n + 5),
.switcher> :nth-last-child(n + 5)~* {
    flex-basis: 100%;
}

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack>* {
    margin-block: 0;
}

.stack>*+* {
    margin-block-start: var(--space, 1.5rem);
}

.stack.page-header {
    flex-direction: row;
}

.stack.publication:only-child {
    block-size: 100%;
}

.stack.publication> :nth-last-child(2) {
    margin-block-end: auto;
}

.hero-text {
    font-size: min(15vw, 5em);
}

.page-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-block-end: 0.25em;
    border-bottom: 0.15em solid;
    margin-inline: 1em;
}

.page-header h2 {
    margin-inline-end: auto;
    margin-block-end: 0;
    align-self: end;
    padding-inline-end: 0.5rem;
    font-size: clamp(1rem, 1vw + 1rem, 3rem);
}

.page-header p {
    font-size: 1.25em;
    font-weight: bold;
    margin-block: 0;
    align-self: end;
}

.page-header a,
.company-tagline a {
    text-decoration: none;
    color: inherit;
}

.page-header a:visited,
.company-tagline a:visited {
    color: inherit;
}

.site-nav,
.section-nav {
    max-inline-size: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-block: 0em;
    padding-inline-start: 0em;
    margin-inline: 1em;
    list-style: none;
    white-space: nowrap;

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

    >form {
        margin: 0;
    }

    >form button {
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        font: inherit;
        padding: 0;
    }

    *+* {
        padding-inline-start: 1ch;
    }
}

.site-nav {
    .subscribe-link {
        margin-inline-start: auto;
    }

    .pub-nav {
        position: relative;

        button {
            color: inherit;
            border: none;
            background-color: inherit;
            font-family: inherit;
            font-size: inherit;
            padding: 0;
        }

        [popover] {
            position: absolute;
            top: 100%;
            left: 0;
            margin: 0;
            inset: unset;
            border-inline: none;
            padding: 0;
            max-width: calc(100vw - 2em);

            .nav-links {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                a {
                    display: inline-block;
                    padding-block: 0.90em;
                    text-decoration: none;
                    color: inherit;

                    &.current-publication,
                    &.current-podcast {
                        color: var(--color-inverse);
                        background-color: var(--background-color-inverse);
                    }

                    &:first-of-type {
                        padding-inline-end: 0.5ch;
                    }

                    &:first-of-type.current-publication,
                    &:first-of-type.current-podcast {
                        padding-inline: 0.5ch;
                    }
                }

                *+* {
                    padding-inline: 0.5ch;
                }

                >* {
                    flex-grow: 1;
                    flex-basis: calc((55ch - 100vw) * 999);
                }
            }
        }
    }
}

.section-nav {
    border-block-start: 0.08em solid;

    >a {
        display: inline-block;
        padding-block: var(--s-2);
    }

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

.site-flashes {
    display: grid;
    gap: var(--s-2);
    justify-items: center;
    margin: var(--s0) 1em 0;
}

.site-flash {
    border: 0.12em solid;
    font-family: var(--font-mono);
    font-size: var(--s-1);
    inline-size: min(100%, var(--measure));
    margin: 0;
    padding: var(--s-2);
    text-align: center;
}

.site-flash--success {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.page-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-around;
    margin-block-start: 0.25em;
    border-block-start: 0.15em solid;
    margin-block-end: 0.5em;
    margin-inline: 1em;

    section {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            font-size: 0.85em;
            font-weight: bold;
            margin-block-end: 0;
            margin-block-start: 0.25em;

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

        &:first-of-type {
            /* align-items: flex-start; */
            align-content: start;
        }

        &:last-of-type {
            /* align-items: end; */
        }
    }
}

.publications hgroup>*,
.publications hgroup>a>*,
hgroup.heading-block>*,
hgroup.heading-block>a>* {
    margin-block: 0;
}

.body-content {
    margin-inline: auto;

    article {
        margin-inline: auto;
    }

    p {
        margin-inline-end: auto;
        margin-block-start: 0;
        margin-block-end: 1em;
    }
}

.body-content p:last-of-type {
    margin-block-end: 0;
}

.body-content h2 {
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
}

.border-width\:thin {
    border-width: 0.25em;
}

.border-style\:solid {
    border-style: solid;
}

.margin-inline\:auto {
    margin-inline: auto;
    max-inline-size: calc(var(--measure));
}

.font-size\:double {
    font-size: 2em;
}

.font-size\:huge {
    font-size: 5em;
}

.text-align\:center {
    text-align: center;
}

.just-cause,
.fragment-quote {
    margin-inline: 2ch;
}

.garden-landing,
.nuance-landing,
.greenhouse-landing,
.reference-landing,
.dispatch-landing,
.research-landing,
.article-entry {
    display: flex;
    flex-direction: column;
    min-block-size: 85vh;
    --measure: 68ch;

    hgroup h1 {
        margin-block-start: 0;
    }
}

.press-landing {
    padding-inline: 1em;
    --measure: 75ch;
}

.publication-intro {
    --measure: 82ch;
    padding: var(--padding, var(--s1));
}

.body-content {

    hgroup h1,
    h1 {
        margin-block-start: 0;
    }
}

.garden-landing,
.nuance-landing,
.greenhouse-landing,
.reference-landing,
.dispatch-landing,
.research-landing {
    --measure: 96ch;
}

.listing {
    margin-block-end: 0.5rem;
}

.listing h3 {
    margin-block: auto;
}

.listing p {
    margin-block-end: auto;
    margin-block-start: 0.5rem;
}

section.publication-descriptions {
    --measure: 85ch;
    --padding: 0.25em;
    margin-inline: auto;
    padding-inline: 1em;

    article {

        &>hgroup {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            margin-block-end: 0.25em;
            border-bottom: 0.15em solid;

            h1 {
                margin-inline-end: auto;
                margin-block-end: 0;
                align-self: end;
                padding-inline-end: 0.5rem;
                font-size: clamp(1rem, 0.5vw + 1rem, 3rem);
            }

            p {
                font-size: 1em;
                font-weight: bold;
                margin-block-end: 0;
                align-self: end;
            }

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

                &:visited {
                    color: inherit;
                }
            }
        }
    }
}

.podcast-page {
    padding-inline: 1em;
    padding-block-start: var(--s-2);
    padding-block-end: var(--s1);
    --measure: 76ch;
}

.center:has(.podcast-page) {
    max-inline-size: 112ch;
}

.podcast-page--landing,
.podcast-page--episodes {
    --measure: 82ch;
}

.podcast-page--episode {
    --measure: 96ch;
}

.podcast-page :where(section, article, div, nav) {
    max-inline-size: none;
}

.podcast-landing,
.podcast-section {
    margin-inline: auto;
}

.podcast-section {
    --measure: 96ch;
    max-inline-size: var(--measure);
}

.podcast-landing,
.podcast-page--episodes .podcast-section {
    max-inline-size: none;
}

.podcast-meta,
.podcast-actions,
.podcast-pagination {
    font-family: var(--font-mono);
    font-size: var(--s-1);
}

.podcast-pagination {
    border-block-end: 0.15em solid;
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    margin-block: 0 var(--s-2);
    padding-block-end: var(--s-3);
}

.podcast-actions a,
.podcast-pagination a {
    color: inherit;
}

.podcast-landing {
    display: flex;
    flex-direction: column;
    min-block-size: 85vh;
}

.podcast-intro {
    inline-size: min(100%, var(--measure));
    margin-inline: auto;
    max-inline-size: var(--measure);
    padding-block-start: 0;
}

.podcast-intro hgroup {
    border-block-end: 0.12em solid;
    margin-block-end: var(--s0);
    padding-block-end: var(--s-1);
}

.podcast-intro hgroup h1,
.podcast-intro hgroup p {
    margin-block: 0;
}

.podcast-intro hgroup h1 {
    font-size: clamp(var(--s0), 6vw, var(--s2));
    line-height: 1.1;
    white-space: nowrap;
}

.podcast-intro hgroup p {
    font-size: clamp(var(--s-1), 2.25vw, var(--s0));
    font-weight: 600;
    line-height: 1.25;
    margin-block-start: var(--s-3);
}

.podcast-intro .principle {
    border-block: 0.08em solid;
    border-inline-start: 0.25em solid;
    font-size: var(--s0);
    font-weight: 700;
    line-height: 1.35;
    margin-block: var(--s0);
    max-inline-size: none;
    padding: var(--s-2) var(--s-1);
}

@media (max-width: 640px) {
    .podcast-intro hgroup h1 {
        font-size: clamp(var(--s2), 16vw, var(--s4));
        line-height: 1.02;
        white-space: normal;
    }

    .podcast-intro hgroup p {
        font-size: clamp(var(--s0), 5vw, var(--s1));
    }
}

.podcast-section {
    margin-block-start: var(--s0);
}

.podcast-page--landing .podcast-section {
    inline-size: min(100%, 96ch);
    max-inline-size: 96ch;
}

.podcast-listen-cards {
    display: grid;
    gap: var(--s-1);
    grid-template-columns: 1fr;
    inline-size: 100%;
    list-style: none;
    margin: var(--s-1) 0 0;
    max-inline-size: none;
    padding: 0;
}

.podcast-listen-cards>li {
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
}

.podcast-listen-card {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0.15em solid;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--s-1);
    min-block-size: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    padding: var(--s-1);
    text-align: start;
    text-decoration: none;
}

.podcast-listen-card:visited {
    color: inherit;
}

.podcast-listen-card:hover,
.podcast-listen-card:focus-visible {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.podcast-listen-card__logo {
    align-items: center;
    background: light-dark(#fff, #fdfdfc);
    border: 0.12em solid;
    color: #1a1a1a;
    display: inline-flex;
    flex: 0 0 var(--s2);
    justify-content: center;
    block-size: var(--s2);
    inline-size: var(--s2);
}

.podcast-listen-card__logo img {
    block-size: var(--s1);
    display: block;
    inline-size: var(--s1);
    max-inline-size: 100%;
}

.podcast-listen-card__copy {
    display: grid;
    gap: var(--s-5);
    flex: 1;
    min-inline-size: 0;
}

.podcast-listen-card__eyebrow,
.podcast-listen-card__label,
.podcast-listen-card__action {
    font-family: var(--font-mono);
}

.podcast-listen-card__eyebrow {
    font-size: var(--s-2);
}

.podcast-listen-card__label {
    font-size: var(--s0);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.podcast-listen-card__action {
    font-size: var(--s-2);
    font-weight: 700;
}

.podcast-listen-card[data-copy-state="copied"] .podcast-listen-card__action {
    text-decoration: underline;
}

.podcast-listen-links__more {
    font-family: var(--font-mono);
    font-size: var(--s-1);
    margin-block: var(--s-1) 0;
}

.podcast-listen-links__more a {
    color: inherit;
    font-weight: 700;
}

@media (min-width: 520px) {
    .podcast-listen-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 820px) {
    .podcast-listen-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.podcast-listen-links--compact {
    margin-block-start: 0;
    max-inline-size: none;
}

.podcast-listen-links--compact .podcast-listen-cards {
    grid-template-columns: 1fr;
}

.podcast-listen-links--compact .podcast-listen-card {
    gap: var(--s-2);
    padding: var(--s-2);
}

.podcast-listen-links--compact .podcast-listen-card__logo {
    block-size: var(--s1);
    flex-basis: var(--s1);
    inline-size: var(--s1);
}

.podcast-listen-links--compact .podcast-listen-card__logo img {
    block-size: var(--s0);
    inline-size: var(--s0);
}

.podcast-listen-links--compact .podcast-listen-card__label {
    font-size: var(--s-1);
}

.podcast-meta {
    margin-block-start: var(--s-3);
}

/* People pages: role-grouped grid of photo cards. Portraits sit monochrome
   in the grid and take color on hover; people without a photo get their
   initials set in mono on an inverted square. */
.podcast-page--people .podcast-section {
    --measure: 96ch;
}

.podcast-people-group + .podcast-people-group {
    margin-block-start: var(--s0);
}

.podcast-people__label {
    border-block-end: 0.12em solid;
    font-weight: 700;
    margin-block: var(--s-2) var(--s-1);
    padding-block-end: var(--s-3);
}

.podcast-people {
    display: grid;
    gap: var(--s-1);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
    list-style: none;
    margin: 0;
    max-inline-size: none;
    padding: 0;
}

.podcast-people > li {
    max-inline-size: none;
    min-inline-size: 0;
}

.podcast-person {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    max-inline-size: none;
    position: relative;
    transition: background-color 0.12s ease;
}

.podcast-person__avatar-frame,
span.podcast-person__avatar {
    aspect-ratio: 1;
    border-block-end: 0.12em solid;
    display: block;
    inline-size: 100%;
    max-inline-size: none;
    overflow: hidden;
}

img.podcast-person__avatar {
    block-size: 100%;
    display: block;
    filter: grayscale(1);
    inline-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    transition: filter 0.16s ease;
}

.podcast-person:hover img.podcast-person__avatar,
.podcast-person:focus-within img.podcast-person__avatar {
    filter: grayscale(0);
}

span.podcast-person__avatar {
    align-items: center;
    background: var(--background-color-inverse);
    color: var(--color-inverse);
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--s2);
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.04em;
}

.podcast-person__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-inline-size: 0;
    padding: var(--s-2);
}

.podcast-person__body > * {
    margin-block: 0;
}

.podcast-person__body > * + * {
    margin-block-start: var(--s-4);
}

.podcast-person__name {
    font-size: var(--s0);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.podcast-person__bio {
    max-inline-size: none;
}

.podcast-person__name a {
    color: inherit;
    text-decoration: none;
}

/* Whole-card link to the bio page, stretched over the card. */
.podcast-person__name a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.podcast-person:hover,
.podcast-person:focus-within {
    background-color: light-dark(#f1f0ed, #1f1f1e);
}

.podcast-person:hover .podcast-person__name a,
.podcast-person:focus-within .podcast-person__name a {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

/* Contributor bio page. */
.podcast-page--person .podcast-section {
    --measure: 68ch;
}

.podcast-person__back {
    color: inherit;
    display: inline-block;
    margin-block-end: var(--s0);
}

.podcast-person-hero {
    align-items: flex-start;
    display: flex;
    /* The global `header` rule stacks its children in a column. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s0);
    max-inline-size: none;
}

.podcast-person-hero .podcast-person__avatar-frame,
.podcast-person-hero span.podcast-person__avatar {
    border: 0.12em solid;
    flex: none;
    inline-size: min(100%, 10.5rem);
}

/* The portrait carries the page: full color, unlike the index grid. */
.podcast-person-hero img.podcast-person__avatar {
    filter: none;
}

.podcast-person-hero span.podcast-person__avatar {
    font-size: var(--s3);
}

.podcast-person-hero__body {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.podcast-person-hero__body > * {
    margin-block: 0;
}

.podcast-person-hero__body > * + * {
    margin-block-start: var(--s-2);
}

.podcast-person-hero h1 {
    font-size: var(--s2);
    line-height: 1.1;
}

.podcast-person-appearances {
    margin-block-start: var(--s1);
    max-inline-size: none;
}

.podcast-person-appearances h2 {
    border-block-end: 0.12em solid;
    margin-block: 0 var(--s-1);
    padding-block-end: var(--s-3);
}

.podcast-episode-people {
    inline-size: 100%;
    margin-block-start: var(--s0);
}

/* Episode listing card: cover thumbnail + title, excerpt, meta. */
.podcast-episode-listing {
    align-items: start;
    border: 0.12em solid;
    display: grid;
    gap: var(--s-1) var(--s0);
    grid-template-columns: 5.5rem minmax(0, 1fr);
    margin-block-end: var(--s-1);
    max-inline-size: none;
    position: relative;
    transition: background-color 0.12s ease;
}

.podcast-episode-listing--noart {
    grid-template-columns: minmax(0, 1fr);
}

.podcast-episode-listing:hover,
.podcast-episode-listing:focus-within {
    background-color: light-dark(#f1f0ed, #1f1f1e);
}

.podcast-episode-listing__art {
    aspect-ratio: 1;
    block-size: auto;
    border: 0.12em solid;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    object-fit: cover;
}

.podcast-episode-listing__body {
    display: grid;
    gap: var(--s-3);
    max-inline-size: none;
}

.podcast-episode-listing__meta {
    margin-block: 0;
}

.podcast-episode-listing__title {
    font-size: clamp(var(--s0), 1.2vw, var(--s1));
    line-height: 1.12;
    margin-block: 0;
}

.podcast-episode-listing__title a {
    color: inherit;
    text-decoration: none;
}

.podcast-episode-listing__title a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.podcast-episode-listing:hover .podcast-episode-listing__title a,
.podcast-episode-listing:focus-within .podcast-episode-listing__title a {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

.podcast-episode-listing__excerpt {
    margin-block: 0;
    max-inline-size: 66ch;
}

.podcast-player {
    display: block;
    inline-size: 100%;
    margin-block: var(--s-1);
    max-inline-size: 100%;
}

.podcast-episode-page,
.podcast-episode-hero,
.podcast-episode-hero__body,
.podcast-episode-hero__art,
.podcast-episode-layout,
.podcast-episode-sidebar,
.podcast-show-notes,
.podcast-show-notes__sections,
.podcast-show-notes__content,
.podcast-show-note-section,
.podcast-episode-actions {
    max-inline-size: none;
}

.podcast-episode-page {
    display: grid;
    gap: var(--s1);
    margin-inline: auto;
    max-inline-size: 104ch;
}

/* Hero: cover art alongside title, player, and quick links. */
.podcast-episode-hero {
    display: grid;
    gap: var(--s0);
    align-items: start;
}

.podcast-episode-hero__art {
    max-inline-size: 11rem;
}

.podcast-episode-cover {
    aspect-ratio: 1;
    block-size: auto;
    border: 0.15em solid;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    object-fit: cover;
}

.podcast-episode-hero__body {
    align-content: start;
    display: grid;
    gap: var(--s-1);
}

.podcast-episode-byline {
    margin-block: 0;
}

.podcast-episode-hero h1 {
    font-size: clamp(var(--s1), 3.6vw, var(--s2));
    line-height: 1.05;
    margin-block: 0;
    max-inline-size: 20ch;
}

.podcast-episode-player {
    inline-size: 100%;
    margin-block: var(--s-2) 0;
    max-inline-size: 100%;
}

.podcast-episode-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s-2);
}

.podcast-episode-actions a {
    align-items: baseline;
    border: 0.12em solid;
    color: inherit;
    display: inline-flex;
    font-family: var(--font-mono);
    gap: 0.6ch;
    padding: var(--s-3) var(--s-1);
    text-decoration: none;
}

.podcast-episode-actions a:hover,
.podcast-episode-actions a:focus-visible {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.podcast-episode-action__label {
    font-size: var(--s-2);
    opacity: 0.7;
}

.podcast-episode-action__where {
    font-size: var(--s-1);
    font-weight: 700;
}

@media (min-width: 40rem) {
    .podcast-episode-hero {
        gap: var(--s1);
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    }

    .podcast-episode-hero--textonly {
        grid-template-columns: minmax(0, 1fr);
    }

    .podcast-episode-hero__art {
        max-inline-size: none;
    }
}

/* Body: show notes beside a slim subscribe rail. */
.podcast-episode-layout {
    display: grid;
    gap: var(--s1);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
    .podcast-episode-layout {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
    }
}

.podcast-show-notes {
    margin: 0;
}

.podcast-show-notes h2,
.podcast-listen-links--compact h2 {
    margin-block-start: 0;
}

.podcast-show-notes__sections {
    display: grid;
    gap: var(--s0);
}

.podcast-show-note-section {
    display: grid;
    gap: var(--s-2);
}

.podcast-show-note-section:not(.podcast-show-note-section--intro) {
    border-block-start: 0.08em solid;
    padding-block-start: var(--s0);
}

.podcast-show-note-section h3 {
    font-family: var(--font-mono);
    font-size: var(--s0);
    line-height: 1.15;
    margin-block: 0;
    text-transform: uppercase;
}

.podcast-show-notes__content {
    color: inherit;
    max-inline-size: 68ch;
}

.podcast-show-notes__content :where(h2, h3, h4) {
    border-block-end: 0.08em solid;
    line-height: 1.15;
    margin-block: var(--s1) var(--s-1);
    padding-block-end: var(--s-4);
}

.podcast-show-notes__content :where(p, ul, ol, blockquote, pre) {
    margin-block: 0;
    max-inline-size: none;
}

.podcast-show-notes__content > * + * {
    margin-block-start: var(--s-1);
}

.podcast-show-notes__content :where(ul, ol) {
    padding-inline-start: var(--s0);
}

.podcast-show-notes__content li {
    max-inline-size: none;
}

.podcast-show-notes__content li + li {
    margin-block-start: var(--s-3);
}

/* Chapter / table-of-contents list with times aligned in a column. */
.podcast-show-notes__content .podcast-chapter-list {
    list-style: none;
    padding-inline-start: 0;
}

.podcast-show-notes__content .podcast-chapter {
    align-items: baseline;
    column-gap: 1.5ch;
    display: flex;
    justify-content: space-between;
}

.podcast-chapter__time {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--s-1);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.podcast-show-notes__content hr {
    border: 0;
    border-block-start: 0.08em solid;
    margin-block: var(--s0);
}

.podcast-show-notes__content a {
    color: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

.podcast-episode-sidebar {
    align-content: start;
    display: grid;
    gap: var(--s0);
}

/* Error / status pages: the status code sits as an inverted mono block,
   like the person-initial avatars; actions echo the episode action buttons. */
.status-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 60vh;
    inline-size: min(100%, var(--measure));
    margin-inline: auto;
    padding-block: var(--s1);
    padding-inline: 1em;
}

.status-page__code {
    align-self: flex-start;
    background: var(--background-color-inverse);
    color: var(--color-inverse);
    font-family: var(--font-mono);
    font-size: var(--s2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-block: 0;
    padding: var(--s-2) var(--s-1);
}

.status-page h1 {
    /* rem so the rule matches the masthead weight, not the h1's em size */
    border-block-end: 0.15rem solid;
    font-size: clamp(var(--s1), 5vw, var(--s3));
    line-height: 1.05;
    margin-block: var(--s0) var(--s-1);
    max-inline-size: none;
    padding-block-end: var(--s-1);
}

.status-page__message,
.status-page__detail {
    margin-block: 0;
    max-inline-size: 52ch;
}

.status-page__detail {
    margin-block-start: var(--s-2);
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s1);
    max-inline-size: none;
}

.status-page__actions a {
    border: 0.12em solid;
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--s-1);
    font-weight: 700;
    padding: var(--s-3) var(--s-1);
    text-decoration: none;
}

.status-page__actions a:hover,
.status-page__actions a:focus-visible {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

/* Article paywall: a status-page variant that leads with the piece itself —
   publication context line, article title, then the public summary teaser. */
.article-paywall__context {
    font-family: var(--font-mono);
    font-size: var(--s-1);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-block: 0;
    text-transform: uppercase;
}

.article-paywall__teaser {
    margin-block-end: var(--s0);
    max-inline-size: 52ch;
}

.account-page {
    padding-inline: 1em;
    padding-block-start: var(--s-2);
    padding-block-end: var(--s1);
    --measure: 72ch;
}

.account-page--dashboard {
    --measure: 86ch;
}

.account-page :where(form, section, article, header, footer, div) {
    max-inline-size: none;
}

.account-hero {
    margin-inline: auto;
}

.account-hero h1,
.account-hero p {
    margin-block: 0;
}

.account-hero p {
    max-inline-size: 58ch;
}

.account-layout,
.account-dashboard-grid,
.account-footer-actions {
    margin-inline: auto;
    max-inline-size: var(--measure);
}

.account-layout {
    display: grid;
    gap: var(--s0);
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: var(--s0);
}

.account-layout--split {
    align-items: start;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
}

.account-main,
.account-alerts {
    display: grid;
    gap: var(--s-1);
}

.account-card {
    border: 0.15em solid;
    padding: var(--s-1);
}

.account-card--current {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.account-card h2 {
    font-size: var(--s1);
    line-height: 1.1;
    margin-block: 0 var(--s-2);
}

.account-card p {
    margin-block: 0;
}

.account-card p+p,
.account-card p+form,
.account-card form+p,
.account-card form+form,
.account-actions,
.account-message,
.account-help {
    margin-block-start: var(--s-2);
}

.account-card--compact h2 {
    font-size: var(--s0);
}

.account-form {
    display: grid;
    gap: var(--s-2);
    margin-block-start: var(--s-1);
}

.account-field {
    display: grid;
    gap: var(--s-4);
    max-inline-size: min(100%, 34rem);
}

.account-field label,
.account-help,
.account-alert,
.account-message,
.account-actions,
.account-button,
.account-link-button,
.account-status,
.account-feed-card__logo,
.account-feed-card__eyebrow,
.account-feed-card__title,
.account-feed-card__button,
.account-feed-card__details summary {
    font-family: var(--font-mono);
}

.account-field label,
.account-button,
.account-link-button,
.account-status,
.account-feed-card__button,
.account-feed-card__details summary {
    font-weight: 700;
}

.account-field label,
.account-help,
.account-alert,
.account-message,
.account-actions,
.account-button,
.account-link-button,
.account-status,
.account-feed-card__button,
.account-feed-card__details summary {
    font-size: var(--s-1);
}

.account-form input:not([type='hidden']),
.account-select select {
    background: var(--background-color);
    border: 0.12em solid;
    color: var(--color);
    font-family: var(--font-mono);
    font-size: var(--s-1);
    line-height: 1.25;
    inline-size: 100%;
    max-inline-size: 100%;
    padding: var(--s-3) var(--s-2);
}

.account-select {
    max-inline-size: min(100%, 34rem);
    position: relative;
}

.account-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--s1);
}

.account-select::after {
    border-block-end: 0.12em solid;
    border-inline-end: 0.12em solid;
    block-size: var(--s-2);
    content: '';
    inline-size: var(--s-2);
    inset-block-start: 50%;
    inset-inline-end: var(--s-1);
    pointer-events: none;
    position: absolute;
    transform: translateY(-70%) rotate(45deg);
}

.account-button,
.account-link-button {
    appearance: none;
    -webkit-appearance: none;
    background: var(--background-color);
    border: 0.12em solid;
    color: var(--color);
    cursor: pointer;
    display: inline-block;
    justify-self: start;
    line-height: 1.25;
    padding: var(--s-2) var(--s-1);
    text-align: center;
    text-decoration: none;
}

.account-button--primary,
.account-link-button--primary {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.account-card--current .account-button--primary {
    background: var(--background-color);
    color: var(--color);
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-1);
}

.account-actions--stacked {
    align-items: stretch;
    flex-direction: column;
}

.account-actions--stacked .account-link-button {
    inline-size: 100%;
}

.account-actions a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.account-alert,
.account-message {
    border: 0.12em solid;
    margin-block: 0;
    padding: var(--s-2);
}

.account-message {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.account-auth-method-list {
    display: grid;
    gap: var(--s-2);
    list-style: none;
    margin-block: var(--s-1) 0;
    padding: 0;
}

.account-auth-method-list li {
    align-items: center;
    border-block-start: 0.08em solid;
    display: flex;
    gap: var(--s-2);
    justify-content: space-between;
    padding-block-start: var(--s-2);
}

.account-auth-method-list span,
.account-auth-method-list small {
    display: block;
}

.account-auth-method-list small {
    font-family: var(--font-mono);
    font-size: var(--s-2);
    margin-block-start: var(--s-4);
}

.account-dashboard-grid {
    display: grid;
    gap: var(--s0);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--s0);
}

.account-card--wide {
    grid-column: 1 / -1;
}

.account-status {
    border: 0.12em solid;
    display: inline-block;
    margin-block-end: var(--s-2);
    padding: var(--s-4) var(--s-2);
}

.account-status--good {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.account-card--current .account-status,
.account-card--current .account-status--good {
    background: var(--background-color);
    color: var(--color);
}

.account-plan {
    font-size: var(--s1);
    font-weight: 700;
    line-height: 1.15;
}

.account-feed-groups {
    display: grid;
    gap: var(--s0);
    margin-block-start: var(--s0);
}

.account-feed-groups--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-feed-group {
    align-content: start;
    border-block-start: 0.08em solid;
    display: grid;
    gap: var(--s-2);
    padding-block-start: var(--s-1);
}

.account-feed-group h3 {
    font-size: var(--s0);
    line-height: 1.1;
    margin-block: 0;
}

.account-feed-list {
    display: grid;
    gap: var(--s-1);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    max-inline-size: none;
    padding: 0;
}

.account-feed {
    min-inline-size: 0;
}

.account-feed-card {
    border: 0.15em solid;
    display: grid;
    gap: var(--s-1);
    min-block-size: 100%;
    padding: var(--s-1);
}

.account-feed-card__main {
    align-items: center;
    display: flex;
    gap: var(--s-1);
    min-inline-size: 0;
}

.account-feed-card__logo {
    align-items: center;
    background: light-dark(#fff, #fdfdfc);
    border: 0.12em solid;
    color: #1a1a1a;
    display: inline-flex;
    flex: 0 0 var(--s2);
    font-size: var(--s-2);
    font-weight: 700;
    justify-content: center;
    block-size: var(--s2);
    inline-size: var(--s2);
}

.account-feed-card__copy {
    display: grid;
    gap: var(--s-5);
    min-inline-size: 0;
}

.account-feed-card__eyebrow {
    font-size: var(--s-2);
}

.account-feed-card__title {
    font-size: var(--s0);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.account-feed-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.account-feed-card__button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0.12em solid;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    padding: var(--s-3) var(--s-1);
    text-align: center;
    text-decoration: none;
}

.account-feed-card__button:visited {
    color: inherit;
}

.account-feed-card__button:hover,
.account-feed-card__button:focus-visible,
.account-feed-card__button[data-copy-state='copied'] {
    background: var(--background-color-inverse);
    color: var(--color-inverse);
}

.account-feed-card__details {
    border-block-start: 0.08em solid;
    padding-block-start: var(--s-2);
}

.account-feed-card__details summary {
    cursor: pointer;
}

.account-feed-card__details code {
    display: block;
    margin-block-start: var(--s-4);
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-footer-actions {
    border-block-start: 0.15em solid;
    margin-block-start: var(--s0);
    padding-block-start: var(--s-1);
}

@media (max-width: 900px) {

    .account-layout--split,
    .account-dashboard-grid,
    .account-feed-groups--columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .account-card,
    .account-footer-actions {
        padding: var(--s-2);
    }

    .account-button,
    .account-link-button,
    .account-feed-card__button {
        inline-size: 100%;
    }
}