:root {
  --light-grey: #f2f2f2;
  --dark-grey: #333;
  --light-blue: #00a1e4;
  --dark-blue: #0c4b68;
  --content-max-width: calc(1048px + 2rem);
}

/* Water.css overrides */
:root {
  --text-main: #484848;
  --text-bright: #fff;
  --links: var(--light-blue);
}
a[href^=mailto\:]:before{content:""}
a[href^=tel\:]:before{content:""}
a[href^=sms\:]:before{content:""}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.45;
  background-color: var(--light-grey);
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-style: italic;
}
h1 {
  font-size: 2.8em;
}
h2 {
  font-size: 2.8em;
}
h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 1em;
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.4em;
  }
  h2 {
    font-size: 1.6em;
  }
}
p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
ul {
  padding-left: 1.1rem;
  font-size: 1.2rem;

  & ul {
    padding-left: 2rem;
  }
}

#main {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";

  & > header {
    grid-area: header;
  }
  & > main {
    grid-area: main;
  }
  & > footer {
    grid-area: footer;
  }
}

main.content {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main > header {
  font-size: 1.1em;
  font-style: italic;
  font-weight: bold;

  & > .container {
    display: grid;
    grid-template-areas:
      "logo hamburger"
      "nav nav";
    gap: 1rem;
    align-items: center;
    grid-template-columns: auto 1fr;
    padding: 1rem 1rem 0 1rem;

    & > .logo {
      grid-area: logo;
      padding-right: 20px;
    }

    & > nav {
      grid-area: nav;
      display: none;
      &.open {
        display: flex;
      }
    }

    & > .hamburger {
      grid-area: hamburger;
      display: block;
      justify-self: end;
    }
  }

  & a {
    color: var(--text-main);
  }
}

.main-menu {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  gap: 1rem;
  width: 100%;

  & > li {
    align-self: stretch;
    align-content: center;
    display: block;
    position: relative;

    > a {
      text-decoration: none;
    }
    &.active > a {
      text-decoration: underline;
    }
  }

  & > li .submenu {
    display: block;
    position: relative;
    top: 0;
    left: 0;

    list-style: none;
    padding: 0.5rem 0;
    margin: 0;

    & li {
      & a {
        font-weight: normal;
        display: block;
        padding: 0.5rem 1rem;
      }
    }

    & li:hover,
    & li:active,
    & li:focus,
    & li:focus-within {
      a {
        text-decoration: none;
      }
    }

    & li.active {
      a {
        text-decoration: underline;
      }
    }
  }
  & > li:active .submenu,
  & > li:hover .submenu,
  & > li:focus .submenu,
  & > li:focus-within .submenu {
    display: block;
  }
}

.hamburger {
  & label {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;

    & span {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #333;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      transition: 0.3s;

      &:nth-child(1) {
        top: 0;
      }

      &:nth-child(3) {
        top: auto;
        bottom: 0;
      }
    }
  }

  &.open label span {
    &:nth-child(1) {
      transform: translateY(50%) rotate(45deg);
    }
    &:nth-child(2) {
      opacity: 0;
    }
    &:nth-child(3) {
      transform: translateY(-50%) rotate(-45deg);
    }
  }
}

/* Desktop header/menu */
@media (min-width: 768px) {
  #main > header {
    & > .container {
      grid-template-areas:
        "logo nav";
      & > .logo {
        padding-bottom: 8px;
      }
      & > .hamburger {
        display: none;
      }
      & > nav {
        display: flex;
        align-self: stretch;
      }
    }
  }

  .main-menu {
    flex-direction: row;
    margin: 0;
    gap: 2rem;

    & > li .submenu {
      display: none;
      position: absolute;
      top: 94px;
      left: -3rem;
      min-width: 190px;
      z-index: 101;
      background-color: var(--light-blue);

      &::before {
        content: "";
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent var(--light-blue) transparent;
      }

      & li {
        text-align: center;
        & a {
          color: var(--text-bright) !important;
        }
      }
      & li.active {
        background-color: var(--dark-blue);
        & a {
          text-decoration: none;
        }
      }
      & li:hover,
      & li:active,
      & li:focus,
      & li:focus-within {
        background-color: var(--dark-blue);
      }
    }
  }
}

