:root {
    --blue: #00ace6;
    --orange: #e65c00;
    --white: #ffffff;
    --ink: #10262f;
    --muted: #587280;
    --wash: #eef8fc;
    --stripe: 14px;
    --gap: 7px;
    --bend: 72px;
    --display: "Michroma", "Eurostile", sans-serif;
    --text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --heading: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
    --code: "IBM Plex Mono", Menlo, monospace;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0 1.25rem 0 calc(var(--stripe) * 2 + var(--gap) + 1.25rem);
    background: var(--white);
    color: var(--ink);
    font: 1.1875rem/1.6 var(--text);
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--orange);
}

a:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
    border-radius: 2px;
}

h1,
h2,
h3,
.post-list a {
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

pre,
code {
    font-family: var(--code);
}

.stripes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.stripes::before,
.stripes::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
}

.stripes::before {
    top: var(--stripe);
    left: var(--stripe);
    border-top-left-radius: calc(var(--bend) - var(--stripe));
    box-shadow: 0 0 0 var(--stripe) var(--orange);
}

.stripes::after {
    top: calc(var(--stripe) * 2 + var(--gap));
    left: calc(var(--stripe) * 2 + var(--gap));
    border-top-left-radius: calc(var(--bend) - var(--stripe) * 2 - var(--gap));
    box-shadow: 0 0 0 var(--stripe) var(--blue);
}

.masthead,
.home,
.archive,
.page,
.site-footer {
    max-width: 61rem;
    margin: 0 auto;
}

.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: last baseline;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: 6rem 0 4.5rem;
}

.masthead > div {
    flex: 1 1 0;
    min-width: min-content;
}

.wordmark {
    margin: 0 0 0 -0.06em;
    font: 400 3.5rem/1 var(--display);
    letter-spacing: -0.02em;
}

.tagline {
    margin: 0.875rem 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.site-nav {
    display: flex;
    gap: 2rem;
    font: 400 1.0625rem/1.4 var(--text);
}

.wordmark a,
.site-nav a,
.post-title a,
.post-list a {
    color: var(--ink);
    text-decoration: none;
}

.post-list a {
    color: var(--blue);
}

.site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

.site-nav a:hover,
.post-title a:hover,
.post-list a:hover {
    color: var(--orange);
}

.home,
.archive {
    display: grid;
    grid-template-columns: minmax(0, 40rem) 16rem;
    justify-content: space-between;
    gap: 4rem;
}

.post-title {
    margin: 0 0 0.75rem;
    font: 500 2rem/1.2 var(--heading);
    letter-spacing: -0.01em;
}

.post-date,
.post-list time {
    display: block;
    color: var(--muted);
    font-size: 0.9375rem;
}

.post-date {
    margin-bottom: 2.25rem;
}

.post p,
.post ul,
.post pre,
.post blockquote {
    margin: 0 0 1.25rem;
}

.post h2:not(.post-title),
.post h3 {
    margin: 2.75rem 0 1rem;
    font: 600 1.375rem/1.35 var(--text);
}

.post ul {
    padding-left: 1.25rem;
}

.post li {
    margin-bottom: 0.375rem;
}

.post li::marker {
    color: var(--blue);
}

.post blockquote {
    padding: 0.125rem 0 0.125rem 1.25rem;
    border-left: 4px solid var(--blue);
    font-style: italic;
}

.post blockquote p {
    margin: 0;
}

.post pre {
    overflow-x: auto;
    padding: 1rem 1.25rem;
    background: var(--wash);
    font-size: 0.875rem;
    line-height: 1.6;
}

.post img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.image-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
}

.image-row img {
    flex: 1 1 0;
    min-width: 0;
}

.post:not(.excerpt) > p:last-child::after,
.post:not(.excerpt):not(:has(> p:last-child))::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-left: 0.4em;
    background: var(--orange);
}

.post:not(.excerpt):not(:has(> p:last-child))::after {
    display: block;
    margin-left: 0;
}

.post-actions {
    display: flex;
    gap: 1.75rem;
    margin: 1.75rem 0 0;
    font-size: 1rem;
}

.home .post-actions + .post {
    margin-top: 5.5rem;
}

aside h2 {
    margin: 0.5rem 0 1.25rem;
    font: 600 1.0625rem/1.4 var(--text);
}

