nav[aria-label="breadcrumbs"] {
    font-size: var(--size-step-min1);

    ol {
        display: flex;

        li:not(:last-child) {

            &:after {
                content: " > ";
                margin-inline: var(--space-2xs);
            }
        }
    }
}
ul.tracklist {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;

    & > li > a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
ul.artists {
    max-inline-size: 50ch;
    padding-inline-start: 0;
}

ul.artists li {
    display: inline;
}
ul.list-tags-inline {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline;

    & li {
        display: inline;

        &:not(:last-child)::after {
            content: ', ';
        }

        &:last-child::after {
            content: '.';
        }
    }
}
article.article-preview {
    & .trix-content {
        & h2 {
            font-size: var(--size-step-2);
        }

        & h3 {
            font-size: var(--size-step-1);
        }
    }
}
 body>aside {
     padding-inline-start: var(--space-m-l);
     padding-inline-end: var(--space-m-l);
     padding-block-start: var(--space-m-l);

     border-top-color: var(--border-color);
     border-top-style: var(--border-style);
     border-top-width: var(--border-width);
 }

 .site-foot {
     padding-inline-start: var(--space-m-l);
     padding-inline-end: var(--space-m-l);
     padding-block-start: var(--space-m-l);
     padding-block-end: var(--space-m-l);

     border-top-color: var(--border-color);
     border-top-style: var(--border-style);
     border-top-width: var(--border-width);
     font-size: var(--size-step-min1);
 }

 .site-foot h1 {
     font-size: var(--size-step-2);
 }

 .site-foot h3 {
     font-size: var(--size-step-0);
 }

 .site-foot p {
     font-size: var(--size-step-min1);
 }

 .site-foot .switcher>* {
     flex-basis: calc((45rem - 100%) * 999);
 }
.site-head {
    container-name: site-head;
    container-type: inline-size;

    section {
        border-bottom-color: var(--border-color);
        border-bottom-style: var(--border-style);
        border-bottom-width: var(--border-width);

        padding-inline-start: var(--space-m-l);
        padding-inline-end: var(--space-m-l);

        padding-block-start: var(--space-xs);
        padding-block-end: var(--space-xs);

        display: flex;
        justify-content: start;

        &[data-controller="player"] {
            font-size: var(--size-step-0);
            padding-block-start: var(--space-xs);
            padding-block-end: var(--space-xs);
        }
    }

    h1.brand {
        max-inline-size: unset;
        font-size: var(--size-step-2);
        margin-inline-end: var(--space-l);

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

    ul[role="nav"] {
        display: inline;
        font-size: var(--size-step-0);
        font-family: monospace;

        li {
            display: inline;
            a {
                text-transform: uppercase;
                text-decoration: none;
            }

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

        li:not(:last-child) {
            margin-inline-end: var(--space-s-m);
        }
    }

    .onair-container {
        font-family: monospace;

        a {
            text-decoration: none;
        }
    }

}

@container site-head (max-width: 500px) {
    .site-head {
        section:first-child {
            justify-content: center;
        }

        h1.brand {
            font-size: var(--size-step-3);
            margin-inline-start: var(--space-l);
            margin-inline-end: var(--space-l);
        }
    }
}
.box {
    padding: var(--space-s);
    /* border: 1px solid; */
    border-color: var(--border-color);
    border-style: var(--border-style);
    border-width: var(--border-width);
    --color-light: var(--color-white);
    --color-dark: var(--color-black);
    color: var(--color-dark);
    background-color: var(--color-light);
}

.box * {
  color: inherit;
}

.box.invert {
  color: var(--color-light);
  background-color: var(--color-dark);
}
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 1rem);
    justify-content: flex-start;
    align-items: center;
}
form {
    label {
        display: block;

        &:has(+ input[required]):after {
            content: "*";
            color: var(--color-danger);
        }
    }

    input {
        margin-top: 0;
    }

    p.help {
        font-size: var(--size-step-min1);
        color: var(--color-primary_dark_20);
    }
}
.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &[data-format="square"] {
      --n: 1;
      --d: 1;
  }
}

