/* 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;
}


: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;
      
    
}

@supports (font-variation-settings: normal) {
  :root { 
    --font-base: 'InterVariable', 'sans-serif';
  }
}
/* 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;
}
@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;
}
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/fonts/inter/InterVariable-5db5a521938db7aaba812b5ef28f057725d3622a1e81c0a6ecd3ca6efd0a04ad.woff2) format("woff2");
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/fonts/inter/InterVariable-Italic-635017f7110876734b249b2917840fc9ca2e4af3b066d5b326d4aaf071c05eaf.woff2) format("woff2");
}

/* static fonts */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Thin-8861f06fe791a1913f1665bf4351a2063ce78a714380b8926daf120bfb2cc415.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-ThinItalic-5d155acf67f9ec89584416879704983db06e061d72960d63555e9ed9e6b241c2.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-ExtraLight-617dd36cc733d20cb9e623f080a57a0b14a297beffefcd8423aa781ea00c6dfb.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-ExtraLightItalic-dd3b2dc162e0573d740cf41e06791b1bd1962afe784ddababe18d99400392e68.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Light-dfa7e89569b7f7ca04886d9cb5fd8134edc102665c13d9bd48e2d1e71f259f68.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-LightItalic-8108bd691de06e316c975e6efc5dc1813ebc0b81d4fdf3f919c99bb7d36532e4.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Regular-5ff914dcc4f17d16b53a50999fa201bd71eff430101aa255cd2e2c4b3b9ca8f5.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Italic-8f4411341b759b8021378a00d7f2d9c8bc0cb393e7158345077147d57225eba6.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Medium-6a5412fa515d59e84c9dac4f01f6de2b4b6e355a37ed1a585cc31cbde296dc4c.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-MediumItalic-494ccf97ddb0143f4105a90f52a22be0208a65b71cef8ba58148eb622ccf2d3e.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-SemiBold-97fc520ab935d5b172431674e4968af12db7e5a6d07330c0a054bf6b7864f938.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-SemiBoldItalic-c3cac38cbc97de04d0577e448b20f3c424c2726136771abbd7caff49d8a0e843.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Bold-8b879e329596393ae87ea8776e1e1f3aa6ccd95da26927ed7108c25c5425d33e.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-BoldItalic-b35668c2a100a8b142d3462136e019393ae66c7f2af75b8ed8427ee91e49a8d1.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-ExtraBold-8c48ede6c7c3c67c3a6be7567926694e5cd1eb798b7ff73d29bbccb751c89703.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-ExtraBoldItalic-14b7a2758074062d7a48e43324e7f4723d230426f5261f705a88c8fa51e3bb1b.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-Black-1bcb48b7543ca20ae21321dad362bc32f525c2e836444a84712ee9b6f9392fbb.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/inter/Inter-BlackItalic-911904f1cae10e27cc9c2521f6e385ff2be13b4a2a242da3270f165bf95e7c0c.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Thin-ea12b81865e990076f05ce21778ff2d7ba3002353e019ecdb28abd70c128ef66.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-ThinItalic-867dc625851de3f5efb29345f5459896b41fa016a6e0550a243b75d2459a900b.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-ExtraLight-48cbaf521acc083dc515ef959aaba5f00439dc4968ade1b9d28be4e4139cb0cc.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-ExtraLightItalic-e149c8ff7e578f23c63b928b385f1d44ff09e74c673f8a404a079938184f011f.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Light-6065f9c63d0f23d7a466f69c80e0635f3146c18abc823102b9915bdea8c58319.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-LightItalic-94cc598b2e3a5643757362c7c70ff14cb2e92e422efdd2d7bb99490e843aced2.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Regular-bcf5b6ad4c8f3413e444d1a57f59cda799bae37a1caf39c8b6382f79403449ed.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Italic-a02bf14920dbd2ff2d80846b3da3ea9b68fdaccab2b03f17649b9681a67b96ac.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Medium-3a8b9c4cd4b8458ebdb4f648558e56be542ea80eaaf3ee2768d487a12a967c5c.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-MediumItalic-9b22eaabdac4ad5fd8da25f015b6d6b3daf64f627fcd5f3d62575b34df99c6e0.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-SemiBold-5942e5d7eaf37b5c5d589484d8d4160f2c0c392a83408b35ebbac08c56956c12.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-SemiBoldItalic-2f7bcdd7c20989dd60f88b59b4a28c5481e7b5ca246d9aac0ed34820586f9c87.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Bold-4fa6e65712642460c076ea4d6cbb3dcc729c9f60895409e0cb1a9199dc8e6aa0.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-BoldItalic-6c2dbe958c200c93d29b0c7005ea7535343b42a73772a26e7a027d835c314717.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-ExtraBold-0adfa52a4cfd8abf77aedecc763d8e62edd76dbff0eb4a48d1892cded15549bf.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-ExtraBoldItalic-5d993de7d2b3ddcaa69a11d4502a4532078c17f3070c77a572cfe11fab52bddd.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-Black-91c25f91be1c383f8cd8cbc80b2242e94aa11ad8958e9a54f5bfcbfed510e05d.woff2) format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(/assets/fonts/inter/InterDisplay-BlackItalic-0b4c26dd2d33852659126b466567e65f9011715081f3b7f2d06229871fcfcc5a.woff2) format("woff2");
}

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1;
        /* Alternate one */
        alt-3: 9;
        /* Flat-top three */
        open-4: 2;
        /* Open four */
        open-6: 3;
        /* Open six */
        open-9: 4;
        /* Open nine */
        lc-l-with-tail: 5;
        /* Lower-case L with tail */
        simplified-u: 6;
        /* Simplified u */
        alt-double-s: 7;
        /* Alternate German double s */
        uc-i-with-serif: 8;
        /* Upper-case i with serif */
        uc-g-with-spur: 10;
        /* Capital G with spur */
        single-story-a: 11;
        /* Single-story a */
        compact-lc-f: 12;
        /* Compact f */
        compact-lc-t: 13;
        /* Compact t */
    }

    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;
        /* Open digits */
        disambiguation: 2;
        /* Disambiguation (with zero) */
        disambiguation-except-zero: 4;
        /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;
        /* Round quotes & commas */
        square-punctuation: 7;
        /* Square punctuation */
        square-quotes: 8;
        /* Square quotes */
        circled-characters: 5;
        /* Circled characters */
        squared-characters: 6;
        /* Squared characters */
    }
}

