@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
#r8_content p {
  font-family: "Karla", sans-serif;
}

#r8_content h1 {font-family: 'Playfair Display';font-weight:500;}
#r8_content h2 {font-family: 'Playfair Display';font-weight:500;}
#r8_content h3 {font-family: 'Playfair Display';font-weight:500;}


.diagram{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:2rem 1rem;
}

.diagram-svg{
    display:block;
    width:100%;
    height:auto;
}

.diagram-caption{
    margin-top:1rem;
    text-align:center;
    color:#475056;
    font-size:14px;
    line-height:1.5;
}

.jh-hover-box {
    display: block;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px 15px; 
    text-decoration: none !important;
    transition: all 0.25s ease;
min-height: 0px;
 margin-bottom: 10px; 
}
  .jh-hover-box:hover {background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);}