.frame > img, .frame > video, .frame > iframe,
.frame > a > img {
    object-fit: cover;
    inline-size: 100%;
    block-size: 100%;
}

.embed-container {
  position: relative;
  padding-bottom: 36.00%;
  height: 0;
  overflow: hidden;
  max-width: 60ch;

  & iframe, & object, & embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
}
/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */
.grid {
    display: grid;
    grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
    gap: var(--gutter, var(--space-s-l));
}

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

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

.grid article {
    margin: 0;
    padding: 0;
}

.icon {
    height: 0.75em;
    height: 1cap;
    width: 0.75em;
    width: 1cap;
}

.with-icon {
    display: inline-flex;
    align-items: baseline;
}

.with-icon .icon {
    margin-inline-end: var(--space-2xs, 0.5em);
}
.reel {
  display: flex;
  block-size: auto;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: none;
    /* scrollbar-color: var(--color-light) var(--color-dark); */
}

.reel::-webkit-scrollbar {
  display: none;
}

/* .reel::-webkit-scrollbar-track {
  background-color: #000;
}

.reel::-webkit-scrollbar-thumb {
  background-color: #000;
  background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);
} */

.reel > * { 
  flex: 0 0 auto;
  max-width: 23rem;
}

.reel > img {
  block-size: 100%;
  width: auto;
  flex-basis: auto;
}

.reel > * + * {
  margin-inline-start: var(--space-m-l);
}
.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sidebar {
    /* ↓ The width when the sidebar _is_ a sidebar */
    flex-basis: 20rem;
    flex-grow: 1;
}

.sidebar-small {
    flex-basis: 12ch;
    flex-grow: 1;
}

.not-sidebar {
    /* ↓ Grow from nothing */
    flex-basis: 0;
    flex-grow: 999;
    /* ↓ Wrap when the elements are of equal width */
    min-inline-size: 75%;
}

.with-sidebar-xs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);

    & > :first-child {
        flex-grow: 1;

        & img {
            max-width: 8ch;
        }
    }

    & > :last-child {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: 50%;
    }
}
.stack > * + * {
  margin-block-start: calc(var(--flow-space) * 1);
}

.recursive-stack * + * {
  margin-block-start: calc(var(--flow-space) * 1);
}

.stack-large > * + * {
  margin-block-start: calc(var(--flow-space) * 2);
}

.recursive-stack-large * + * {
  margin-block-start: calc(var(--flow-space) * 2);
}

.stack-small > * + * {
  margin-block-start: calc(var(--flow-space) / 2);
}

.resursive-stack-small * + * {
  margin-block-start: calc(var(--flow-space) / 2);
}

.stack-xs > * + * {
  margin-block-start: calc(var(--flow-space) / 3);
}

.resursive-stack-xs * + * {
  margin-block-start: calc(var(--flow-space) / 3);
}
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);

}

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

article.switcher.preview > header {
    flex-grow: 0;
    flex-basis: calc((14ch - 100%) * 999);
    /*min-width: calc(12rem);*/
}

