*, *::before, *::after {
    box-sizing: border-box;
}

/* scrollbar styling — Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* scrollbar styling — Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

body {
    font-family: sans-serif;
    background: #f5f4f0;
    margin: 0;
    padding: 0;
}

/* navbar */

.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

/* solid state — default for non-hero pages */
.site-brand {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a !important;
    text-decoration: none;
    line-height: 1.3;
}

.site-brand:hover {
    color: #1a1a1a !important;
}

.site-sub {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
}

.navbar .nav-link {
    font-size: 13px;
    color: #888;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #1a1a1a;
    font-weight: 500;
}

/* slides the navbar off the top of the screen once the hero is gone (home page only) */
.site-navbar.nav-hidden {
    transform: translateY(-100%);
}

/* transparent-over-hero state — applied by navbar.js on the home page while the hero is visible */
.site-navbar.nav-transparent {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.site-navbar.nav-transparent .site-brand {
    color: white !important;
}

.site-navbar.nav-transparent .site-sub {
    color: rgba(255, 255, 255, 0.6) !important;
}

.site-navbar.nav-transparent .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.site-navbar.nav-transparent .nav-link:hover,
.site-navbar.nav-transparent .nav-link.active {
    color: white !important;
}

.site-navbar.nav-transparent .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
}

.site-navbar.nav-transparent .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* always-transparent, dark-text state — pages with no hero (location, about) */
/* position: static instead of fixed → scrolls away with the page, never overlaps content */
.site-navbar.nav-flat {
    position: static;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.filter-bar {
    background: white;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
}

.location-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(390px, 100%);
}