aside section + section {
    margin-top: 3.5rem;
}

aside p {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.post-list {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.post-list li {
    margin-bottom: 1.25rem;
}

.post-list a {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.post-list time {
    margin-top: 0.25rem;
}

.archive {
    row-gap: 0;
}

.archive-intro {
    grid-column: 1;
    margin-bottom: 4rem;
}

.archive-intro .post-title {
    margin-bottom: 1rem;
}

.archive-intro p {
    margin: 0;
}

.archive-intro .legend {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 1rem;
}

.archive aside {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.archive aside section {
    position: sticky;
    top: 2.5rem;
}

.eras {
    grid-column: 1;
}

.era {
    margin-bottom: 5rem;
    scroll-margin-top: 2.5rem;
}

.era-head {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.era-head img {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

#el-rancho-da-da .era-head img {
    border-radius: 0;
}

.era h2 {
    margin: 0;
    font: 400 1.625rem/1.25 var(--text);
    letter-spacing: -0.01em;
}

.era > p {
    margin: 0 0 1.25rem;
}

.songs {
    margin: 2rem 0 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid var(--blue);
    list-style: none;
}

.songs li {
    padding: 0.3rem 0;
}

.videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.75rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.videos a {
    display: block;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.videos a:hover {
    color: var(--orange);
}

.video-thumb {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--ink);
}

.video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumb::before,
.video-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.video-thumb::before {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px var(--blue);
}

.video-thumb::after {
    margin-left: 0.2rem;
    border-left: 1.1rem solid var(--orange);
    border-block: 0.7rem solid transparent;
}

.videos a:hover .video-thumb::before {
    box-shadow: 0 0 0 3px var(--orange);
}

.songs a,
.era-list a {
    color: var(--ink);
    text-decoration: none;
}

.songs a:hover,
.era-list a:hover {
    color: var(--orange);
}

.dagger {
    color: var(--orange);
}

.era-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.era-list li {
    margin-bottom: 0.875rem;
    line-height: 1.35;
}

.era-list a {
    display: block;
    font-weight: 400;
}

.page > * {
    max-width: 40rem;
}

.page > .post-title {
    margin-bottom: 2.5rem;
}

.blog-list li {
    margin-bottom: 1.75rem;
}

.blog-list a {
    font-size: 1.25rem;
}

.song .post-date {
    margin-bottom: 2rem;
}

.song p {
    margin: 0 0 1.25rem;
}

.listen {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 2rem;
    padding: 0.875rem 1.5rem;
    border: 3px solid var(--orange);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--blue);
    color: var(--ink);
    font: 400 1rem/1 var(--display);
    text-decoration: none;
}

.listen::before {
    content: "";
    border-left: 0.7em solid var(--orange);
    border-block: 0.45em solid transparent;
}

.follow {
    margin: 3rem 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.follow + .back {
    margin-top: 1.5rem;
}

.back {
    margin: 3rem 0 0;
    font-size: 1rem;
}

.site-footer {
    padding: 6rem 0 3rem;
    color: var(--muted);
    font-size: 0.875rem;
}

@media (max-width: 62rem) {
    .home,
    .archive {
        grid-template-columns: minmax(0, 40rem);
        gap: 3rem;
    }

    .archive-intro,
    .archive aside,
    .eras {
        grid-column: 1;
        grid-row: auto;
    }

    .archive-intro {
        margin-bottom: 0;
    }

    .archive aside section {
        position: static;
    }

    .era-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem 1.5rem;
    }

    .era-list li {
        margin: 0;
    }
}

@media (max-width: 40rem) {
    :root {
        --stripe: 8px;
        --gap: 4px;
        --bend: 40px;
    }

    body {
        font-size: 1.0625rem;
    }

    .masthead {
        padding: 3.5rem 0 3rem;
    }

    .wordmark {
        font-size: 2.25rem;
    }

    .post-title {
        font-size: 1.5rem;
    }

    .era-head {
        grid-template-columns: 4.5rem 1fr;
        gap: 1.25rem;
    }

    .era-head img {
        width: 4.5rem;
        height: 4.5rem;
    }

    .era h2 {
        font-size: 1.25rem;
    }

    .site-footer {
        padding-top: 4rem;
    }
}