:root {
    --pl-page-background: #111318;
    --pl-content-background: rgb(17 19 24 / 68%);
    --pl-content-background-medium: rgb(17 19 24 / 74%);
    --pl-content-background-strong: rgb(17 19 24 / 92%);
    --pl-text-primary: #f2f1ed;
    --pl-text-secondary: #cdcdd5;
    --pl-link: #b9c3d5;
    --pl-link-inline: #7388a8;
    --pl-feature-background: #191c22;
    --pl-button-background: #383b42;
    --pl-muted-blue: #7388a8;
    --pl-site-width: 72rem;
    --pl-site-gutter: 1.5rem;
    --pl-hero-height: 225px;
    --pl-hero-height-narrow: 158px;
    --pl-wordmark-width: 28rem;
    --pl-wordmark-width-narrow: min(24rem, calc(100% - 3rem));
}

/* Global visual refinements. */
html {
    overflow-x: hidden;
}

body {
    background-color: var(--pl-page-background);
}

a {
    color: var(--pl-link);
}

main,
footer {
    width: min(var(--pl-site-width), calc(100vw - 2rem));
}

main {
    margin-inline: auto;
}

footer {
    color: var(--pl-text-secondary);
}

.text a {
    color: var(--pl-link-inline);
}

.docked_player .elements,
#browser,
.js_notice {
    background: var(--pl-content-background-strong);
}

main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary a,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary button,
main#content > .page:has(.cover) .actions.primary a,
main#content > .page:has(.cover) .actions.primary button,
.track.active .track_playback {
    background: var(--pl-button-background);
    border: 1px solid var(--pl-muted-blue);
    color: var(--pl-text-primary);
}

main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary a:focus-visible,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary a:hover,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary button:focus-visible,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary button:hover,
main#content > .page:has(.cover) .actions.primary a:focus-visible,
main#content > .page:has(.cover) .actions.primary a:hover,
main#content > .page:has(.cover) .actions.primary button:focus-visible,
main#content > .page:has(.cover) .actions.primary button:hover,
.track.active .track_playback:focus-visible,
.track.active .track_playback:hover {
    background: var(--pl-feature-background);
    border-color: var(--pl-link);
    color: var(--pl-text-primary);
}

main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary > .more,
main#content > .page:has(.cover) .actions.primary > .more {
    background: var(--pl-feature-background);
    border: 1px solid var(--pl-button-background);
    color: var(--pl-text-primary);
}

main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary > .more:focus-visible,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary > .more:hover,
main#content > .page:has(.cover) .actions.primary > .more:focus-visible,
main#content > .page:has(.cover) .actions.primary > .more:hover {
    background: var(--pl-button-background);
    border-color: var(--pl-link);
    color: var(--pl-text-primary);
}

main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary a:focus-visible,
main#content > .page:first-child:not(:has(.cover)) ~ * .actions.primary button:focus-visible,
main#content > .page:has(.cover) .actions.primary a:focus-visible,
main#content > .page:has(.cover) .actions.primary button:focus-visible,
.track.active .track_playback:focus-visible {
    outline: 2px solid var(--pl-link);
    outline-offset: .2rem;
}

/* Faircamp 1.7 generated page surfaces. */
main#content > .page:has(.cover),
main#content > .page:has(.tracks),
main#content > .page:has(.page_more) {
    background: var(--pl-content-background);
}

main#content > .page:has(.page_more) .page_more,
main#content > .page:has(.tracks) .tracks {
    background: var(--pl-content-background-strong);
}

main#content > .page:has(.page_more) .page_more {
    padding: 2rem;
}

/* Homepage-only rules using Faircamp 1.7 generated structure. */
body:not(:has(main#content .cover)) header #logo {
    align-items: center;
    color: var(--pl-link);
    display: inline-flex;
    padding: .25rem;
}

body:not(:has(main#content .cover)) header #logo:focus-visible {
    outline: 2px solid var(--pl-link);
    outline-offset: .2rem;
}

body:not(:has(main#content .cover)) header #logo svg {
    display: block;
    font-size: 1.5rem;
}

body:not(:has(main#content .cover)) header #logo span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body:not(:has(main#content .cover)) header {
    align-items: center;
    justify-content: space-between;
}

main#content > .page:first-child:not(:has(.cover)) {
    align-items: center;
    display: flex;
    min-height: calc(var(--pl-hero-height) - .625rem);
}

main#content > .page:first-child:not(:has(.cover)) .page_split {
    flex: 1;
}

main#content > .page:first-child:not(:has(.cover)) .abstract {
    align-items: center;
    color: var(--pl-text-secondary);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: min(42rem, calc(100vw - 2rem));
    text-align: center;
}

main#content > .page:first-child:not(:has(.cover)) .page_split > * {
    margin-block: 0;
}