article.switcher.preview > div {
    flex-grow: 8;
    flex-basis: calc((12ch - 100%) * 999);
}

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

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
    }
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj11HzlqsLaoJN-b2863d0550081e2d65e6db89efa1b6669aa1d466a68193f6ee4cb44e3a83a1dc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj1lHzlqsLaoJN-66f82e724fa5a73afbafe3455a30a49b53cf441c2eb02a90a2988c9151dbee90.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj2FHzlqsLag-8413f157997f6574bf6d740e181ff5aebd1d413103ffc0765a5555543e330dcf.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmtIkGQLhEx6A5-053b0d3f7c5059cc98b31939d97c58834aafb6196466aa3ae44f16b18ef48252.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmtYkGQLhEx6A5-42d86849b437d77ce05b936d57c980b02880073ec44b915e18c8a6a9c08f5dbb.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmu4kGQLhExw-03cfc61ee384c75711ce262048a7c1d5fbbb509951ddebaf38d6e31eb5fa884d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x7T2lv0tKk7aw-40f9f0d262e7eca5b323abf285ec1877cbde0d598474af3a7d7964921bc6d38c.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x_T2lv0tKk7aw-35a24d30b68ffd44a3b6d5cf2b4b9332687ec2c18fe858fc2353305c4aebe2ce.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlowcondensed/v12/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2lv0tKk-d4df220573306b75b1803af71e2f6956c1373e87ad8bdb6a433536d62888cf5e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmserifdisplay/v12/-nFhOHM81r4j6k0gjAW3mujVU2B2G_VB3vD2xWr53BJl-c54a44366b6565a2c30b70e0e4b79c570e0275be0bde0ffd08d50305e2bed2de.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmserifdisplay/v12/-nFhOHM81r4j6k0gjAW3mujVU2B2G_VB0PD2xWr53A-660bbd61a659d97361a8d7145ff588796ad2f656262fe3de44839f4574f7f0cc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmserifdisplay/v12/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q-d4b4b8a1259081a9b8d07b2a6ad24115b353a871d14d45077416ec37d4327c7b.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmserifdisplay/v12/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g-6a367efb77e34820ceb562bb76468c83fd541183eb0e21d79bb2adbaf4631857.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhjp-Ek-_EeAmM-eefed398f51de803f900b3a4fd5a83684f5d34fe6f4ab1c8030e24dd779be929.woff) format('woff');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthjp-Ek-_EeAmM-24ce07f73d8d792838064efe7f37f02e500b0d2d1284ef84f66ff7fbf5590d99.woff) format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhjp-Ek-_EeAmM-1ba963ae003bf57e882d833b8a497c09ebcd33a6487dcc9d025491439e6ccbe4.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhjp-Ek-_EeAmM-c61141cf342a6e00eb59703f120af71af73ab672d0ef52aea20bd7ff853515ec.woff) format('woff');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhjp-Ek-_EeAmM-5fd3dcb0833817fdb81d9d06213eb9adb4f37c07a2e4b91de5a87dfcf747c87f.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhjp-Ek-_EeAmM-59c14cf99c02e6e74f5227f2c691357baddf714105d3e981c6803af894623ec8.woff) format('woff');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA-fe5d512a6823adefbddde5e3cf8e928c2833ae24a0e6fe3bfa798e44c57f4fa6.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Prevent zooming when orientation changes on some iOS devices */
html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-inline-size: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}
/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/
body {
    color: var(--color-primary);
    background: var(--color-background);
    font-size: var(--size-step-0);
    font-family: var(--font-base);
    /* golden ratio */
    line-height: 1.61803398875;
    letter-spacing: var(--tracking);
}

h1, h2, h3 {
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--tracking-s);
    font-family: var(--font-display);
}

h1 {
    font-size: var(--size-step-5);
}

h2 {
    font-size: var(--size-step-4);
}

h3 {
    font-size: var(--size-step-3);
}

h1, h2, h3, h4, h5 {
    & > a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

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

h1,
h2,
h3 {
    max-inline-size: 60ch;
}

blockquote {
    border-inline-start: var(--space-2xs) solid var(--color-white-alpha-800);
    padding-inline-start: var(--space-s);
    color: var(--color-white-alpha-800);
    font-style: italic;
}

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

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

[role='list'] {
    padding: 0;
}

a {
    color: currentcolor;
    text-decoration: underline;

    &.link-text {
        text-decoration: none;
    }
}

:target {
    scroll-margin-top: 2ex;
}

main:focus {
    outline: none;
}

main > * {
    padding-inline-start: var(--space-m-l);
    padding-inline-end: var(--space-m-l);
    /*padding-inline-start: 0;*/
    /*padding-inline-end: 0;*/
}

main > section:not(:last-child) {
    padding-block-end: var(--space-s-m);
}

main > hr {
    border-block-start-width: var(--border-width);
    border-block-start-color: var(--color-primary);
    border-block-start-style: var(--border-style);
}

article .not-sidebar * {
    max-inline-size: 55ch;
}

article .not-sidebar figure {
    max-inline-size: 100%;

    img {
        max-width: 100%;
    }

    figcaption {
        color: var(--color-white-alpha-700);
    }
}

main article {
    h1 {
        font-size: var(--size-step-4);
    }

    h2 {
        font-size: var(--size-step-3);
    }

    h3 {
        font-size: var(--size-step-2);
    }
}

/* Base selection styles that invert whatever colours are rendered */
::selection {
    background: var(--color-primary);
    color: var(--color-background);
}

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

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

    &.list-bullet {
        list-style: square;
        padding-inline-start: var(--space-m);
    }
}

