h1.title, .title.h1 {
    font-size: 300%;
}
blockquote {
  color: black;
  border-left: 3px solid #FFCB05; 
  padding: 0.5em 10px;
}
.blockquote {
  font-size: 125%;
}
.boxred {
  color: black;
  border-left: 5px solid red; 
  padding: 0.5em 10px;
}
.boxgreen {
  color: black;
  border-left: 5px solid green; 
  padding: 0.5em 10px;
}
.firstbox {
  color: black;
  background-color: white;
}
.sticky-col {
  margin-left: 10px;
  margin-right: 30px;
}
.sticky-col-stack {
    container-name: sticks;
    container-type: size;
}
.html-widget {
    width: 100cqw !important;
    height: 100cqh !important;
}

@media screen and (min-width: 575px) { 
  .narrative {
    font-size: 125%;
  }
}
@media only screen and (max-width: 575px) {
  .narrative {
    .citation { 
      a {color: cyan;}
  }
  .footnote-ref {color: cyan;}
  .boxgreen {background-color: white;}
 }
}

.story-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 30px;
    color: darkgrey;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: storyScrollBounce 2s ease-in-out infinite;
  }

  @keyframes storyScrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}