.location-search-icon {
    position: absolute;
    left: 13px;
    color: var(--theme-muted, #777);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

.location-search-input {
    width: 100%;
    min-height: 38px;
    padding: 8px 40px 8px 38px;
    color: var(--theme-text, #1a1a1a);
    background: var(--theme-surface, #f7f6f2);
    border: 1px solid var(--theme-border, #cbc8c0);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.location-search-input:focus {
    border-color: var(--theme-accent, #1a1a1a);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.location-search-clear {
    position: absolute;
    right: 11px;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--theme-muted, #666);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 22px;
    cursor: pointer;
}

.location-search-clear:hover { background: rgba(0, 0, 0, 0.07); }

.location-results {
    min-width: 92px;
    margin: 0;
    color: var(--theme-muted, #777);
    font-size: 11px;
    white-space: nowrap;
}

.district-pills {
    display: flex;
    flex: 1 1 420px;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .location-search { width: 100%; }
    .location-results { order: 3; }
    .district-pills { flex-basis: 100%; }
}

.pill {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color, #ddd);
    background: transparent;
    color: var(--color, #888);
    cursor: pointer;
}

.pill:hover {
    border-color: #bbb;
    box-shadow: 3px  3px 3px #dedede,
    -3px -3px 3px #dedede,
    3px -3px 3px #dedede,
    -3px  3px 3px #dedede;

}

.pill.active {
    color: white;
    border-color: var(--color, #1a1a1a);
    background: var(--color, #1a1a1a);
}

.main {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 50px); /* 50px ≈ filter bar height */
}

.map {
    flex: 2;
    min-height: 0; /* lets Leaflet compute height from flex, not content */
}

.card-list {
    width: 300px;
    flex-shrink: 0;
    min-height: 0; /* needed for overflow-y to kick in inside a flex container */
    border-left: 1px solid #ddd;
    background: white;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.card.active {
    border: 2px solid #1a1a1a;
}

.card:hover {
    border-color: #bbb;
}

.label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 4px;
}

h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}

.meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #888;
}

.badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eeedfe;
    color: #3C3489;
    font-weight: 500;
}
.badge.lima { 
    background: #fde8e8; 
    color: #9b1c1c;
}
.badge.miraflores {
    background: #dcfce7;
    color: #166534;
}
.badge.surquillo {
    background: #ffedd5;
    color: #9a3412;
}
.badge.centro-historico {
    background: #fef9c3; 
    color: #854d0e; 
}
.badge.callao {
    background: #dbeafe; 
    color: #1e40af; 
}
.badge.chorrillos { 
    background: #faeeda; 
    color: #633806; 
}  
.badge.barranco { 
    background: #f3e8ff; 
    color: #6b21a8; 
}
.badge.magdalena-del-mar { 
    background: #ccfbf1; 
    color: #0f766e; 
}
.badge.brena { 
    background: #fce7f3; 
    color: #9d174d; 
}
.badge.jesus-maria { 
    background: #e0f2fe; 
    color: #075985; 
}
.badge.pueblo-libre { 
    background: #ecfccb; 
    color: #3f6212; 
}
.badge.san-miguel { 
    background: #ffedd5; 
    color: #9a3412; 
}
.badge.rimac { 
    background: #f1f5f9; 
    color: #334155; 
}
.badge.las-islas { 
    background: #cffafe; 
    color: #164e63; 
}
.badge.san-isidro { 
    background: #fdf4ff; 
    color: #86198f; 
}

hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

.description {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 8px;
}

.detail {
    display: none;
}

.card.open .detail {
    display: block;
}

.access {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
}

.extra {
    display: none;
    margin-top: 8px;
}

.extra.open {
    display: block;
}

.btn-more {
     margin-top: 8px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.btn-more:hover {
    border-color: #bbb;
    color: #444;
}

.btn-evenmore {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
}

.btn-evenmore:hover {
    background: #1a1a1a;
    color: white;
}

.location-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.location-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .location-grid {
        grid-template-columns: 1fr;
    }
}

.back-link {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.back-link:hover {
    color: #1a1a1a;
}

.location-header {
    margin-bottom: 1.5rem;
    background: #e8e5e0;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
}

.location-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    border-radius: 14px;
}

.location-header-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.75rem;
    width: 100%;
}

.location-header h1 {
    font-size: 28px;
    font-weight: 500;
    margin: 6px 0 8px 0;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.location-header .badge,
.location-header .loc-address {
    color: rgba(255,255,255,0.85) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* no-image fallback: dark text on light background */
.location-header.no-image h1 {
    color: #1a1a1a;
    text-shadow: none;
}

.location-header.no-image .badge,
.location-header.no-image .loc-address {
    color: inherit !important;
    text-shadow: none;
}

.location-header.no-image .location-header-overlay {
    display: none;
}

.loc-description {
    transition: opacity 0.2s ease;
    font-size: 15px;
    color: #444;
    line-height: 1.8;
}

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-image: linear-gradient(
        90deg,
        rgba(8, 12, 15, 0.88) 0%,
        rgba(8, 12, 15, 0.7) 48%,
        rgba(8, 12, 15, 0.24) 100%
    ), url('../images/lima-shore.webp');
    background-size: cover;
    background-position: center;
    text-align: left;
    padding: clamp(110px, 14vh, 160px) clamp(24px, 8vw, 120px) clamp(80px, 10vh, 110px);
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    left: clamp(24px, 8vw, 120px);
    right: clamp(24px, 8vw, 120px);
    bottom: 48px;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(780px, 100%);
}

.hero-eyebrow {
    margin: 0 0 18px;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(54px, 7.4vw, 104px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.86;
    margin: 0 0 26px;
    color: white;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.hero h1 span {
    display: inline-block;
    max-width: 780px;
    margin-top: 13px;
    font-family: sans-serif;
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.15;
}

.hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 2px;
    border: 1px solid white;
    background: white;
    color: #161616;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.hero-cta:hover {
    color: white;
    background: transparent;
}

.movies-list {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.movie-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f0f0;
    color: #555;
}

main.about-page {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0 clamp(24px, 7vw, 112px) clamp(72px, 9vw, 132px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-section {
    display: grid;
    grid-template-columns: minmax(210px, var(--golden-minor)) minmax(0, var(--golden-major));
    column-gap: clamp(var(--space-phi-3), 7vw, var(--space-phi-5));
    row-gap: 16px;
    width: 100%;
    padding: clamp(var(--space-phi-3), 5.5vw, var(--space-phi-4)) 0;
    border-top: 1px solid var(--theme-border, #d6d2ca);
}

main.about-page > .about-section:first-child {
    min-height: clamp(400px, 56vh, 620px);
    padding-top: clamp(88px, 12vw, 170px);
    border-top: 0;
    align-content: end;
}

.about-section > h1,
.about-section > h2 {
    grid-column: 1;
    align-self: start;
}

.about-section > :not(h1):not(h2) {
    grid-column: 2;
}

.about-section > p,
.about-section > ul {
    width: 100%;
    max-width: 880px;
    margin-top: 0;
    margin-bottom: 0;
}

.about-section h1 {
    max-width: 520px;
    font-size: clamp(44px, 6.2vw, 88px);
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.055em;
    line-height: 0.96;
}

.about-section h2 {
    max-width: 320px;
    font-size: clamp(15px, 1.45vw, 20px);
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.065em;
    line-height: 1.35;
}

.about-section p {
    font-size: clamp(15px, 1.15vw, 17px);
    color: #444;
    line-height: 1.85;
}

.about-section .doc-list {
    padding-left: 1.2rem;
    color: #444;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.75;
}

.about-section .doc-list li + li {
    margin-top: 0.65rem;
}

/* Extended design documentation */

.doc-design-stack {
    width: 100%;
    max-width: 980px;
}

.doc-design-block {
    margin: 0 0 clamp(36px, 5vw, 58px);
    padding: 0 0 clamp(36px, 5vw, 58px);
    border-bottom: 1px solid var(--museum-rule-light, #e4e1da);
}

.doc-design-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.doc-design-block h3 {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--museum-ink, #181818);
    font-family: var(--museum-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.doc-design-block p {
    max-width: 880px;
    margin: 0 0 1.1rem;
    color: var(--museum-muted, #66625c);
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.8;
}

.doc-design-block p:last-child {
    margin-bottom: 0;
}

.doc-design-block .doc-list {
    max-width: 880px;
    margin: 0 0 1.1rem;
}

.doc-table-wrap {
    width: 100%;
    margin: 24px 0 4px;
    overflow-x: auto;
    border-top: 1px solid var(--museum-ink, #181818);
    border-bottom: 1px solid var(--museum-ink, #181818);
}

.doc-table-wrap:focus-visible {
    outline: 3px solid var(--museum-accent, #8c332b);
    outline-offset: 4px;
}

.doc-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    color: var(--museum-muted, #66625c);
    font-size: 13px;
    line-height: 1.65;
}

.doc-table th,
.doc-table td {
    padding: 15px 16px 15px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--museum-rule-light, #e4e1da);
    text-align: left;
}

.doc-table th {
    color: var(--museum-accent, #8c332b);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.doc-table tbody tr:last-child td {
    border-bottom: 0;
}

.doc-table th:first-child,
.doc-table td:first-child {
    width: 21%;
}

.doc-theme-table th:first-child,
.doc-theme-table td:first-child {
    width: 18%;
}

.credits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 880px;
    margin: 0;
    padding: 0;
}

.credits-list li {
    font-size: 14px;
    color: #444;
    display: flex;
    gap: 12px;
}

.credit-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    min-width: 120px;
    padding-top: 2px;
}

@media (max-width: 820px) {
    main.about-page {
        padding-inline: clamp(20px, 6vw, 48px);
    }

    .about-section {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding-block: clamp(38px, 8vw, 60px);
    }

    main.about-page > .about-section:first-child {
        min-height: auto;
        padding-top: clamp(80px, 18vw, 120px);
    }

    .about-section > h1,
    .about-section > h2,
    .about-section > :not(h1):not(h2) {
        grid-column: 1;
    }

    .about-section h1 {
        max-width: 680px;
        font-size: clamp(42px, 12vw, 70px);
    }

    .about-section h2 { max-width: 620px; }
}

@media (max-width: 520px) {
    .credits-list li {
        flex-direction: column;
        gap: 3px;
    }

    .credit-role {
        min-width: 0;
        padding-top: 0;
    }
}

/* location page */

.loc-address {
    font-size: 12px;
    color: #aaa;
}

.loc-access {
    font-size: 12px;
    color: #aaa;
    margin-top: 12px;
    margin-bottom: 2rem;
}

.films-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #aaa;
    margin-bottom: 12px;
}

.location-films-col {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
}

.loc-films {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 6px;
}

.film-card {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    background: white;
}

.film-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
}

.film-title {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.film-year {
    font-size: 11px;
    color: #aaa;
    margin-right: 8px;
}

.film-genres {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

.film-wiki {
    font-size: 11px;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

.film-wiki:hover {
    color: #1a1a1a;
}

.film-description {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 10px;
}

.film-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #666;
}

.film-meta-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    margin-right: 4px;
}

.no-films {
    font-size: 13px;
    color: #aaa;
    font-style: italic;
}

/* footer */

.site-footer {
    background: white;
    border-top: 1px solid #e5e5e5;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.site-footer-title {
    font-weight: 600;
    color: #1a1a1a;
}

.site-footer-divider {
    color: #ddd;
}

.site-footer-credits {
    font-size: 11px;
}

.site-footer a {
    color: #888;
    text-decoration: none;
}

.site-footer a:hover {
    color: #1a1a1a;
}

/* ── scheda estesa (location.html) ──────────────────────────────────────── */

.loc-scheda {
    margin-top: 2.5rem;
    border-top: 1px solid #e5e5e5;
    padding-top: 1.75rem;
}

.scheda-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #aaa;
    margin-bottom: 14px;
}

.scheda-tab-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.scheda-tab-btn {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.scheda-tab-btn.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.scheda-tab-content {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
}

.scheda-tab-content p {
    margin-bottom: 1rem;
}

.scheda-tab-content a {
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #ccc;
}

.scheda-tab-content ul {
    padding-left: 1.1rem;
}

.scheda-tab-content li {
    margin-bottom: 0.6rem;
    font-size: 13px;
    color: #888;
}

/* ── map popup card ─────────────────────────────────────────────────────────── */

.custom-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border: none;
    width: 160px !important;
}

.custom-popup .leaflet-popup-content {
    margin: 0;
    width: 100% !important;
}

.custom-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.popup-card {
    width: 160px;
}

.popup-img-wrap {
    width: 160px;
    height: 110px;
    overflow: hidden;
}

.popup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup-img-placeholder {
    width: 160px;
    height: 80px;
    background: #ede9e3;
}

.popup-name {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 8px 10px;
    line-height: 1.3;
}

/* ── text grid controls (location.html) ─────────────────────────────────────── */

.difficulty-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.difficulty-label {
    font-size: 11px;
    color: #aaa;
    min-width: 72px;
    text-align: center;
}

.difficulty-btn {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.difficulty-btn:hover:not(:disabled) {
    border-color: #aaa;
    color: #1a1a1a;
}

.difficulty-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.loc-fallback-note {
    font-size: 11px;
    color: #bbb;
    font-style: italic;
    margin-top: -8px;
    margin-bottom: 12px;
    display: none;
}

/* ── Hero intro (index.html) ──────────────────────────────────────────────── */

.hero-sub {
    font-size: 12px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.25rem !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.hero-intro {
    max-width: 690px;
    font-size: 15px !important;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
    margin: 0 0 2rem !important;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.35);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: flex-start;
}

.hero-link {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.hero-link:hover {
    color: white;
    border-color: white;
}

.hero-scroll {
    position: absolute;
    z-index: 1;
    right: clamp(24px, 8vw, 120px);
    bottom: 61px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
}

.hero-scroll:hover { color: white; }

/* ── Home: cinematic itineraries ───────────────────────────────────────── */

.home-itineraries {
    padding: clamp(72px, 9vw, 128px) clamp(24px, 8vw, 120px);
    color: #1a1a1a;
    background: #f5f4f0;
}

.home-section-heading {
    display: grid;
    grid-template-columns: minmax(0, var(--golden-major)) minmax(280px, var(--golden-minor));
    gap: clamp(var(--space-phi-3), 7vw, var(--space-phi-5));
    align-items: end;
    margin-bottom: clamp(var(--space-phi-3), 5vw, var(--space-phi-4));
    padding-bottom: 24px;
    border-bottom: 1px solid #cbc8c0;
}

.section-kicker {
    margin: 0 0 12px;
    color: #8c332b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-section-heading h2,
.locations-heading h2 {
    margin: 0;
    color: #181818;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(34px, 4.2vw, 62px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.home-section-heading > p {
    max-width: 500px;
    margin: 0;
    color: #5e5b55;
    font-size: 14px;
    line-height: 1.75;
}

.itinerary-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
}

.itinerary-preview-card {
    min-width: 0;
    color: inherit;
    background: #fff;
    border: 1px solid #d8d5ce;
    text-decoration: none;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.itinerary-preview-card:hover {
    color: inherit;
    border-color: #8c332b;
    box-shadow: 0 18px 44px rgba(24, 22, 18, 0.11);
    transform: translateY(-7px);
}

.itinerary-preview-image {
    position: relative;
    height: clamp(220px, 27vw, 390px);
    overflow: hidden;
    background: #ddd9d0;
}

.itinerary-preview-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 8, 0.42), transparent 48%);
    pointer-events: none;
}

.itinerary-preview-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.04);
    transition: transform 650ms cubic-bezier(.2,.7,.2,1), filter 350ms ease;
}

.itinerary-preview-card:hover .itinerary-preview-image img {
    filter: saturate(1) contrast(1.02);
    transform: scale(1.045);
}

.itinerary-number {
    position: absolute;
    z-index: 1;
    left: 18px;
    bottom: 15px;
    color: white;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.itinerary-preview-copy { padding: 23px 22px 25px; }

.itinerary-preview-meta {
    min-height: 2.8em;
    margin: 0 0 9px;
    color: #8c332b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.itinerary-preview-copy h3 {
    min-height: 2.45em;
    margin: 0 0 12px;
    color: #1a1a1a;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.itinerary-preview-copy > p:not(.itinerary-preview-meta) {
    min-height: 7em;
    margin: 0 0 20px;
    color: #66625c;
    font-size: 13px;
    line-height: 1.72;
}

.itinerary-preview-link,
.all-narratives-link {
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.itinerary-preview-link {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #e4e1da;
}

.all-narratives-link {
    display: table;
    margin: 38px 0 0 auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #1a1a1a;
    text-decoration: none;
}

.all-narratives-link:hover {
    color: #8c332b;
    border-color: #8c332b;
}

/* ── Home: locations introduction ──────────────────────────────────────── */

.locations-section {
    scroll-margin-top: 64px;
    background: white;
}

.locations-heading {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
    column-gap: clamp(36px, 8vw, 120px);
    padding: clamp(60px, 8vw, 100px) clamp(24px, 8vw, 120px) clamp(34px, 4vw, 52px);
    border-top: 1px solid #dedbd4;
}

.locations-heading .section-kicker,
.locations-heading h2 { grid-column: 1; }

.locations-heading > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 460px;
    margin: 0;
    color: #66625c;
    font-size: 14px;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .home-section-heading,
    .locations-heading { grid-template-columns: 1fr; }

    .home-section-heading > p,
    .locations-heading > p:last-child {
        grid-column: 1;
        grid-row: auto;
        margin-top: 18px;
    }

    .itinerary-preview-grid { grid-template-columns: 1fr; }

    .itinerary-preview-card {
        display: grid;
        grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.1fr);
    }

    .itinerary-preview-image {
        height: 100%;
        min-height: 320px;
    }

    .itinerary-preview-copy h3,
    .itinerary-preview-copy > p:not(.itinerary-preview-meta) { min-height: 0; }
}

@media (max-width: 620px) {
    .hero {
        padding-inline: 22px;
        background-image: linear-gradient(rgba(8, 12, 15, 0.74), rgba(8, 12, 15, 0.72)), url('../images/lima-shore.webp');
    }

    .hero::after,
    .hero-scroll { display: none; }

    .hero h1 { font-size: clamp(48px, 15vw, 68px); }

    .hero-intro {
        font-size: 13px !important;
        line-height: 1.65;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .home-itineraries { padding-inline: 20px; }
    .itinerary-preview-card { display: block; }

    .itinerary-preview-image {
        height: 280px;
        min-height: 0;
    }

    .locations-heading { padding-inline: 20px; }
}

/* ── Narratives page (itineraries.html) ───────────────────────────────────── */

.narrative-page {
    max-width: 780px;
}

.narrative-switcher {
    display: flex;
    gap: 12px;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0;
}

.narrative-tab {
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 0;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.narrative-tab.active {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

.narrative-content {
    display: none;
}

.narrative-content.active {
    display: block;
}

.narrative-subtitle {
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: -8px;
    margin-bottom: 1rem;
}

.narrative-intro h1 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 6px;
}

.chapter-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    margin-bottom: 6px;
}

.narrative-chapter h2 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.chapter-dates {
    font-size: 14px;
    font-weight: 400;
    color: #aaa;
}

.chapter-intro {
    font-size: 14px;
    color: #888;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.narrative-transition {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid #e5e5e5;
    background: #fafaf8;
    border-radius: 0 8px 8px 0;
}

.narrative-transition p {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin: 0;
    font-style: italic;
}

.timeline-entry {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.timeline-year {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    padding-top: 2px;
}

.timeline-location {
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.timeline-location a {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.timeline-location a:hover {
    border-color: #1a1a1a;
}

.timeline-district {
    font-weight: 400;
    color: #aaa;
}

.timeline-body p {
    font-size: 14px;
    color: #444;
    line-height: 1.75;
    margin: 0;
}

.itinerary-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 12px;
    color: #aaa;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ── Previous / Next (location.html) ─────────────────────────────────────── */

.prev-next-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e5e5;
    gap: 1rem;
}

.prev-next-btn {
    font-size: 12px;
    color: #888;
    text-decoration: none;
    max-width: 38%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.prev-next-btn:hover { color: #1a1a1a; }

.prev-next-disabled {
    font-size: 12px;
    color: #ccc;
    max-width: 38%;
}

.prev-next-home {
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
    flex-shrink: 0;
}

.prev-next-home:hover { color: #1a1a1a; }

/* ── Card prev/next (map cards) ───────────────────────────────────────────── */

.card-prev-next {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 4px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
    gap: 8px;
}

.card-nav-btn {
    font-size: 11px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-nav-btn:hover { color: #1a1a1a; }

.card-nav-next { text-align: right; }


/* ── film profile (location.html) ────────────────────────────────────────── */

.film-profile-toggle {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    padding: 8px 0 0;
    margin-top: 10px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color 0.15s;
}

.film-profile-toggle:hover { color: #1a1a1a; }

.film-profile-toggle.open { color: #1a1a1a; }
.film-profile-toggle.open::after { content: ' ↑'; }

.film-profile {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f5f5f5;
}

.film-profile.open { display: block; }

.film-profile-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    margin: 12px 0 4px;
}

.film-profile-text {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

.film-profile-themes {
    font-style: italic;
    color: #888;
}

/* ==========================================================================
   CONTEMPORARY MUSEUM SYSTEM — DEFAULT / “TODAY”
   Shared visual language for the home, narratives, location records and
   information pages. Historical themes are loaded afterwards by navbar.js
   and continue to restyle these components through body[data-era].
   ========================================================================== */

:root {
    --museum-paper: #f5f4f0;
    --museum-surface: #ffffff;
    --museum-ink: #181818;
    --museum-muted: #66625c;
    --museum-accent: #8c332b;
    --museum-rule: #cbc8c0;
    --museum-rule-light: #e4e1da;
    --museum-display: 'Playfair Display', Georgia, serif;
    --golden-major: 1.618fr;
    --golden-minor: 1fr;
    --space-phi-1: 16px;
    --space-phi-2: 26px;
    --space-phi-3: 42px;
    --space-phi-4: 68px;
    --space-phi-5: 110px;
}

body {
    color: var(--museum-ink);
    background: var(--museum-paper);
}

.site-navbar:not(.nav-transparent) {
    background: rgba(245, 244, 240, 0.96) !important;
    border-bottom-color: var(--museum-rule) !important;
}

.navbar .nav-link {
    letter-spacing: 0.035em;
}

.navbar .nav-link.active {
    color: var(--museum-accent);
}

/* Shared map collection components */

.filter-bar {
    padding: 14px clamp(20px, 4vw, 60px);
    background: var(--museum-surface);
    border-color: var(--museum-rule);
}

.card-list {
    width: clamp(300px, 26vw, 390px);
    padding: 18px;
    gap: 14px;
    background: var(--museum-paper);
    border-color: var(--museum-rule);
}

.card {
    padding: 1.35rem 1.4rem;
    background: var(--museum-surface);
    border-color: var(--museum-rule);
    border-radius: 0;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.card:hover,
.card.active {
    border-color: var(--museum-accent);
    box-shadow: 0 12px 30px rgba(24, 22, 18, 0.08);
    transform: translateY(-2px);
}

.card > h2 {
    font-family: var(--museum-display);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.movie-tag {
    border-radius: 0;
    background: #efede7;
}

.btn-more,
.btn-evenmore {
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* About and documentation */

main.about-page {
    background: var(--museum-paper);
}

.about-section {
    border-top-color: var(--museum-rule);
}

.about-section h1 {
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-weight: 800;
}

.about-section h2 {
    color: var(--museum-accent);
}

.about-section p,
.about-section .doc-list,
.credits-list li {
    color: var(--museum-muted);
}

.about-section a {
    color: var(--museum-ink);
    text-decoration-color: var(--museum-accent);
    text-underline-offset: 0.2em;
}

/* Location records */

.location-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 4vw, 54px) clamp(20px, 7vw, 112px) clamp(76px, 9vw, 132px);
}

.back-link {
    margin-bottom: clamp(22px, 3vw, 38px);
    color: var(--museum-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.back-link:hover { color: var(--museum-accent); }

.location-header {
    min-height: clamp(420px, 66svh, 720px);
    margin-bottom: 0;
    border-radius: 0;
    background-position: center;
}

.location-header-overlay {
    border-radius: 0;
    background: linear-gradient(
        to top,
        rgba(8, 10, 12, 0.88) 0%,
        rgba(8, 10, 12, 0.42) 48%,
        rgba(8, 10, 12, 0.08) 78%
    );
}

.location-header-content {
    padding: clamp(30px, 6vw, 82px);
}

.location-header h1 {
    max-width: 980px;
    margin: 0 0 16px;
    font-family: var(--museum-display);
    font-size: clamp(46px, 7vw, 94px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.94;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.42);
}

.location-header .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.location-header.no-image {
    min-height: clamp(320px, 48svh, 520px);
    background: #e8e5df;
    border: 1px solid var(--museum-rule);
}

.location-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(42px, 7vw, 112px);
    padding-top: clamp(54px, 7vw, 96px);
}

.location-main {
    min-width: 0;
}

.location-main > .difficulty-bar {
    display: grid;
    grid-template-columns: 1fr minmax(82px, auto) 1fr;
    gap: 12px;
    margin: 0;
    padding: 13px 0;
    border-top: 1px solid var(--museum-rule);
}

.location-main > .difficulty-bar + .difficulty-bar {
    margin-bottom: clamp(30px, 4vw, 52px);
}

.difficulty-label {
    color: var(--museum-accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.difficulty-btn {
    padding: 5px 0;
    color: var(--museum-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.difficulty-btn:first-child { text-align: left; }
.difficulty-btn:last-child { text-align: right; }
.difficulty-btn:hover:not(:disabled) { color: var(--museum-accent); }

.loc-description {
    max-width: 820px;
    margin-bottom: 1.5rem;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.52;
}

.loc-access {
    padding: 16px 0;
    color: var(--museum-muted);
    border-top: 1px solid var(--museum-rule-light);
    border-bottom: 1px solid var(--museum-rule-light);
    font-size: 11px;
    letter-spacing: 0.055em;
    line-height: 1.65;
    text-transform: uppercase;
}

.loc-scheda {
    margin-top: clamp(46px, 6vw, 76px);
    padding-top: 26px;
    border-top-color: var(--museum-ink);
}

.scheda-heading,
.films-heading {
    color: var(--museum-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.scheda-tab-bar {
    gap: 0;
    border-bottom: 1px solid var(--museum-rule);
}

.scheda-tab-btn {
    margin-bottom: -1px;
    padding: 9px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.scheda-tab-btn.active {
    color: var(--museum-accent);
    background: transparent;
    border-color: var(--museum-accent);
}

.scheda-tab-content {
    max-width: 820px;
    color: var(--museum-muted);
    font-size: 15px;
    line-height: 1.85;
}

.location-films-col {
    top: 32px;
    max-height: calc(100vh - 64px);
}

.films-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--museum-ink);
}

.loc-films {
    flex: 1 1 auto;
    min-height: 0;
    gap: 16px;
    padding-right: 10px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--museum-accent) rgba(24, 22, 18, 0.08);
}

.loc-films::-webkit-scrollbar {
    width: 10px;
}

.loc-films::-webkit-scrollbar-track {
    background: rgba(24, 22, 18, 0.08);
    border-radius: 999px;
}

.loc-films::-webkit-scrollbar-thumb {
    min-height: 44px;
    background: var(--museum-accent);
    border: 2px solid var(--museum-surface);
    border-radius: 999px;
}

.loc-films::-webkit-scrollbar-thumb:hover {
    background: var(--museum-ink);
}

.film-card {
    padding: 1.35rem 1.4rem;
    background: var(--museum-surface);
    border-color: var(--museum-rule);
    border-radius: 0;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.location-film-card {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
}

.location-film-card > .film-title {
    margin: 0 0 14px;
}

.location-film-image {
    position: relative;
    width: 100%;
    height: clamp(84px, 7vw, 100px);
    max-width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
    box-sizing: border-box;
    background: #d8d4cb;
    border: 1px solid var(--museum-rule-light);
}

.location-film-image img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 400ms cubic-bezier(.2, .75, .2, 1), filter 240ms ease;
}

.location-film-card:hover .location-film-image img {
    transform: scale(1.045);
}

.location-film-image-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--museum-muted);
    font-family: var(--museum-display);
    font-size: 18px;
    font-weight: 800;
}

.location-film-image-fallback[hidden] {
    display: none;
}

.location-film-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 12px;
}

.location-film-details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    gap: 4px;
}

.film-card:hover {
    border-color: var(--museum-accent);
    box-shadow: 0 14px 34px rgba(24, 22, 18, 0.08);
    transform: translateY(-3px);
}

.film-title {
    font-family: var(--museum-display);
    font-size: clamp(19px, 1.7vw, 25px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.film-description,
.film-meta {
    color: var(--museum-muted);
}

.film-profile-toggle {
    color: var(--museum-accent);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.prev-next-bar {
    margin-top: clamp(54px, 7vw, 90px);
    border-top-color: var(--museum-rule);
}

/* Narratives and itineraries */

.about-page.narrative-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(20px, 7vw, 112px) clamp(80px, 10vw, 140px);
}

.narrative-page .narrative-switcher {
    position: sticky;
    z-index: 500;
    top: 0;
    display: flex;
    gap: 5px;
    margin: 0 clamp(-112px, -7vw, -20px) clamp(54px, 7vw, 90px);
    padding: 14px clamp(20px, 7vw, 112px);
    overflow-x: auto;
    background: rgba(245, 244, 240, 0.96);
    border-bottom: 1px solid var(--museum-rule);
    scrollbar-width: none;
}

.narrative-page .narrative-switcher::-webkit-scrollbar { display: none; }

.narrative-page .narrative-tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 14px;
    color: var(--museum-muted);
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.narrative-page .narrative-tab:hover {
    color: var(--museum-accent);
    border-color: var(--museum-rule);
}

.narrative-page .narrative-tab.active {
    color: white;
    background: var(--museum-ink);
    border-color: var(--museum-ink);
}

.narrative-page .narrative-content { display: none; }
.narrative-page .narrative-content.active { display: block; }

.narrative-page .itinerary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: clamp(48px, 7vw, 112px);
    align-items: start;
}

.narrative-page .itinerary-text {
    min-width: 0;
    max-width: 880px;
}

.narrative-page .narrative-intro {
    margin: 0 0 clamp(52px, 7vw, 88px);
    padding: clamp(38px, 5vw, 70px) 0 clamp(34px, 4.5vw, 62px);
    border-bottom: 1px solid var(--museum-rule);
}

.narrative-page .narrative-intro h1 {
    max-width: 900px;
    margin: 0 0 20px;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(44px, 6.2vw, 86px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.narrative-page .narrative-subtitle {
    margin: 0 0 22px;
    color: var(--museum-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.narrative-page .narrative-intro > p:not(.narrative-subtitle) {
    max-width: 760px;
    margin: 0;
    color: var(--museum-muted);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.8;
    text-align: left;
}

.narrative-page .itinerary-meta {
    gap: 8px;
    margin-top: 22px;
}

.narrative-page .itinerary-meta span {
    padding: 7px 10px;
    background: var(--museum-surface);
    border: 1px solid var(--museum-rule);
    color: var(--museum-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.narrative-page .itinerary-text > p {
    max-width: 790px;
    margin-bottom: 1.35rem;
    color: var(--museum-muted);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.88;
    text-align: left;
}

.narrative-page .itinerary-text a,
.narrative-page .map-legend a {
    color: var(--museum-ink);
    border-bottom: 1px solid var(--museum-accent);
    text-decoration: none;
}

.narrative-page .loc-photo {
    width: 100%;
    margin: clamp(44px, 6vw, 72px) 0 10px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
    filter: saturate(0.82) contrast(1.04);
}

.narrative-page .loc-photo-caption {
    margin: 0 0 32px;
    color: var(--museum-accent);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-transform: uppercase;
}

.narrative-page .itinerary-map-col {
    position: sticky;
    top: 82px;
    padding-top: clamp(38px, 5vw, 70px);
}

.narrative-page .itinerary-map {
    width: 100%;
    height: min(68vh, 650px);
    min-height: 480px;
    overflow: hidden;
    background: #e4e1da;
    border: 1px solid var(--museum-rule);
    border-radius: 0;
}

.narrative-page .map-legend {
    margin: 0;
    padding: 18px 0;
    color: var(--museum-muted);
    border-bottom: 1px solid var(--museum-rule);
    font-size: 10px;
    letter-spacing: 0.035em;
    line-height: 1.75;
}

.narrative-page .narrative-chapter {
    margin: 0 0 clamp(58px, 7vw, 92px);
    padding: 0 0 clamp(46px, 6vw, 76px);
    border-bottom: 1px solid var(--museum-rule);
}

.narrative-page .chapter-label {
    margin-bottom: 12px;
    color: var(--museum-accent);
    font-size: 9px;
    letter-spacing: 0.16em;
}

.narrative-page .narrative-chapter h2 {
    max-width: 720px;
    margin-bottom: 14px;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(30px, 3.7vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.narrative-page .chapter-dates {
    color: var(--museum-accent);
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.narrative-page .chapter-intro {
    max-width: 720px;
    margin-bottom: 24px;
    color: var(--museum-muted);
    font-size: 15px;
    line-height: 1.78;
}

.narrative-page .timeline-entry {
    grid-template-columns: clamp(62px, 8vw, 100px) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 38px);
    margin: 0;
    padding: 24px 0;
    border-bottom-color: var(--museum-rule-light);
}

.narrative-page .timeline-year {
    color: var(--museum-accent);
    font-family: var(--museum-display);
    font-size: clamp(24px, 2.7vw, 38px);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.narrative-page .timeline-location {
    color: var(--museum-muted);
    font-size: 10px;
    letter-spacing: 0.09em;
}

.narrative-page .timeline-body p {
    color: var(--museum-muted);
    font-size: 15px;
    line-height: 1.78;
}

.narrative-page .narrative-transition {
    margin: clamp(42px, 6vw, 72px) 0;
    padding: clamp(24px, 3vw, 38px);
    background: #eeeae3;
    border: 0;
    border-left: 5px solid var(--museum-accent);
    border-radius: 0;
}

.narrative-page .narrative-transition p {
    color: #4e4a45;
    font-family: var(--museum-display);
    font-size: clamp(17px, 1.6vw, 22px);
    font-style: italic;
    line-height: 1.6;
}

.narrative-page .num-marker {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    background: var(--museum-accent);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Shared footer */

.site-footer {
    padding: 34px clamp(20px, 7vw, 112px);
    gap: 10px;
    color: rgba(255, 255, 255, 0.72);
    background: var(--museum-ink);
    border-top: 0;
}

.site-footer-inner,
.site-footer-title,
.site-footer a {
    color: inherit;
}

.site-footer-title { color: white; }
.site-footer-divider { color: rgba(255, 255, 255, 0.28); }
.site-footer a { border-bottom: 1px solid rgba(255, 255, 255, 0.32); }
.site-footer a:hover { color: white; }

@media (max-width: 980px) {
    .narrative-page .itinerary-grid {
        grid-template-columns: 1fr;
    }

    .narrative-page .itinerary-text {
        max-width: none;
    }

    .narrative-page .itinerary-map-col {
        position: static !important;
        padding-top: 0;
    }

    .narrative-page .itinerary-map {
        height: 520px;
        min-height: 0;
    }

    .location-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        gap: 42px;
    }
}

@media (max-width: 760px) {
    .location-page {
        padding-inline: 20px;
    }

    .location-header {
        min-height: 460px;
    }

    .location-header-content {
        padding: 26px 22px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .location-films-col {
        position: static;
        max-height: none;
    }

    .loc-films { overflow: visible; }

    .narrative-page .narrative-switcher {
        margin-bottom: 38px;
    }

    .narrative-page .narrative-intro {
        padding-top: 24px;
    }
}

@media (max-width: 520px) {
    .card-list { width: min(86vw, 330px); }

    .location-header {
        min-height: 400px;
    }

    .location-header h1 {
        font-size: clamp(40px, 13vw, 60px);
    }

    .location-main > .difficulty-bar {
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
    }

    .difficulty-btn {
        font-size: 9px;
        letter-spacing: 0.025em;
    }

    .narrative-page .itinerary-map {
        height: 400px;
    }

    .narrative-page .timeline-entry {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 14px;
    }
}

/* ===========================================================================
   FILM COLLECTION — films.html
   ========================================================================== */

.film-collection-page {
    min-height: 100vh;
    color: var(--museum-ink);
    background: var(--museum-paper);
}

.film-collection-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(40px, 7vw, 120px);
    min-height: clamp(620px, 82svh, 900px);
    padding: clamp(76px, 9vw, 130px) clamp(24px, 7vw, 112px) clamp(72px, 8vw, 120px);
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--museum-rule);
}

.film-collection-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.film-collection-hero h1 {
    max-width: 680px;
    margin: 0;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(58px, 8vw, 122px);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 0.84;
}

.film-collection-lead {
    max-width: 650px;
    margin: clamp(26px, 4vw, 46px) 0 0;
    color: var(--museum-muted);
    font-size: clamp(16px, 1.4vw, 21px);
    line-height: 1.72;
}

.film-collection-summary {
    margin: 24px 0 0;
    color: var(--museum-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.film-collection-jump {
    display: inline-flex;
    gap: 24px;
    align-items: center;
    margin-top: 38px;
    padding-bottom: 8px;
    color: var(--museum-ink);
    border-bottom: 1px solid var(--museum-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
}

.film-collection-jump:hover {
    color: var(--museum-accent);
    border-color: var(--museum-accent);
}

.film-collection-collage {
    position: relative;
    min-height: clamp(430px, 59vw, 680px);
}

.film-collage-frame {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #dedbd3;
    box-shadow: 0 28px 70px rgba(30, 27, 22, 0.15);
}

.film-collage-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-collage-frame-main {
    inset: 7% 8% 9% 13%;
    z-index: 1;
}

.film-collage-frame-top {
    top: 0;
    right: 0;
    z-index: 2;
    width: 34%;
    height: 35%;
    border: 9px solid var(--museum-paper);
}

.film-collage-frame-bottom {
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 42%;
    height: 34%;
    border: 9px solid var(--museum-paper);
}

.film-catalogue {
    padding: clamp(72px, 9vw, 132px) clamp(24px, 7vw, 112px) clamp(90px, 11vw, 160px);
}

.film-catalogue-heading {
    display: grid;
    grid-template-columns: minmax(0, var(--golden-major)) minmax(280px, var(--golden-minor));
    gap: clamp(var(--space-phi-3), 7vw, var(--space-phi-5));
    align-items: end;
    padding-bottom: clamp(var(--space-phi-2), 4vw, var(--space-phi-3));
    border-bottom: 1px solid var(--museum-rule);
}

.film-catalogue-heading h2 {
    max-width: 820px;
    margin: 0;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(46px, 6.3vw, 90px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.94;
}

.film-catalogue-heading > p {
    max-width: 600px;
    margin: 0;
    color: var(--museum-muted);
    font-size: 15px;
    line-height: 1.8;
}

.film-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.28fr) minmax(150px, 0.28fr) auto;
    gap: 16px;
    align-items: end;
    padding: 30px 0;
    border-bottom: 1px solid var(--museum-rule-light);
}

.film-search-field,
.film-select-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.film-controls label {
    color: var(--museum-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.film-controls input,
.film-controls select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    color: var(--museum-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--museum-ink);
    border-radius: 0;
    font: inherit;
    font-size: 14px;
    outline: 0;
}

.film-controls input:focus,
.film-controls select:focus {
    border-color: var(--museum-accent);
    box-shadow: 0 2px 0 var(--museum-accent);
}

.film-clear-filters {
    min-height: 46px;
    padding: 10px 18px;
    color: var(--museum-ink);
    background: transparent;
    border: 1px solid var(--museum-ink);
    border-radius: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.film-clear-filters:hover:not(:disabled) {
    color: white;
    background: var(--museum-ink);
}

.film-clear-filters:disabled {
    opacity: 0.34;
    cursor: default;
}

.film-results-line {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 21px 0 28px;
}

.film-results-line p {
    margin: 0;
    color: var(--museum-muted);
    font-size: 11px;
    line-height: 1.6;
}

.film-results-line p:first-child {
    color: var(--museum-accent);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.film-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
}

.film-card.film-collection-card {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--museum-rule);
    border-radius: 0;
    background: var(--museum-surface);
}

.film-card-open {
    display: grid;
    width: 100%;
    height: 100%;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.film-card-open:focus-visible {
    outline: 3px solid var(--museum-accent);
    outline-offset: -3px;
}

.film-card-visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #d8d4cb;
}

.film-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.2, .75, .2, 1), filter 240ms ease;
}

.film-collection-card:hover .film-card-visual img {
    transform: scale(1.035);
}

.film-card-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(24, 24, 24, 0.54);
    background:
        linear-gradient(135deg, transparent 48%, rgba(24, 24, 24, 0.1) 49% 51%, transparent 52%),
        #ddd9cf;
    font-family: var(--museum-display);
    font-size: clamp(38px, 5vw, 74px);
    font-weight: 900;
}

.film-card-fallback[hidden],
.film-dialog-fallback[hidden] {
    display: none;
}

.film-card-index {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 7px 11px;
    color: white;
    background: rgba(20, 20, 20, 0.86);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.film-card-copy {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: clamp(20px, 2.3vw, 30px);
}

.film-card-meta {
    min-height: 2.7em;
    margin: 0 0 13px;
    color: var(--museum-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.film-collection-card .film-title {
    margin: 0;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(24px, 2.1vw, 35px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.film-collection-card .film-description {
    display: -webkit-box;
    margin: 19px 0 0;
    overflow: hidden;
    color: var(--museum-muted);
    font-size: 13px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.film-card-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.film-genre-tag {
    padding: 5px 7px;
    color: var(--museum-muted);
    background: #efede7;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.film-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
    color: var(--museum-muted);
    border-top: 1px solid var(--museum-rule-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.film-card-arrow { color: var(--museum-accent); }

.film-empty-state {
    margin: 0;
    padding: 80px 20px;
    color: var(--museum-muted);
    border-block: 1px solid var(--museum-rule);
    font-family: var(--museum-display);
    font-size: clamp(25px, 4vw, 50px);
    text-align: center;
}

body.film-dialog-open { overflow: hidden; }

.film-dialog {
    width: min(1180px, calc(100vw - 40px));
    max-width: none;
    height: min(840px, calc(100svh - 40px));
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: auto;
    color: var(--museum-ink);
    background: var(--museum-paper);
    border: 1px solid var(--museum-ink);
    border-radius: 0;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.32);
}

.film-dialog::backdrop {
    background: rgba(14, 14, 14, 0.72);
    backdrop-filter: blur(6px);
}

.film-dialog-close {
    position: sticky;
    top: 18px;
    z-index: 5;
    float: right;
    display: grid;
    width: 42px;
    height: 42px;
    margin: 18px 18px -60px 0;
    padding: 0;
    place-items: center;
    color: white;
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.film-dialog-close:hover { background: var(--museum-accent); }

.film-dialog-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
    min-height: 100%;
}

.film-dialog-visual {
    position: sticky;
    top: 0;
    height: min(838px, calc(100svh - 42px));
    overflow: hidden;
    background: #d8d4cb;
}

.film-dialog-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-dialog-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(24, 24, 24, 0.54);
    background:
        linear-gradient(135deg, transparent 48%, rgba(24, 24, 24, 0.1) 49% 51%, transparent 52%),
        #ddd9cf;
    font-family: var(--museum-display);
    font-size: clamp(70px, 10vw, 150px);
    font-weight: 900;
}

.film-dialog-record {
    padding: clamp(48px, 6vw, 88px) clamp(30px, 5vw, 74px) 80px;
}

.film-dialog-title {
    margin: 0;
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: clamp(42px, 5.6vw, 78px);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.94;
}

.film-dialog-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin: 34px 0 0;
}

.film-dialog-fact {
    padding: 14px 0;
    border-top: 1px solid var(--museum-rule);
}

.film-dialog-label {
    margin: 0 0 5px;
    color: var(--museum-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.film-dialog-value {
    margin: 0;
    color: var(--museum-muted);
    font-size: 12px;
    line-height: 1.55;
}

.film-dialog-section {
    margin-top: 42px;
    padding-top: 17px;
    border-top: 1px solid var(--museum-ink);
}

.film-dialog-section-title {
    margin: 0 0 14px;
    color: var(--museum-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.film-dialog-text {
    margin: 0;
    color: var(--museum-muted);
    font-size: 15px;
    line-height: 1.85;
}

.film-dialog-location-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.film-dialog-location-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--museum-rule-light);
}

.film-dialog-location-link {
    color: var(--museum-ink);
    font-family: var(--museum-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    text-decoration-color: var(--museum-accent);
    text-underline-offset: 0.18em;
}

.film-dialog-location-link:hover { color: var(--museum-accent); }

.film-dialog-location-district {
    color: var(--museum-muted);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.film-dialog-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.film-dialog-gallery-grid figure {
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    background: #ddd9cf;
}

.film-dialog-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-dialog-external {
    display: inline-block;
    margin-top: 42px;
    padding-bottom: 7px;
    color: var(--museum-ink);
    border-bottom: 1px solid var(--museum-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
}

.film-dialog-external:hover {
    color: var(--museum-accent);
    border-color: var(--museum-accent);
}

@media (max-width: 1100px) {
    .film-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .film-controls { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 0.36fr)); }
    .film-clear-filters { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 900px) {
    .film-collection-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: clamp(70px, 13vw, 110px);
    }

    .film-collection-collage { min-height: clamp(390px, 74vw, 620px); }
    .film-catalogue-heading { grid-template-columns: 1fr; align-items: start; }
    .film-dialog-layout { grid-template-columns: 1fr; }
    .film-dialog-visual { position: relative; height: min(58svh, 560px); }
}

@media (max-width: 680px) {
    .film-collage-frame-main { inset-inline: 5%; }
    .film-collage-frame-top { width: 40%; }
    .film-collage-frame-bottom { width: 46%; }
    .film-controls { grid-template-columns: 1fr; }
    .film-clear-filters { grid-column: auto; justify-self: stretch; }
    .film-results-line { flex-direction: column; gap: 8px; }
    .film-collection-grid { grid-template-columns: 1fr; }
    .film-card-copy { min-height: 300px; }
    .film-dialog { width: calc(100vw - 18px); height: calc(100svh - 18px); }
    .film-dialog-facts,
    .film-dialog-location-list { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
    .film-collection-hero,
    .film-catalogue { padding-inline: 20px; }
    .film-collection-collage { min-height: 330px; }
    .film-collage-frame-top,
    .film-collage-frame-bottom { border-width: 5px; }
    .film-dialog-record { padding-inline: 23px; }
}

/* Prevent long introductory titles from entering the text column. */
main.about-page > .about-section:first-child {
    grid-template-columns: minmax(520px, 0.95fr) minmax(320px, 1.05fr);
    column-gap: clamp(42px, 5vw, 90px);
}

main.about-page > .about-section:first-child h1 {
    max-width: none;
    font-size: clamp(54px, 5.4vw, 82px);
}

@media (max-width: 1250px) {
    main.about-page > .about-section:first-child {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }

    main.about-page > .about-section:first-child > h1,
    main.about-page > .about-section:first-child > :not(h1):not(h2) {
        grid-column: 1;
    }
}