/* Shared mobile layout: charcoal panels and aged-brass accents. */
.mobile-navigation { display: none; }
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 30; }
.skip-link:focus { top: 1rem; padding: 1rem; background: #d5b777; color: #15130e; }
:where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid #d5b777;
    outline-offset: 3px;
}
@media (max-width: 800px) {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-padding-top: 1rem; }
    body { width: 100%; color: #eee9df; -webkit-text-size-adjust: 100%; }
    body > header {
        background: #242321;
        border-bottom: 1px solid #76613d;
        padding: 1rem max(1rem, env(safe-area-inset-left));
        text-align: left;
    }
    body > header > h1 {
        margin: 0 0 .9rem;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: .025em;
        max-width: 28rem;
    }
    .mobile-navigation { display: block; }
    .mobile-navigation summary {
        min-height: 44px;
        padding: .7rem .9rem;
        background: #161615;
        border: 1px solid #76613d;
        border-radius: 4px;
        color: var(--aw-link);
        cursor: pointer;
        font-size: 1rem;
    }
    .mobile-navigation[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .mobile-navigation nav { padding: .5rem; background: #161615; border: 1px solid #76613d; border-top: 0; }
    .mobile-navigation ul { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0; padding: 0; list-style: none; }
    .mobile-navigation li { margin: 0; }
    .mobile-navigation a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; padding: .6rem; border-radius: 3px;
        background: #2d2c29; color: #f2eee5; text-decoration: none;
    }
    .mobile-navigation a[aria-current="page"] { background: #4b402b; box-shadow: inset 3px 0 #d5b777; }
    main { display: flex; flex-direction: column; gap: 1rem; margin: 1rem .75rem; max-height: none; min-width: 0; }
    main > :is(#navAndFilter, #asideMenu) { display: none; }
    main > :is(.search-and-structure, .structure-detail, .main-container) {
        width: 100%; min-width: 0; margin: 0; padding: 0;
        overflow: visible; border: 0;
    }
    h1, h2, h3, h4, p, li, a, button { overflow-wrap: anywhere; }
    h2 { font-size: 1.3rem; }
    p, li { line-height: 1.6; }
    button, input, select, summary { font: inherit; }
    button, input, select { min-height: 44px; }
    button { touch-action: manipulation; }
    button:disabled { opacity: .45; cursor: default; }
    button:active:not(:disabled) { filter: brightness(1.25); }
    input { font-size: 16px; min-width: 0; } /* Avoid automatic iOS focus zoom. */
    img { max-width: 100%; height: auto; }
    .search-bar-div { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
    .search-bar-div .search-bar {
        flex: 1 1 100%; width: 100%; height: auto; margin: 0;
        padding: .8rem; background: #242424; border: 1px solid #73603e;
    }
    .search-bar-div .search-button { flex: 1 1 0; width: auto; height: auto; margin: 0; padding: .6rem; }
    .keyword-list { flex: 1 1 100%; min-width: 0; padding: 1rem; border: 1px solid #655334; background: #20201e; }
    .structure-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; width: 100%; }
    .structure-container {
        flex: 1 1 100%; width: 100%; min-width: 0; margin: 0 0 .6rem;
        border: 1px solid #484336; border-radius: 5px; overflow: hidden;
        background: #1b1b1a;
    }
    .container-main-info { margin: 0; padding: .85rem; gap: .8rem; align-items: flex-start; }
    .container-main-info img {
        flex: 0 0 80px; width: 80px; height: 80px; object-fit: contain;
        margin: 0; border: 1px solid #494337; background: #111;
    }
    .container-info-grid { flex: 1 1 0; display: block; min-width: 0; width: auto; }
    .container-info-grid h3 { font-size: .98rem; line-height: 1.45; margin: 0 0 .5rem; color: var(--aw-link); }
    .container-main-info p { font-size: .83rem; margin: .15rem 0; color: #c4c1b9; line-height: 1.5; }
    .container-button-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; padding: .75rem; border-bottom: 1px solid #38352d; }
    .container-button-panel button { width: 100%; margin: 0; padding: .6rem .35rem; font-size: .85rem; }
    .container-extra-info { margin: 0; flex-wrap: wrap; padding: .6rem .85rem; gap: .4rem 1rem; color: #bcb7ac; }
    .container-extra-info p { margin: 0; font-size: .8rem; }
    .pagination-button, .pagination-page-button { min-width: 44px; margin: 0; padding: .55rem; border-radius: 4px; }
    .pagination-page-button { color: #eee; background: #292929; }
    .pagination-page-button[aria-current="page"] { background: #b89a60; border-color: #b89a60; color: #15130f; }
    .page-indicator { flex: 1 1 100%; text-align: center; padding: .65rem; color: #c7b386; }
    /* Put the small page-size selector above results and discoveries after them. */
    #page-size-configurator { display: contents; }
    #searchAndStructure { order: 2; }
    #page-size-configurator > .structure-per-page-menu {
        order: 1; width: 100%; margin: 0; padding: .7rem;
        display: flex; flex-wrap: wrap; gap: .35rem; border: 1px solid #484336; border-radius: 4px;
    }
    #page-size-configurator > .structure-per-page-menu h3 {
        flex: 1 1 100%; border: 0; padding: 0; margin: 0 0 .2rem; text-align: left;
        font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #c7b386;
    }
    #page-size-configurator .structure-per-page-option { flex: 1 1 0; width: auto; min-width: 44px; margin: 0; }
    #page-size-configurator > .random-structure-menu { order: 3; width: 100%; margin: 0; padding: .75rem; border: 1px solid #484336; background: #1b1b1a; }
    .random-structure-menu h3 { margin: 0 0 .75rem; padding: 0; border: 0; color: #d5b777; font-size: 1rem; }
    .random-structure-menu .random-structure-div { width: 100%; padding: 0; margin: 0; display: grid; grid-template-columns: 80px 1fr; gap: .75rem; align-items: center; }
    .random-structure-div img { grid-column: 1; grid-row: 1 / 3; width: 80px; height: 80px; object-fit: contain; }
    .random-structure-div p { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
    .random-structure-div button { grid-column: 2; grid-row: 2; margin: 0; }
    /* Structure, author and package pages share the same single-column rhythm. */
    .main-container-segment, .structure-detail-segment { width: 100%; min-width: 0; padding: .75rem 0; }
    .structure-detail-header, .author-banner, .package-banner { gap: .8rem; margin: 0 0 1rem; align-items: center; }
    .structure-detail-header img, .author-banner img, .package-banner img { flex: 0 0 72px; width: 72px; max-height: 90px; object-fit: contain; margin: 0; }
    .structure-detail-header-info { min-width: 0; }
    :is(.structure-detail-header, .author-banner, .package-banner) h1 { font-size: 1.35rem; }
    .structure-detail-header h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
    .structure-detail-header h3 { font-size: .85rem; color: #c7b386; margin: 0; }
    .structure-detail nav, .main-container-segment nav {
        display: flex; justify-content: flex-start; gap: .5rem;
        overflow-x: auto; max-width: 100%; padding: .5rem 0;
        scrollbar-width: thin; scrollbar-color: #8f784a #222;
    }
    .structure-detail nav button, .main-container-segment nav button { flex: 0 0 auto; width: auto; margin: 0; padding: .65rem .85rem; white-space: nowrap; }
    .structure-detail-segment { display: block; }
    .structure-detail-segment ul { padding-left: 1.25rem; }
    .main-container-segment p { margin: .6rem 0; }
    .author-button-panel { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; padding: 0; }
    .author-button-panel button { width: 100%; margin: 0; padding: .85rem; text-align: left; }
    .page-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .page-buttons button { width: auto; margin: 0; padding: .65rem; flex: 1; }
    .page-buttons p { width: auto; margin: 0; font-size: .85rem; }
    .page-input-div { display: flex; flex: 1 1 100%; gap: .5rem; width: 100%; height: auto; margin: 0; padding: .35rem; }
    .page-input-div input { width: 0; flex: 1; padding: .5rem; }
    .page-input-div button { flex: 0 0 4rem; }
    .author-structures, .package-structures { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; margin-top: .75rem; }
    .author-structures .structure-card, .package-structures .structure-card { width: 100%; margin: 0; padding: .6rem; min-width: 0; }
    .structure-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
    .structure-card p { font-size: .8rem; }
    .gallery-wrap { display: grid; grid-template-columns: 1fr; gap: .75rem; }
    .gallery-wrap img { width: 100%; max-width: 100%; max-height: none; height: auto; object-fit: contain; }
    .main-container-segment img { max-width: 100%; }
    #packageStructures ul { padding-left: 1.25rem; }
    #packageStructures li { padding-block: .35rem; }
    #packageStructures a, .social-media-list a { display: inline-block; padding-block: .5rem; color: #d5b777; }
    #asideGeneralMenu { width: 100%; margin: 0; padding: .75rem; border: 1px solid #484336; }
    #asideGeneralMenu:empty { display: none; }
    #asideGeneralMenu > div { width: 100%; margin: 0; padding: 0; }
    #asideGeneralMenu ul { padding-left: 1.25rem; }
    #asideGeneralMenu h3 { font-size: 1rem; border: 0; color: #d5b777; }
    #asideGeneralMenu button { padding: .75rem; }
    .package-card { display: block; width: 100%; max-width: 100%; margin-block: .5rem; }
    footer { padding: 1rem; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
    footer a { color: var(--aw-link); }
    .catalogue-loading { margin: 0; width: 100%; }
}
@media (max-width: 359px) {
    #page-size-configurator .structure-per-page-option { flex-basis: 28%; }
    .container-main-info img { flex-basis: 64px; width: 64px; height: 64px; }
    .container-main-info { padding: .7rem; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }