.cc-brand img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  object-position: center;
}

.footer-brand img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 600px) {
  .cc-brand img {
    width: 66px;
    height: 66px;
  }
}

.cc-header nav a {
  padding: .48rem .72rem;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.cc-header nav a:hover,
.cc-header nav a:focus-visible,
.cc-header nav a.is-active {
  color: #fff;
  background: var(--rose-dark);
  box-shadow: 0 6px 16px rgba(169, 80, 63, .18);
}

.cc-header nav a:focus-visible {
  outline: 3px solid rgba(200, 120, 107, .3);
  outline-offset: 2px;
}

.story-link {
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.story-link:hover,
.story-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rose);
  box-shadow: 0 14px 30px rgba(169, 80, 63, .12);
}

.story-link:focus-visible {
  outline: 3px solid rgba(200, 120, 107, .25);
  outline-offset: 3px;
}

.story-link strong {
  display: inline-block;
  margin-top: .65rem;
  color: var(--rose-dark);
  font-size: .88rem;
}

@media (max-width: 600px) {
  .hero-art {
    min-height: 330px;
    margin-top: .75rem;
  }

  .poster-crop {
    border-radius: 42% 42% 1.4rem 1.4rem;
  }

  .poster-crop img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    height: auto;
    max-width: none;
    object-fit: initial;
    object-position: initial;
    transform: translate(-56%, -47%);
  }

  .floating-note {
    right: .75rem;
    bottom: 1rem;
    width: 94px;
    height: 94px;
    padding: .4rem;
  }

  .floating-note strong {
    font-size: .92rem;
    line-height: 1.05;
  }

  .floating-note span {
    font-size: .67rem;
  }
}