@font-feature-values Inter {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1;
        /* Alternate one */
        alt-3: 9;
        /* Flat-top three */
        open-4: 2;
        /* Open four */
        open-6: 3;
        /* Open six */
        open-9: 4;
        /* Open nine */
        lc-l-with-tail: 5;
        /* Lower-case L with tail */
        simplified-u: 6;
        /* Simplified u */
        alt-double-s: 7;
        /* Alternate German double s */
        uc-i-with-serif: 8;
        /* Upper-case i with serif */
        uc-g-with-spur: 10;
        /* Capital G with spur */
        single-story-a: 11;
        /* Single-story a */
        compact-lc-f: 12;
        /* Compact f */
        compact-lc-t: 13;
        /* Compact t */
    }

    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;
        /* Open digits */
        disambiguation: 2;
        /* Disambiguation (with zero) */
        disambiguation-except-zero: 4;
        /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;
        /* Round quotes & commas */
        square-punctuation: 7;
        /* Square punctuation */
        square-quotes: 8;
        /* Square quotes */
        circled-characters: 5;
        /* Circled characters */
        squared-characters: 6;
        /* Squared characters */
    }
}

@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1;
        /* Alternate one */
        alt-3: 9;
        /* Flat-top three */
        open-4: 2;
        /* Open four */
        open-6: 3;
        /* Open six */
        open-9: 4;
        /* Open nine */
        lc-l-with-tail: 5;
        /* Lower-case L with tail */
        simplified-u: 6;
        /* Simplified u */
        alt-double-s: 7;
        /* Alternate German double s */
        uc-i-with-serif: 8;
        /* Upper-case i with serif */
        uc-g-with-spur: 10;
        /* Capital G with spur */
        single-story-a: 11;
        /* Single-story a */
        compact-lc-f: 12;
        /* Compact f */
        compact-lc-t: 13;
        /* Compact t */
    }

    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1;
        /* Open digits */
        disambiguation: 2;
        /* Disambiguation (with zero) */
        disambiguation-except-zero: 4;
        /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;
        /* Round quotes & commas */
        square-punctuation: 7;
        /* Square punctuation */
        square-quotes: 8;
        /* Square quotes */
        circled-characters: 5;
        /* Circled characters */
        squared-characters: 6;
        /* Squared characters */
    }
}
/*
  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:not(:first-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: clamp(55ch, 77ch, 100% - 4rem);
}

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-xl {
    max-inline-size: calc(var(--measure) * 1.33);
}

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

.muted {
    color: var(--color-white-alpha-700);
}
.trix-content {}
nav[aria-label="breadcrumbs"] {
    font-size: var(--size-step-min1);
    font-weight: 200;
    /* color: var(--color-primary_dark_20); */
    color: var(--color-primary_dark_20);

    ol {
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* list-style-position: inside; */

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

        li:not(:first-child) {
            list-style-type: ">";
            padding-inline-start: var(--space-2xs);
            margin-inline-start: var(--space-2xs);
        }

        li > a {
            text-decoration: underline;

            &:hover {
                color: var(--color-accent1);
                text-decoration: underline;
                text-decoration-style: dotted;
            }
        }
    }
}
ul.tracklist {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;

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

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

.episode-grid-item-cover {
    min-width: 320px;
    min-height: 320px;
}
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 {
    aside {
        font-weight: 300;
        font-size: var(--size-step-0);
        color: var(--color-white-alpha-700);
    }

    section {
        max-width: 100%;
    }

    header {
        max-inline-size: 90ch;
    }

    & .trix-content {
        font-weight: 300;
        max-inline-size: 62ch;

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

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

        & ul {
            list-style-type: square;
            list-style-position: inside;

            & > li {
                margin-block-start: 0;
            }
        }

        & ol {
            list-style-type: decimal;
            list-style-position: inside;

            & > li {
                margin-block-start: 0;
            }
        }

        & p,
        & blockquote,
        & div,
        & ul,
        & ol,
        & li {
            /* color: var(--color-white-alpha-700); */
            max-inline-size: 100%;
        }

        & iframe {
            width: 100%;
            border: none;
        }

        & pre {
            overflow-x: auto;

            & code {
                padding: none;
            }
        }

        & a:hover {
            color: var(--color-primary);
        }

        & .attachment-gallery {
            /* display items in a grid of 2x2 items separated by size-s-m */
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-xs-s);

            & > * {
                margin-block-start: 0;
            }

        }

        & .attachment-gallery:has(action-text-attachment:only-of-type) {
            grid-template-columns: 1fr;
            gap: none;
        }

        /* list of images that replaces the Attachment Galleries of ActionText::RichText */
        & ul:has(li > img:only-of-type) {
            list-style-type: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-xs-s);
        }

        & table {
            width: 100%;
            border-collapse: collapse;
            font-feature-settings: "tnum";

            & th,
            & td {
                border: 1px solid var(--color-white);
                padding: calc(var(--space-2xs) / 2);
            }
        }
    }
}