.container {
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

@media screen and (min-width: 1048px) {
  .container {
    /* NOTE: max-width can't be set on narrower screens as
    grid's column wrapping doesn't work with it (see .cards-light, .cards-dark) */
    max-width: var(--content-max-width);
  }
}

main.content > section {
  position: relative;
  width: 100%;

  &:not(:first-child) {
    min-height: 12rem;
  }

  &:first-child > .container {
    padding-top: 0;
  }

  /* Hide empty sections */
  & > .container:not(:has(> *)) {
    display: none;
  }

  &.has-background-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  &.dark,
  &.colored,
  &.hero-light,
  &.hero-dark,
  &.cards-light,
  &.cards-dark {
    max-width: calc(var(--content-max-width) + 8rem);
  }

  &.hero-light,
  &.hero-dark {
    min-height: auto;
    aspect-ratio: 2000/800;

    & > .container {
      height: 100%;
      text-align: center;

      & h1, & h2, & h3, & h4, & h5, & h6 {
        margin-top: 1rem;
        font-style: italic;
        font-weight: bold;
      }
      p {
        font-style: italic;
        font-weight: 700;
      }
      & p:not(:first-child) {
        margin-top: 0;
      }
    }
  }

  /* Add a triangle to the bottom of the hero section */
  &.hero-light + &.light::before,
  &.hero-light + &.dark::before,
  &.hero-light + &.colored::before,
  &.hero-light + &.cards-light::before,
  &.hero-light + &.cards-dark::before,
  &.hero-dark + &.light::before,
  &.hero-dark + &.dark::before,
  &.hero-dark + &.colored::before,
  &.hero-dark + &.cards-light::before,
  &.hero-dark + &.cards-dark::before {
    content: "";
    position: absolute;
    top: -59px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 30px;
    border-style: solid;
    border-color: transparent transparent var(--light-grey) transparent;
  }
  &.hero-light + &.dark::before,
  &.hero-dark + &.dark::before,
  &.hero-light + &.cards-dark::before,
  &.hero-dark + &.cards-dark::before {
    border-color: transparent transparent var(--dark-grey) transparent;
  }
  &.hero-light + &.colored::before,
  &.hero-dark + &.colored::before {
    border-color: transparent transparent var(--light-blue) transparent;
  }

  &.light,
  &.hero-light,
  &.cards-light {
    background-color: var(--light-grey);
    color: var(--text-main);
    & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-main);
    }
  }

  &.dark,
  &.hero-dark,
  &.cards-dark {
    background-color: var(--dark-grey);
    color: var(--text-bright);
    & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-bright);
    }
  }

  &.colored {
    background-color: var(--light-blue);
    color: var(--text-bright);
    & a, & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-bright);
    }
    & a {
      text-decoration: underline;
    }
  }

  &.dark,
  &.hero-light,
  &.hero-dark {
    & > .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  &.cards-light, &.cards-dark {
    & > .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      justify-items: center;
      padding: 2rem 0;
    }
  }
}

@media screen and (max-width: 500px) {
  main.content > section {
    &.hero-light,
    &.hero-dark {
      aspect-ratio: 2000/1000;
      & > .container {
        & h2 {
          font-size: 1.3em;
        }
        & h3 {
          font-size: 1.2em;
        }
        & p {
          font-size: 1rem;
        }
      }
    }

    /* Decrease the size of the triangle */
    &.hero-light + &.light::before,
    &.hero-light + &.dark::before,
    &.hero-light + &.colored::before,
    &.hero-light + &.cards-light::before,
    &.hero-light + &.cards-dark::before,
    &.hero-dark + &.light::before,
    &.hero-dark + &.dark::before,
    &.hero-dark + &.colored::before,
    &.hero-dark + &.cards-light::before,
    &.hero-dark + &.cards-dark::before {
      top: -44px;
      border-width: 22px;
    }
  }
}

@media screen and (max-width: 995px) {
  main.content > section {
    &.dark {
      & > .container {
        justify-content: center;
      }
    }
  }
}

.fact-box {
  border: 1px solid #ccc;
  padding: 0 1rem;
}