main#content > .page:first-child:not(:has(.cover)) h1 {
    aspect-ratio: 882 / 139;
    background: url("wordmark.png") center / contain no-repeat;
    color: transparent;
    height: auto;
    overflow: hidden;
    width: min(var(--pl-wordmark-width), calc(100vw - 4rem));
}

main#content > .page:first-child:not(:has(.cover)) h1 + div {
    margin-block: .875rem 2rem !important;
}

/* Faircamp 1.7 homepage navigation. */
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions:has(> a[href="https://petelatshaw.com/"]) {
    background: #1a1a1a;
    box-sizing: border-box;
    column-gap: 1rem;
    justify-content: flex-start;
    margin-block: 0;
    padding: .75rem var(--pl-site-gutter);
    row-gap: .25rem;
    text-align: left;
    width: min(var(--pl-site-width), calc(100vw - 2rem));
}

body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/"],
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://music.petelatshaw.com/"],
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/writing/"],
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/about/"] {
    color: var(--pl-link);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://music.petelatshaw.com/"] {
    text-decoration-line: underline;
    text-underline-offset: .25em;
}

body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/"]:hover,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/writing/"]:hover,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/about/"]:hover {
    color: var(--pl-link);
    text-decoration-line: underline;
}

body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/"]:focus-visible,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://music.petelatshaw.com/"]:focus-visible,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/writing/"]:focus-visible,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/about/"]:focus-visible {
    color: var(--pl-link);
    outline: 2px solid var(--pl-link);
    outline-offset: .2rem;
}

body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/"] > svg,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://music.petelatshaw.com/"] > svg,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/writing/"] > svg,
body:not(:has(main#content .cover)) main#content > .page:first-child:not(:has(.cover)) .abstract > .actions > a[href="https://petelatshaw.com/about/"] > svg {
    display: none;
}

main#content > .page:nth-child(2):has(.release) {
    background: var(--pl-content-background-medium);
}

main#content > .page:nth-child(2):has(.release) .page_grid {
    min-height: auto;
}

main#content > .page:nth-child(2):has(.release) .page_grid > * {
    margin-block: var(--pl-site-gutter) 3rem;
}

main#content > .page:nth-child(2):has(.release) .release {
    width: min(18rem, calc(100vw - 4rem));
}

main#content > .page:nth-child(2):has(.release) .release > a:last-child {
    color: var(--pl-text-primary);
}

/* Faircamp 1.7 generated internal-page home link. */
body:has(main#content .cover) header {
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    min-height: var(--pl-hero-height);
    padding: var(--pl-site-gutter);
    position: relative;
}

body:has(main#content .cover) header > div {
    align-items: center;
    display: flex;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
}

body:has(main#content .cover) header #logo {
    aspect-ratio: 882 / 139;
    background: url("wordmark.png") center / contain no-repeat;
    color: transparent;
    display: block;
    height: auto;
    left: 50%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(var(--pl-wordmark-width), calc(100vw - 4rem));
}

body:has(main#content .cover) header #logo svg {
    display: none;
}

body:has(main#content .cover) header #logo span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body:has(main#content .cover) header #logo:focus-visible {
    background-color: transparent;
    outline: 2px solid var(--pl-link);
    outline-offset: .3rem;
}

body:has(main#content .cover) header .browse {
    position: absolute;
    right: var(--pl-site-gutter);
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 40rem) {
    main#content > .page:first-child:not(:has(.cover)) {
        min-height: calc(var(--pl-hero-height-narrow) - .375rem);
    }

    body:has(main#content .cover) header {
        min-height: var(--pl-hero-height-narrow);
    }

    main#content > .page:first-child:not(:has(.cover)) h1,
    body:has(main#content .cover) header #logo {
        width: var(--pl-wordmark-width-narrow);
    }

    body:has(main#content .cover) header .browse {
        right: 1rem;
    }

    body:has(main#content .page_more .release_info) header .browse {
        display: none;
    }
}

@media (forced-colors: active) {
    main#content > .page:first-child:not(:has(.cover)) h1 {
        background: none;
        color: CanvasText;
        height: auto;
        overflow: visible;
        width: auto;
    }

    body:has(main#content .cover) header #logo {
        background: none;
        color: CanvasText;
        height: auto;
        position: static;
        transform: none;
        width: auto;
    }

    body:has(main#content .cover) header #logo span {
        color: CanvasText;
    }
}