@media(min-width: 50em) {
    article.article-preview {
        display: grid;
        grid-template-columns: 22% 1fr;
    }
}
 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);

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

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

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

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

     nav {
         display: grid;
         grid-template-columns: 1fr;
         gap: var(--space-xs);

         a:hover {
             color: var(--color-yellow);
             text-decoration: underline;
             text-decoration-style: dotted;

         }
     }
 }

 @media (min-width: 50em) {
     .site-foot {
         nav {
             display: grid;
             grid-template-columns: repeat(auto-fit, 20%);
             gap: var(--space-s-m);
         }
     }
 }
.site-head {
    section {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xs);

        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);

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

        > :first-child {
            align-self: center;
        }

        > :last-child {
            align-self: center;
        }
    }

    h1.brand {
        max-inline-size: unset;
        font-size: var(--size-step-2);
    }

    nav {
        margin-block-start: var(--space-2xs);
    }

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

        li {
            display: inline;

            & > a {
                text-decoration: none;
                color: var(--color-white);

                &:hover {
                    color: var(--color-accent1);
                    text-decoration: underline;
                    text-decoration-style: dotted;
                }
            }
        }

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

    .onair-container {
        /* font-family: monospace; */
        font-weight: 300;
        color: var(--color-primary_dark_20);
        font-feature-settings: "calt", "dlig", "case", "zero", "ss01", "ss02", "ss07", "cv02", "cv01", "cv09", "cv03", "cv04", "cv12", "cv13";

        a {
            text-decoration: none;
        }
    }
}

@media (min-width: 50em) {
    .site-head {
        section {
            display: grid;
            grid-template-columns: 20% 1fr;
            gap: var(--space-s-m);
        }
    }
}
.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[data-layout='25-25-25-25'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(4rem, 20vw, 16rem);
}

.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: grid;
    grid-template-columns: minmax(10%, 15%) auto;
    gap: var(--space-xs-s);

    & > :first-child {
        & img {
            max-width: 100%;
        }
    }
}
.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);
}

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

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

.recursive-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%;
}
.brand {
    font-family: var(--font-brand);
    font-style: italic;
    font-weight: 800;
    /* font-family: var(--font-base); */
    /* font-weight: 900; */
    /* font-feature-settings: "cpsp", "ss02", "cv06", "dlig"; */

    & > a {
        text-decoration: none;

        &:hover {
            color: var(--color-yellow);
            text-decoration: none;
        }
    }
}

h1.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; */
}