#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 .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;
}

/* Hover colours only where a pointer can hover (see style.css). */
@media (hover: hover) {
    .journal_list a:hover {
        color: var(--beige4);
    }
}

/* Compact layout (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: 960px) {
    .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;
    }
    /* The title is the row's tap target; the publisher line stays readable. */
    .journal_title_publisher_section > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0;
    }
    .journal_title_publisher_section > span {
        font-size: 0.875em;
        margin-top: 0;
    }
}