.richtext-image {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.richtext-image.full-width,
.richtext-image.fullwidth {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.richtext-image.left {
  float: left;
  padding-bottom: 1rem;
  padding-right: 1rem;
}

.richtext-image.right {
  float: right;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

.circular {
  clip-path: circle();
}

button.button {
  font-weight: bold;
  font-size: 1.2rem;
  font-style: italic;
  &.primary {
    color: var(--text-bright);
    background-color: #41b604;
  }
  &.secondary {
    color: var(--text-bright);
    background-color: var(--light-blue);
  }
  &.circular {
    aspect-ratio: 1/1;
    max-width: 220px;
    background-color: var(--light-blue);
    color: var(--text-bright);
    font-style: italic;
    word-wrap: normal;
  }
  & > p {
    font-size: inherit;
  }
}

.columns {
  display: grid;
  gap: 1rem;

  & > .column {
    display: flex;
    flex-direction: column;
  }
}
.columns-2 {
  grid-template-columns: 2fr 1fr;

  & > .column:last-child {
    align-items: center;
  }

  /* Just a quick hack to center the button in the last column */
  & > .column:last-child:has(button.circular) {
    align-self: center;
  }
}
.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media screen and (max-width: 768px) {
  .columns, .columns-2, .columns-3, .columns-4, .columns-5 {
    grid-template-columns: 1fr;
  }
}

.subpage-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;

  & > li {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    position: relative;
    flex-basis: 100%;
    padding: 1rem;
    border: 1px solid var(--light-grey);
    border-radius: 14px;
    background-color: #fff;

    & h3 {
      color: var(--light-blue) !important;
      margin-top: 0;
    }
    img {
      height: max-content;
    }
    & > *:last-child {
      margin-bottom: 0;
    }
    & a:not(.overlay) {
      font-style: italic;
      font-weight: bold;
    }
    & a.overlay {
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      right:0;
      font-size: inherit;
      font-weight: inherit;
    }
    & a.overlay:hover {
      text-decoration: none;
    }

    /* tweaks for inner page content */
    & main.content > section {
      &.light, &.hero-light {
        background-color: #fff;
      }
      &.light {
        & > .container {
          padding-left: 0;
          padding-right: 0;
        }
      }
      & > .container:first-child {
        & > h1:first-child, & > h2:first-child, & > h3:first-child {
          margin-top: 0;
        }
      }
      &.hero-light + &.light::before,
      &.hero-light + &.dark::before,
      &.hero-light + &.colored::before,
      &.hero-dark + &.light::before,
      &.hero-dark + &.dark::before,
      &.hero-dark + &.colored::before {
        border-color: transparent transparent #fff transparent;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .subpage-menu {
    & > li {
      flex-direction: row;
    }
  }
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  box-sizing: border-box;
  width: 300px;
  min-height: 440px;
  border: 1px solid #cecece;
  border-radius: 14px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 1rem;
  font-style: italic;
  line-height: 1.2;
  text-align: center;

  &.text-left {
    text-align: left;
    align-items: flex-start;
  }
  &.text-right {
    text-align: right;
    align-items: flex-end;
  }

  & h1, & h2, & h3, & h4, & h5, & h6 {
    margin: 0;
  }
  & h2 {
    font-size: 1.3em;
  }
  & h3 {
    font-size: 1.1em;
  }
  & h4 {
    font-size: 1em;
  }
  & > .richtext-image {
    max-height: 160px;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  & > .richtext-image[src$=".svg"] {
    max-height: 80px;
  }
  & p:empty {
    display: none;
  }
  & p {
    font-size: 1rem;
    margin: 0;
  }
  & a {
    font-weight: bold;
    text-decoration: none;
  }
  & a.overlay {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    font-size: inherit;
    font-weight: inherit;
  }
  & a.overlay:hover {
    text-decoration: none;
  }
  & > *:not(.richtext-image):first-child {
    margin-top: 1rem;
  }

  &.light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--text-main) !important;
    & a, & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-main) !important;
    }
  }
  &.dark {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--text-bright) !important;
    & a, & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-bright) !important;
    }
  }
  &.colored {
    background-color: var(--light-blue);
    border-color: var(--light-blue);
    color: var(--text-bright) !important;
    & a, & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--text-bright) !important;
    }
  }
  &.has-background-image {
    border-width: 0;
  }
  & button.button {
    width: 100%;
  }
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;

  & img {
    max-width: 100px;
  }
  & p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  & a {
    font-weight: normal;
    text-decoration: none;
  }
}

#main > footer {
  border: none;
  padding-top: 0;

  & > .container {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;

    & > div p {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
}

@media screen and (max-width: 600px) {
  #main > footer {
    & > .container {
      flex-direction: column;
      align-items: center;
      gap: 1rem;

      & > div p {
        text-align: center;
      }
    }
  }
}

