.jr-site-index {
    padding-block: 24px 42px;
}

.jr-site-index h1 {
    margin: 0 0 20px;
    color: var(--jr-gold, #f5db85);
}

.jr-site-index-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.jr-site-index-group {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--jr-line, #453831);
    border-radius: 8px;
    background: var(--jr-panel, #141111);
    overflow-wrap: anywhere;
}

.jr-site-index-group h2 {
    margin: 0;
    color: var(--jr-gold, #f5db85);
    font-size: 1.17em;
}

.jr-site-index-group ul {
    margin: 8px 0 0;
    padding-inline-start: 1.2em;
}

.jr-site-index-group li {
    margin-block: 6px;
}

.jr-site-index-group a {
    color: var(--jr-gold, #f5db85);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.jr-site-index-group a:hover,
.jr-site-index-group a:focus-visible {
    color: #fff2c5;
}

@media (max-width: 1050px) {
    .jr-site-index-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .jr-site-index-groups { grid-template-columns: minmax(0, 1fr); }
}