/* Compact headings for the archive and author catalog, matching issue titles. */

.catalog-page main { width: auto; }

.catalog-heading {

    margin: 0 0 32px;

    text-align: center;

}

.catalog-heading h1 {

    margin: 0;

    font: 700 3rem/1.25 'Playfair Display', Georgia, serif;

    color: var(--text-main);

}



/* Native controls retain the existing card design. */

.catalog-page [hidden] { display: none !important; }

.catalog-page button.card, .catalog-page button.author-card { font: inherit; color: var(--text-main); width: 100%; }

.catalog-card-label { display: block; font: 700 1.6rem/1.8 'Lora', serif; }

.author-card .catalog-card-label { font-size: 1.5rem; padding: 10px; }

.catalog-page :is(.card,.author-card,.letter-btn,.back-btn,a):focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.catalog-page .letter-btn:disabled { opacity: .45; cursor: wait; }

.publication-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }

.publication-link h3 { margin: 0; padding: 10px; }

.author-card:has(> span.publication-link) { cursor: default; }

#catalog-status { text-align: center; }



/* Keep the full-card link inside the grid cell, including its vertical padding. */

#issues-grid .issue-card { display: flex; height: auto; }

#issues-grid .issue-card > a { flex: 1; box-sizing: border-box; height: auto; }



/* Archive periods use the same two-column layout as the press section. */

.catalog-page #periods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 600px) {

    .catalog-page #periods-grid { gap: 16px; }

    #periods-grid .period-card { min-width: 0; padding: 32px 8px; }

    #periods-grid .catalog-card-label { font-size: clamp(1rem, 4.5vw, 1.6rem); white-space: nowrap; }

}


/* Portrait phones: one column at every level of the two catalogs.
   Landscape retains the existing two-column period grids. */
@media (max-width: 700px) and (orientation: portrait) {
    .catalog-page #archive-navigation .grid-layout,
    .catalog-page #press-navigation .grid-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    #archive-navigation .period-card .catalog-card-label,
    #press-navigation .period-card .catalog-card-label { font-size: 1.6rem; }
}