.document-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  box-sizing: border-box;
  width: 200px;
  min-height: 200px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background-color: #fff;
  padding: 1rem;
  margin: 0 2rem 1rem 0;
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  hyphens: auto;

  & a {
    color: var(--text-main);
  }
  & a.overlay {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    font-size: inherit;
    font-weight: inherit;
  }
  & a.overlay:hover {
    text-decoration: none;
  }
  & img {
    max-height: 80px;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .document-card {
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    min-height: auto;
    text-align: left;
    margin: 1rem 0 0 0;

    & img {
      max-height: 60px;
    }
  }
}

form.feedback {
  background-color: #fff;
  padding: 1rem;
  border-radius: 14px;
  & p.error {
    color: red;
  }
}

figure.captioned-image {
  display: flex;
  flex-direction: column;
  margin: 0 auto 1em auto;
  width: auto;
  max-width: 100%;

  & img {
    height: auto;
    margin: 0.3em 0 0.4em 0;
  }
  & figcaption {
    font-size: 1rem;
    line-height: 1.4em;
  }
  & figcaption p {
    display: inline;
    line-height: inherit;
  }
  & figcaption a {
    color: var(--light-blue);
    text-decoration: none;
  }
  & figcaption a:hover {
    color: var(--light-blue);
    text-decoration: underline;
  }
}

@media only screen and (min-width : 500px) {
  figure.captioned-image.left {
    float: left;
    margin-right: 1em;

    & img {
      padding-right: 0;
      padding-bottom: 0;
    }
  }
  figure.captioned-image.right {
    float: right;
    margin-left: 1em;

    & img {
      padding-left: 0;
      padding-bottom: 0;
    }
  }
}

.quote {
  display: flex;
  font-style: italic;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;

  & > div {
    flex-grow: 1;
    background-color: var(--dark-blue);
    color: var(--text-bright);
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 1rem;
    font-weight: bold;
  }

  &.light {
    flex-direction: row-reverse;
    & > div {
      background-color: var(--light-blue);
    }
  }
}

