#header_journals_link {
    color: var(--gold) !important;
}

.journal_list_headers {
    color: var(--gold);
    font-size: small;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--beige2);
}

.journal_list {
    padding: 0;
    margin: 0;
}
.journal_list > li {
    padding: 12.5px 0;
    border-bottom: 1px solid var(--beige3);
}
.journal_list a {
    color: var(--black1);
    text-decoration: none;
}
.journal_list a:hover {
    color: var(--beige4);
}

.journal_list .volume_count_col > span {
    padding-left: 3em;
}

.journal_title_publisher_section > * {
    display: block;
}
.journal_title_publisher_section > a {
    font-size: large;
    font-weight: bold;
}
.journal_title_publisher_section > span {
    font-size: small;
    margin-top: 10px;
}

.format_icons {
    display: flex;
    margin-top: -5px;
}

/* Reflow (WCAG 1.4.10): the three_col_split rule in style.css stacks the rows;
   the column header labels no longer align, so hide them. Lay each journal out
   as a card: title + publisher on top, a tidy meta row (volume left, format
   icons right) below — instead of three orphaned full-width lines. */
@media (max-width: 640px) {
    .journal_list_headers {
        display: none;
    }
    .journal_list > li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 8px;
        padding: 16px 0;
    }
    .journal_list > li > .journal_title_publisher_section {
        grid-column: 1 / -1;
        width: auto !important;
    }
    .journal_list > li > .volume_count_col,
    .journal_list > li > div:last-child {
        width: auto !important;
    }
    .journal_list > li > div:last-child {
        justify-self: end;
    }
    /* Drop the desktop column indent and align the format icons on the row. */
    .journal_list .volume_count_col > span {
        padding-left: 0;
    }
    .journal_list .format_icons {
        margin-top: 0;
        align-items: center;
        gap: 4px;
    }
}