a { text-decoration: none; }
#hero {
  padding-block: 0;
  margin-top: calc(var(--nav-height) + 1rem);
  font-size: clamp(1rem, 1.25vw + .7rem, 1.125rem);
  a {
    display: block;
    padding: 3rem clamp(2rem, 13vw - 1.5rem, 4rem) 2.5rem;
    margin-inline: clamp(-2rem, 12vw - 6rem, 0rem);
    position: relative;
    color: white;
    background-color: #0E202E;
    border-radius: 0 0 .75rem .75rem;
    border-radius: clamp(0rem, 12vw - 4rem, .75rem);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: background-color .15s;
    &:hover {
      background-color: #1D3C53;
      .title { text-decoration: underline; }
    }
    .topic, time, .read-time, .author-title { color: #7F8798; }
    time { margin-inline-end: 2ch; }
    .topic { margin-inline-end: 1ch; }
    .read-time { float: right; }
    .title {
      font-weight: 700;
      font-size: clamp(2rem, 5vw + .75rem, 3rem);
      line-height: 1.375;
      color: inherit;
    }
    .author { margin-top: 2em; }
    .author-title { margin-inline-start: 1ch; }
    &::before {
      content: "";
      display: block;
      height: 10px;
      position: absolute;
      inset: 0 0 auto 0;
      background: linear-gradient(to right,
        #40C3FF,
        #11FF7C,
        #FFCA75,
        #EA28FF
      );
    }
  }
  header {
    padding: 2rem 0 3rem;
    text-align: center;
    h1 {
      margin: 0;
      font-weight: 700;
      font-size: 3rem;
    }
    p {
      margin: 1rem 0 0;
    }
  }
  @media(width < 40rem){
    .read-time { display: none; }
  }
}
#featured {
  padding-block-start: 0;
  margin-block-start: 4rem;
  columns: auto clamp(20rem, 50vw - 4rem, 30rem);
  gap: 4rem;
  column-rule: 1px solid #CED6DD;
  a {
    display: block;
    padding: 1.5rem clamp(0rem, 20vw - 4.4, 2rem);
    border-radius: .5rem;
    break-inside: avoid;
    break-after: always;
    color: black;
    transition: background-color .15s;
    &:not(:first-child){ margin-block-start: 2rem; }
    &:hover .title { text-decoration: underline; }
  }
  .topic, time, .author-title { color: #626E89; }
  time { float: right; }
  .title {
    margin-block: 1rem 0;
    font-weight: 600;
    font-size: 1.5rem;
  }
  .author {
    margin: 0;
    font-weight: 500;
    .author-title { margin-inline-start: 1ch; }
  }
}

#explore {
  display: grid;
  grid: auto / minmax(18rem, 1fr) 2fr;
  gap: 4rem;
  padding-block-start: 2rem;
  #search-bar {
    grid-column: 1 / -1;
    input {
      display: block;
      padding: 1rem 6rem 1rem 2rem;
      margin: 0 auto;
      width: min(30rem, 90%);
      font-size: 1.125rem;
      border: 2px solid #D8DCE3;
      border-radius: .5rem;
      background: calc(100% - 1rem) 50% / 2rem 2rem no-repeat url("data:image/svg+xml,\
        %3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E \
          %3Cpath d='M14 14L10.5 10.5M3 7A1 1 0 0 0 12 7A1 1 0 0 0 3 7' \
            stroke='%23626E89' fill='none'/%3E \
        %3C/svg%3E \
      ");
      transition: border-color .2s;
      outline: none;
      &:focus-within { border-color: #626E89; }
      &::placeholder { color: #626E89; }
    }
  }
  #topic-filter {
    place-self: start;
    display: flex;
    flex-flow: row wrap;
    padding: 2rem;
    margin-inline: clamp(-2rem, 50vw - 12rem, 0rem);
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
    background: #F0F5F9;
    border-radius: clamp(0rem, 50vw - 10rem, .75rem);
    button {
      flex: 1 1 18rem;
      padding: .5rem 1rem;
      color: #626E89;
      background: none;
      border: none;
      font-weight: 500;
      font-size: 1.125rem;
      font-family: inherit;
      text-align: start;
      cursor: pointer;
      transition: color .15s;
      &[aria-current=true]{ color: black; }
      &:hover { color: black; }
    }
  }
  #list {
    display: flex;
    flex-flow: column;
    list-style: none;
    padding: 0;
    margin: 0 clamp(-2rem, 50vw - 12rem, 0rem);
    transition: opacity .2s;
    li {
      border-bottom: 1px solid #CED6DD;
    }
    li:where(.irrelevant, .filtered-out){ display: none; }
    a {
      display: block;
      padding: 1rem 1.5rem;
      margin: 1rem .5rem;
      color: #626E89;
      &:hover .title { text-decoration: underline; }
    }
    .topic {
      margin-inline-start: 1ch;
    }
    .title {
      margin: 1rem 0 0;
      font-size: clamp(1.25rem, 2.5vw - .125rem, 1.5rem);
      font-weight: 600;
      color: black;
    }
    li:not(.irrelevant):not(.filtered-out) ~ .no-results {
      display: none;
    }
    .no-results {
      color: #626E89;
      border: none;
      font-size: 1.125rem;
      padding: 2.25rem 0;
    }
  }
  &.loading #list {
    opacity: .3;
    transition: opacity .2s .1s;
  }
  @media(width < 48rem){
    grid: auto / 100%;
    #topic-filter {
      position: static;
    }
  }
}

.footer-cta {
  background-image: url("/-/layouts/story/footer-cta.svg?v=foCz13wWWc");
  color: white;
  a {
    padding: .875rem 1.5rem;
    border-radius: .5rem;
  }
  a:first-child {
    color: black;
    background: white;
    border: 2px solid white;
  }
  a:last-child {
    color: white;
    background: none;
    border: 2px solid #FFF8;
    transition: border-color .2s;
    &:hover {
      border-color: white;
      text-decoration: none;
    }
  }
}