/* SCREEN READER ONLY */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* VARIABLES */

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}

:root {
  --dark-green: oklch(0.2 0.051 223);
  --dark-blue: oklch(0.1 0.135 272);
  --white: oklch(0.9 0.007 234);
  --dark-red: oklch(0.15 0.082 35);
  --black: oklch(0.2 0.06 268.35);
  --border-color: color-mix(in srgb, var(--white) 20%, transparent);
  --shadow-color: color-mix(in srgb, var(--white) 50%, transparent);
  --highlight-shadow: 0 0 8px var(--shadow-color), 0 0 16px var(--shadow-color);
  --text-highlight-shadow: 0 0 4px var(--shadow-color), 0 0 6px var(--shadow-color);

  --content-inline-size: min(90ch, 100vw - 2rem);
  --border-radius: var(--space-m);
  --gap: var(--space-s);
}

/* TYPOGRAPHY */

@font-face
{
  font-family: Arquitecta;
  src: url('../font/ArquitectaBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  size-adjust: 120%;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bespoke Serif';
  src: url('../font/BespokeSerif-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --text-font-family: 'Bespoke Serif', serif;
  --heading-font-family: 'Arquitecta', sans-serif;
  font-size: 16px;
}

body {
  font-family: var(--text-font-family);
  font-size: var(--step-0);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--heading-font-family);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  line-height: 1.2;
}

h1 {
  text-transform: uppercase;
  font-size: var(--step-4);

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

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

/* PAGE LAYOUT */

:root {
  box-sizing: border-box;
}

body {
  min-inline-size: 320px;
  margin: 0;
}

.band {
  padding-block: 2rem;
  display: grid;
  grid-template-columns:
    1fr
    var(--content-inline-size)
    1fr;
}

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

/* COLOURS */

header {
  background-color: var(--dark-red);
  color: var(--white);
}

main section:nth-of-type(1) {
  background-color: var(--dark-green);
  color: var(--white);
}

main section:nth-of-type(2) {
  background-color: var(--black);
  color: var(--white);
}

main section:nth-of-type(3) {
  background-color: var(--dark-blue);
  color: var(--white);
}

footer {
  background-color: var(--dark-red);
  color: var(--white);
}

/* HEADER */

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  text-wrap: balance;
  background-image: url(/img/entirety-logo-background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  p {
    font-style: italic;
  }
}

/* SUBSCRIPTIONS */

.subscriptions {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--step-0);

  li {
    display: inline-block;
    text-align: center;
    gap: var(--space-xs);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    color: var(--black);
    flex-shrink: 0;
    inline-size: 15ch;
    background-color: transparent;
    transition: all 0.3s ease-in-out;

    &:hover, &:has(:active) {
      box-shadow: var(--highlight-shadow);
    }

    a {
      color: var(--white);
      text-decoration: none;
      display: block;
      padding: var(--space-xs);
    }
  }
}

/* PODCASTS */

.podcasts {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  font-size: var(--step--1);

  li {
    display: inline-block;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    inline-size: 300px;
    transition: all 0.3s ease-in-out;

    &:has(a:hover), &:has(a:active) {
      box-shadow: var(--highlight-shadow);
    }

    figure {
      margin: 0;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    figcaption {
      color: var(--white);

      a {
        color: var(--white);
        text-decoration: none;
        font-weight: bold;
      }
    }

  }
}

/* RECENT EPISODES */

.recent-episodes {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  font-size: var(--step--1);

  li {
    padding: var(--space-xs);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    transition: all 0.3s ease-in-out;

    &:has(a:hover), &:has(a:active) {
      box-shadow: var(--highlight-shadow);
    }

    img {
      inline-size: min(15vw, 100px);
      block-size: min(15vw, 100px);
      flex-shrink: 0;
    }

    h3 {
      margin-block-start: 0;
      text-align: left;

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

    .metadata {
      font-style: italic;
      font-size: var(--step--2);
    }

    .description {
      a {
        color: var(--white);
        font-weight: bold;
        text-decoration: underline;
        text-decoration-color: var(--shadow-color);
        text-underline-offset: var(--space-3xs);

        &:hover, &:active {
          text-shadow: var(--text-highlight-shadow);
        }
      }
    }

    audio {
      inline-size: 100%;
    }
  }
}

/* FOOTER */

footer {
  text-align: center;
  text-wrap: balance;
  font-size: var(--step--1);

  a {
    color: var(--white);
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--shadow-color);
    text-underline-offset: var(--space-3xs);

    &:hover, &:active {
      text-shadow: var(--text-highlight-shadow);
    }
  }
}