/* Podcast player */
.podcast-player {
  --pp-accent: #0f9fdb;
  --pp-muted: #6a7378;
  --pp-ink: #2b2b2b;
  --pp-track: #e3e6e8;
  --pp-border: #ebedee;

  box-sizing: border-box;
  margin: 1.5rem 0;
  padding: 1.75rem;
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  background: #fff;
  color: var(--pp-ink);
  box-shadow: rgba(20, 40, 60, 0.4) 0 40px 90px -45px;

  & audio {
    display: none;
  }

  & button {
    font-family: inherit;
  }

  & .player-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  & .player-cover {
    flex: 0 0 auto;
  }

  & .player-cover-img,
  & .player-cover-fallback {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 14px;
    object-fit: cover;
  }

  & .player-cover-fallback {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, #16557a, var(--pp-accent));
    color: #fff;
    font-weight: 800;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.1;
    text-align: center;
    hyphens: auto;
  }

  & .player-meta {
    min-width: 0;
  }

  & .player-kicker {
    color: var(--pp-accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }

  & .player-title {
    margin: 0.35rem 0 0.5rem;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 800;
  }

  & .player-sub {
    color: var(--pp-muted);
    font-size: 0.95rem;
  }

  & .player-lead {
    margin: 0.6rem 0 0;
    color: var(--pp-muted);
    font-size: 1rem;
    line-height: 1.5;
  }

  & .player-scrub {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.5rem 0 0.75rem;
  }

  & .player-time {
    flex: 0 0 auto;
    color: var(--pp-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 2.75rem;
    text-align: center;
  }

  & .player-track {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--pp-track);
    cursor: pointer;
    touch-action: none;
  }

  & .player-track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: var(--pp-accent);
  }

  & .player-track-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pp-accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  & .player-track:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 4px;
  }

  & .player-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  & .player-controls-left {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
  }

  & .player-controls-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  & .player-controls-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  & .speed-btn {
    border: 1px solid #d8dde0;
    border-radius: 999px;
    background: none;
    color: var(--pp-ink);
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 3rem;
  }

  & .icon-btn,
  & .icon-sm,
  & .play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--pp-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  & .icon-btn {
    position: relative;
    width: 48px;
    height: 48px;
  }

  & .play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pp-accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px var(--pp-accent);
  }

  & .icon-sm {
    width: 38px;
    height: 38px;
  }

  & .vol {
    width: 90px;
    accent-color: var(--pp-accent);
    cursor: pointer;
  }

  /* Control icons (custom, defined in CSS) */
  & .pp-icon {
    flex: 0 0 auto;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  & .icon-btn .pp-icon {
    width: 32px;
    height: 32px;
  }

  & .play-btn .pp-icon {
    width: 30px;
    height: 30px;
  }

  & .play-btn .pp-icon-play {
    background-position: 56% center;
  }

  & .icon-sm .pp-icon {
    width: 22px;
    height: 22px;
  }

  & .pp-icon-pause,
  &.is-playing .pp-icon-play {
    display: none;
  }

  &.is-playing .pp-icon-pause {
    display: inline-block;
  }

  & .pp-icon-muted,
  &.is-muted .pp-icon-volume {
    display: none;
  }

  &.is-muted .pp-icon-muted {
    display: inline-block;
  }

  & .pp-icon-play {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpolygon%20points%3D%276%204%2020%2012%206%2020%206%204%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  }

  & .pp-icon-pause {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%274%27%20height%3D%2716%27%20rx%3D%271.2%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%274%27%20height%3D%2716%27%20rx%3D%271.2%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  }

  & .pp-icon-rewind {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232b2b2b%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%271%204%201%2010%207%2010%27%2F%3E%3Cpath%20d%3D%27M3.51%2015a9%209%200%201%200%202.13-9.36L1%2010%27%2F%3E%3Ctext%20x%3D%2712%27%20y%3D%2715%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-size%3D%278%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%20fill%3D%27%232b2b2b%27%20stroke%3D%27none%27%3E15%3C%2Ftext%3E%3C%2Fsvg%3E");
  }

  & .pp-icon-forward {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232b2b2b%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2723%204%2023%2010%2017%2010%27%2F%3E%3Cpath%20d%3D%27M20.49%2015a9%209%200%201%201-2.12-9.36L23%2010%27%2F%3E%3Ctext%20x%3D%2712%27%20y%3D%2715%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-size%3D%278%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%20fill%3D%27%232b2b2b%27%20stroke%3D%27none%27%3E15%3C%2Ftext%3E%3C%2Fsvg%3E");
  }

  & .pp-icon-volume {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232b2b2b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%274%209%208%209%2013%205%2013%2019%208%2015%204%2015%204%209%27%20fill%3D%27%232b2b2b%27%2F%3E%3Cpath%20d%3D%27M17%208.5a4.5%204.5%200%200%201%200%207%27%2F%3E%3C%2Fsvg%3E");
  }

  & .pp-icon-muted {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232b2b2b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%274%209%208%209%2013%205%2013%2019%208%2015%204%2015%204%209%27%20fill%3D%27%232b2b2b%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%279%27%20x2%3D%2721%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%279%27%20x2%3D%2716%27%20y2%3D%2714%27%2F%3E%3C%2Fsvg%3E");
  }

  & .player-episodes {
    margin-top: 1.5rem;
    border-top: 1px solid #eceff1;
    padding-top: 1rem;
  }

  & .player-episodes-head {
    color: var(--pp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  & .player-episodes ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & .player-episodes li {
    border-radius: 10px;
  }

  & .player-episodes li.is-active {
    background: rgba(15, 159, 219, 0.08);
  }

  & .ep-btn {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--pp-ink);
    border-radius: 10px;
  }

  & .ep-btn:hover {
    background: rgba(15, 159, 219, 0.06);
  }

  & .ch-time {
    flex: 0 0 auto;
    color: var(--pp-accent);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
  }

  & .ch-label {
    line-height: 1.3;
  }
}

@media screen and (max-width: 640px) {
  .podcast-player {
    padding: 1.25rem;

    & .player-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    & .player-cover-img,
    & .player-cover-fallback {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
    }

    /* Controls don't fit on one row on narrow screens: skip/play/skip get
       their own centered row, speed and volume share the row below. */
    & .player-controls {
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }

    & .player-controls-center {
      order: -1;
      flex: 0 0 100%;
    }

    & .player-controls-left,
    & .player-controls-right {
      min-width: 0;
    }

    & .player-controls-left .speed-btn {
      min-width: auto;
    }

    & .vol {
      width: 64px;
    }

    & .player-time {
      min-width: 2.25rem;
    }
  }
}