.fs-5 { font-size: var(--size-step-5); }
.fs-4 { font-size: var(--size-step-4); }
.fs-3 { font-size: var(--size-step-3); }
.fs-2 { font-size: var(--size-step-2); }
.fs-1 { font-size: var(--size-step-1); }
.fs-0 { font-size: var(--size-step-0); }
.fs-min1 { font-size: var(--size-step-min1); }

.max-inline-size {
    max-inline-size: var(--measure);
}

.max-inline-size-half {
    max-inline-size: calc(var(--measure) / 2);
}

.muted {
    color: var(--color-white-alpha-700);
}
/* Global variables */
:root {
  --gutter: var(--space-s-m);

  --btn-border-color: var(--color-primary);
  --btn-border-width: 0.25ch;

  --border-style: solid;
  --border-width: calc(var(--space-2xs) / 2);
  --border-radius: 0.5rem;

  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 200ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --tracking: -0.00ch;
  --tracking-s: -0.025ch;
  --flow-space: var(--space-m-xl);
  --measure: 45ch;
}
.brand {
    font-family: var(--font-brand);
    font-style: italic;
    font-weight: 800;
}

.tagline {
    font-size: var(--size-step-0);
    opacity: 80%;
}

.brand a {
    text-decoration: none;
}

.brand a:hover {
    color: var(--color-yellow);
}
.btn {
    border-color: var(--btn-border-color);
    border-width: var(--btn-border-width);

    text-decoration: none;
    text-transform: uppercase;

    padding-inline: var(--space-xs);
}

.btn-lg {
    padding-inline: var(--space-xs);
    padding-block: var(--space-xs);
    font-size: var(--size-step-0);
}

.btn-xl {
    padding-inline: var(--space-m-l);
    padding-block: var(--space-s);
    font-size: var(--size-step-1);
}

.btn-no-border {
    border: none;
}

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

.btn-accent1 {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.btn-accent1:hover {
    background-color: var(--color-accent1);
    color: var(--color-background);
}
/* breakout content elements to wrapper based on full bleed image solution by josh cumeau. https://www.joshwcomeau.com/css/full-bleed/ */

.content {
  --wrapper-max-width: 75rem;
  display: grid;
  grid-template-columns:
    1fr
    min(48ch, 100%)
    1fr;
}

.content > * {
  grid-column: 2;
}

.content .breakout {
  inline-size: 100%;
  grid-column: 1 / 4;
}
/*
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
/**
 * REGION
 * Add consistent vertical padding to create regions of content
 * Can either be configured by setting --region-space or use a default from the space scale
 */
.region {
  padding-block-start: var(--region-space-top, var(--space-l-2xl));
  padding-block-end: var(--region-space-bottom, var(--space-l-2xl));
}
.hidden {
    display: none !important;
}
/**
 * WRAPPER
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents
 * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
 */
.wrapper {
  max-inline-size: var(--wrapper-max-width, 85rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* position: relative; */
}


:root {
    
      
        --space-2xs: clamp(0.5rem, 0.47rem + 0.16vw, 0.625rem);
      
        --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem);
      
        --space-s: clamp(1.0rem, 0.93rem + 0.33vw, 1.25rem);
      
        --space-m: clamp(2.0rem, 1.87rem + 0.66vw, 2.5rem);
      
        --space-l: clamp(3.0rem, 2.8rem + 0.99vw, 3.75rem);
      
        --space-xl: clamp(5.0rem, 4.67rem + 1.64vw, 6.25rem);
      
        --space-2xl: clamp(8.0rem, 7.47rem + 2.63vw, 10.0rem);
      
        --space-3xl: clamp(13.0rem, 12.14rem + 4.28vw, 16.25rem);
      
        --space-xs-s: clamp(0.75rem, 0.62rem + 0.66vw, 1.25rem);
      
        --space-s-m: clamp(1.0rem, 0.77rem + 1.15vw, 1.875rem);
      
        --space-m-l: clamp(1.5rem, 1.24rem + 1.32vw, 2.5rem);
      
        --space-m-xl: clamp(1.5rem, 1.24rem + 1.32vw, 2.5rem);
      
        --space-l-xl: clamp(2.0rem, 1.54rem + 2.3vw, 3.75rem);
      
        --space-l-2xl: clamp(2.0rem, 1.21rem + 3.95vw, 5.0rem);
      
        --space-xl-2xl: clamp(3.0rem, 2.47rem + 2.63vw, 5.0rem);
      
        --space-2xl-3xl: clamp(4.0rem, 3.08rem + 4.61vw, 7.5rem);
      
    
      
        --size-step-min2: clamp(0.5rem, 0.47rem + 0.16vw, 0.625rem);
      
        --size-step-min1: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);
      
        --size-step-0: clamp(1.0rem, 0.93rem + 0.33vw, 1.25rem);
      
        --size-step-1: clamp(1.1875rem, 1.04rem + 0.74vw, 1.75rem);
      
        --size-step-2: clamp(1.4375rem, 1.16rem + 1.4vw, 2.5rem);
      
        --size-step-3: clamp(1.75rem, 1.27rem + 2.38vw, 3.5625rem);
      
        --size-step-4: clamp(2.0625rem, 1.29rem + 3.87vw, 5.0rem);
      
        --size-step-5: clamp(2.5rem, 1.3rem + 6.0vw, 7.0625rem);
      
        --size-step-6: clamp(3.0rem, 1.17rem + 9.13vw, 9.9375rem);
      
    
      
        --font-brand: 'Barlow Condensed', sans-serif;
      
        --font-display: 'DM Serif Display', serif;
      
        --font-base: 'Inter', sans-serif;
      
        --font-mono: monospace;
      
    
      
        --color-background: rgb(18, 18, 18);
      
        --color-primary: rgb(239, 239, 239);
      
        --color-primary_dark_20: #c7c7c7;
      
        --color-accent1: #facc15;
      
        --color-danger: #ff0000;
      
        --color-black: rgb(18, 18, 18);
      
        --color-black-alpha-900: rgb(18, 18, 18, 0.92);
      
        --color-black-alpha-800: rgb(18, 18, 18, 0.80);
      
        --color-black-alpha-700: rgb(18, 18, 18, 0.64);
      
        --color-black-alpha-600: rgb(18, 18, 18, 0.48);
      
        --color-black-alpha-500: rgb(18, 18, 18, 0.36);
      
        --color-black-alpha-400: rgb(18, 18, 18, 0.24);
      
        --color-black-alpha-300: rgb(18, 18, 18, 0.16);
      
        --color-black-alpha-200: rgb(18, 18, 18, 0.08);
      
        --color-black-alpha-100: rgb(18, 18, 18, 0.06);
      
        --color-black-alpha-50: rgb(18, 18, 18, 0.04);
      
        --color-white: rgb(239, 239, 239);
      
        --color-white-alpha-900: rgb(239, 239, 239, 0.92);
      
        --color-white-alpha-800: rgb(239, 239, 239, 0.80);
      
        --color-white-alpha-700: rgb(239, 239, 239, 0.64);
      
        --color-white-alpha-600: rgb(239, 239, 239, 0.48);
      
        --color-white-alpha-500: rgb(239, 239, 239, 0.36);
      
        --color-white-alpha-400: rgb(239, 239, 239, 0.24);
      
        --color-white-alpha-300: rgb(239, 239, 239, 0.16);
      
        --color-white-alpha-200: rgb(239, 239, 239, 0.08);
      
        --color-white-alpha-100: rgb(239, 239, 239, 0.06);
      
        --color-white-alpha-50: rgb(239, 239, 239, 0.04);
      
        --color-white_dark_20: #c7c7c7;
      
        --color-yellow: #facc15;
      
        --color-red: #ff0000;
      
    
}