:root {
    --era-bg: #ececec;
    --era-surface: #ffffff;
    --era-surface-alt: #f4f4f4;
    --era-ink: #1a1a1a;
    --era-muted: #666666;
    --era-accent: #003399;
    --era-accent-2: #ffcc00;
    --era-border: #9d9d9d;
    --era-border-strong: #1a1a1a;
    --era-font-body: Verdana, Geneva, Tahoma, sans-serif;
    --era-font-display: Verdana, Geneva, Tahoma, sans-serif;
    --era-font-ui: Verdana, Geneva, Tahoma, sans-serif;
    --era-card-radius: 2px;
    --era-control-radius: 2px;
    --era-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    --era-image-filter: none;
    --era-map-filter: none;
    --era-bg-image: none;
    --era-rule-style: solid;
    --era-transition: 240ms ease;

    /* The selector uses the original names for backwards compatibility. */
    --theme-bg: var(--era-bg);
    --theme-surface: var(--era-surface);
    --theme-text: var(--era-ink);
    --theme-muted: var(--era-muted);
    --theme-accent: var(--era-accent);
    --theme-border: var(--era-border);
    --theme-radius: var(--era-control-radius);
}

html[data-era],
body[data-era] {
    min-height: 100%;
    background-color: var(--era-bg);
}

body[data-era] {
    color: var(--era-ink);
    font-family: var(--era-font-body);
    background-image: var(--era-bg-image);
    background-attachment: fixed;
    transition: background-color var(--era-transition), color var(--era-transition);
}

body[data-era] ::selection {
    color: var(--era-surface);
    background: var(--era-accent);
}

body[data-era] :where(h1, h2, h3, h4, .site-brand, .film-title, .popup-name) {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] :where(
    .description,
    .loc-description,
    .about-section p,
    .film-description,
    .film-meta,
    .scheda-tab-content,
    .timeline-body p,
    .itinerary-text p
) {
    color: var(--era-ink);
}

body[data-era] :where(
    .label,
    .meta,
    .access,
    .loc-address,
    .loc-access,
    .films-heading,
    .film-year,
    .film-genres,
    .film-meta-label,
    .film-profile-label,
    .film-profile-themes,
    .scheda-heading,
    .difficulty-label,
    .chapter-label,
    .chapter-dates,
    .timeline-location,
    .timeline-district,
    .itinerary-meta,
    .map-legend,
    .loc-photo-caption,
    .site-sub
) {
    color: var(--era-muted);
}

body[data-era] :where(
    .site-navbar:not(.nav-transparent),
    .filter-bar,
    .card-list,
    .card,
    .film-card,
    .site-footer,
    .narrative-transition,
    .custom-popup .leaflet-popup-content-wrapper,
    .leaflet-control-zoom a,
    .leaflet-control-layers
) {
    background-color: var(--era-surface);
    border-color: var(--era-border);
}

body[data-era] .site-navbar:not(.nav-transparent) {
    background-color: var(--era-surface) !important;
    border-bottom: 1px var(--era-rule-style) var(--era-border) !important;
}

body[data-era] .site-navbar.nav-flat {
    background-color: transparent !important;
}

body[data-era] .site-brand,
body[data-era] .site-brand:hover,
body[data-era] .site-footer-title {
    color: var(--era-ink) !important;
}

body[data-era] .navbar .nav-link,
body[data-era] .site-footer,
body[data-era] .site-footer a {
    color: var(--era-muted);
}

body[data-era] .navbar .nav-link:hover,
body[data-era] .navbar .nav-link.active,
body[data-era] .site-footer a:hover {
    color: var(--era-accent);
}

body[data-era] .navbar .nav-link.active {
    text-decoration-color: var(--era-accent);
    text-underline-offset: 0.35em;
}

body[data-era] .filter-bar,
body[data-era] .card-list,
body[data-era] .site-footer,
body[data-era] :where(.loc-scheda, .prev-next-bar, .card-prev-next, .film-profile-toggle) {
    border-color: var(--era-border);
}

body[data-era] :where(.card, .film-card, .location-header, .itinerary-map, .loc-photo) {
    border-radius: var(--era-card-radius);
}

body[data-era] :where(.card, .film-card) {
    color: var(--era-ink);
    background: var(--era-surface);
    border-color: var(--era-border);
    box-shadow: var(--era-shadow);
    transition:
        transform var(--era-transition),
        box-shadow var(--era-transition),
        border-color var(--era-transition),
        background-color var(--era-transition);
}

body[data-era] .card:hover,
body[data-era] .film-card:hover {
    border-color: var(--era-accent);
}

body[data-era] .card.active {
    border-color: var(--era-accent);
    outline: 1px solid var(--era-accent);
    outline-offset: -4px;
}

body[data-era] :where(
    .pill,
    .btn-more,
    .btn-evenmore,
    .difficulty-btn,
    .scheda-tab-btn,
    .hero-cta,
    .narrative-tab
) {
    border-radius: var(--era-control-radius);
    font-family: var(--era-font-ui);
    transition:
        color var(--era-transition),
        background-color var(--era-transition),
        border-color var(--era-transition),
        box-shadow var(--era-transition),
        transform var(--era-transition);
}

body[data-era] :where(.btn-more, .difficulty-btn, .scheda-tab-btn) {
    color: var(--era-muted);
    background: var(--era-surface);
    border-color: var(--era-border);
}

body[data-era] :where(.btn-evenmore, .hero-cta, .scheda-tab-btn.active) {
    color: var(--era-surface);
    background: var(--era-accent);
    border-color: var(--era-accent);
}

body[data-era] :where(.btn-more, .btn-evenmore, .difficulty-btn, .scheda-tab-btn):hover:not(:disabled) {
    color: var(--era-surface);
    background: var(--era-accent);
    border-color: var(--era-accent);
}

body[data-era] :where(.back-link, .film-wiki, .scheda-tab-content a, .prev-next-btn, .prev-next-home, .timeline-location a, .itinerary-text a, .map-legend a) {
    color: var(--era-accent);
    text-decoration-color: color-mix(in srgb, var(--era-accent) 48%, transparent);
}

body[data-era] :where(.narrative-switcher, .narrative-chapter, .timeline-entry) {
    border-color: var(--era-border);
}

body[data-era] .narrative-tab {
    color: var(--era-muted);
}

body[data-era] .narrative-tab.active {
    color: var(--era-accent);
    border-bottom-color: var(--era-accent);
}

body[data-era] .narrative-transition {
    color: var(--era-ink);
    border-left-color: var(--era-accent);
    border-radius: 0 var(--era-card-radius) var(--era-card-radius) 0;
}

body[data-era] .narrative-transition p {
    color: var(--era-ink);
}

body[data-era] .num-marker {
    color: var(--era-surface);
    background: var(--era-accent) !important;
    border-color: var(--era-surface);
}

body[data-era] :where(.movie-tag, .badge) {
    border-radius: var(--era-control-radius);
}

body[data-era] :where(.loc-photo, .popup-img) {
    filter: var(--era-image-filter);
    transition: filter var(--era-transition), transform var(--era-transition);
}

body[data-era] .leaflet-tile-pane {
    filter: var(--era-map-filter);
    transition: filter 350ms ease;
}

body[data-era] .leaflet-container {
    color: var(--era-ink);
    font-family: var(--era-font-ui);
    background: var(--era-surface-alt);
}

body[data-era] .custom-popup .leaflet-popup-content-wrapper {
    color: var(--era-ink);
    border: 1px solid var(--era-border);
    border-radius: var(--era-card-radius);
    box-shadow: var(--era-shadow);
}

body[data-era] .leaflet-popup-tip {
    background: var(--era-surface);
}

body[data-era] .popup-name {
    color: var(--era-ink);
    background: var(--era-surface);
}

/* Home additions inherit the selected editorial era without changing content. */
body[data-era] :where(.home-itineraries, .locations-section) {
    color: var(--era-ink);
    background-color: var(--era-bg);
    background-image: var(--era-bg-image);
}

body[data-era] :where(.home-section-heading, .locations-heading) {
    border-color: var(--era-border);
}

body[data-era] :where(.home-section-heading h2, .locations-heading h2, .itinerary-preview-copy h3) {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] :where(.home-section-heading > p, .locations-heading > p:last-child, .itinerary-preview-copy > p:not(.itinerary-preview-meta)) {
    color: var(--era-muted);
}

body[data-era] :where(.section-kicker, .itinerary-preview-meta) {
    color: var(--era-accent);
    font-family: var(--era-font-ui);
}

body[data-era] .itinerary-preview-card {
    color: var(--era-ink);
    background: var(--era-surface);
    border-color: var(--era-border);
    border-radius: var(--era-card-radius);
    box-shadow: var(--era-shadow);
}

body[data-era] .itinerary-preview-card:hover {
    color: var(--era-ink);
    border-color: var(--era-accent);
}

body[data-era] .itinerary-preview-image {
    background: var(--era-surface-alt);
    border-radius: var(--era-card-radius) var(--era-card-radius) 0 0;
}

body[data-era] .itinerary-preview-image img {
    filter: var(--era-image-filter);
}

body[data-era] :where(.itinerary-preview-link, .all-narratives-link) {
    color: var(--era-accent);
    border-color: var(--era-border);
    font-family: var(--era-font-ui);
}

/* =========================================================
   SELECTOR PANEL
   ========================================================= */

.theme-panel {
    position: fixed;
    right: auto;
    top: 50%;
    bottom: auto;
    left: 0;
    z-index: 2200;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--era-ink);
    font-family: var(--era-font-ui);
    transform: translateY(-50%);
}

.theme-panel.dragging {
    user-select: none;
}

.theme-tab {
    width: 46px;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 13px 9px;
    color: var(--era-ink);
    background: var(--era-surface);
    border: 1px solid var(--era-border);
    border-left: 0;
    border-radius: 0 68% 68% 0 / 0 52% 52% 0;
    box-shadow: var(--era-shadow);
    cursor: grab;
    font-family: var(--era-font-ui);
    writing-mode: vertical-rl;
    transform: none;
    touch-action: none;
    transition:
        transform var(--era-transition),
        color var(--era-transition),
        background-color var(--era-transition),
        border-color var(--era-transition);
    animation: theme-droplet-breathe 5s ease-in-out infinite;
}

.theme-panel[data-side='right'] {
    flex-direction: row-reverse;
}

.theme-panel[data-side='right'] .theme-tab {
    border-right: 0;
    border-left: 1px solid var(--era-border);
    border-radius: 68% 0 0 68% / 52% 0 0 52%;
}

.theme-panel[data-side='right'] .theme-content {
    margin-right: 8px;
    margin-left: 0;
    transform-origin: right center;
}

.theme-tab:active {
    cursor: grabbing;
}

.theme-tab:hover,
.theme-tab:focus-visible {
    color: var(--era-accent);
    transform: translateX(2px);
    outline: 2px solid var(--era-accent);
    outline-offset: -4px;
}

.theme-tab-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.theme-current-period {
    display: none;
}

.theme-content {
    width: min(390px, calc(100vw - 36px));
    max-height: min(730px, calc(100vh - 150px));
    overflow: auto;
    color: var(--era-ink);
    background: var(--era-surface);
    border: 1px solid var(--era-border);
    border-radius: var(--era-card-radius);
    box-shadow: var(--era-shadow);
    margin-top: 0;
    margin-left: 8px;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: left center;
    transition:
        max-height 300ms ease,
        width 280ms ease,
        opacity 180ms ease,
        transform 280ms ease,
        margin 280ms ease,
        background-color var(--era-transition),
        border-color var(--era-transition);
}

.theme-panel:not(.open) .theme-content {
    height: 0;
    max-height: 0;
    overflow: hidden;
    width: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px) scale(0.97);
    border-width: 0;
    box-shadow: none;
}

.theme-panel[data-side='right']:not(.open) .theme-content {
    transform: translateX(12px) scale(0.97);
}

@keyframes theme-droplet-breathe {
    0%, 100% { border-radius: 0 68% 68% 0 / 0 52% 52% 0; }
    50% { border-radius: 0 58% 74% 0 / 0 62% 46% 0; }
}

.theme-panel[data-side='right'] .theme-tab {
    animation-name: theme-droplet-breathe-right;
}

@keyframes theme-droplet-breathe-right {
    0%, 100% { border-radius: 68% 0 0 68% / 52% 0 0 52%; }
    50% { border-radius: 58% 0 0 74% / 62% 0 0 46%; }
}

.theme-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 20px 16px;
    border-bottom: 1px var(--era-rule-style) var(--era-border);
    cursor: grab;
    touch-action: none;
}

.theme-header:active {
    cursor: grabbing;
}

.theme-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--era-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.theme-title {
    margin: 0;
    color: var(--era-ink);
    font-family: var(--era-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
}

.theme-header-actions {
    display: flex;
    gap: 5px;
}

.theme-close,
.theme-reset {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--era-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--era-control-radius);
    cursor: pointer;
    font-family: var(--era-font-ui);
    font-size: 17px;
    line-height: 1;
}

.theme-close:hover,
.theme-reset:hover,
.theme-close:focus-visible,
.theme-reset:focus-visible {
    color: var(--era-accent);
    border-color: var(--era-border);
    outline: none;
}

.theme-introduction {
    margin: 0;
    padding: 14px 20px;
    color: var(--era-muted);
    background: var(--era-surface-alt);
    border-bottom: 1px var(--era-rule-style) var(--era-border);
    font-size: 11px;
    line-height: 1.55;
}

.theme-options {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.theme-option {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: start;
    gap: 11px;
    padding: 13px 11px;
    color: var(--era-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--era-control-radius) + 2px);
    cursor: pointer;
    font-family: var(--era-font-ui);
    text-align: left;
    transition:
        color var(--era-transition),
        background-color var(--era-transition),
        border-color var(--era-transition),
        transform var(--era-transition);
}

.theme-option:hover,
.theme-option:focus-visible {
    background: var(--era-surface-alt);
    border-color: var(--era-border);
    outline: none;
}

.theme-option.active {
    color: var(--era-ink);
    background: color-mix(in srgb, var(--era-accent) 10%, var(--era-surface));
    border-color: var(--era-accent);
}

.theme-option-preview {
    width: 30px;
    height: 42px;
    display: flex;
    overflow: hidden;
    background: var(--era-surface-alt);
    border: 1px solid color-mix(in srgb, var(--era-ink) 28%, transparent);
    border-radius: max(0px, calc(var(--era-control-radius) - 2px));
}

.theme-swatch {
    flex: 1;
    background: var(--swatch);
}

.theme-option-copy,
.theme-option-topline {
    min-width: 0;
    display: block;
}

.theme-option-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.theme-option-period {
    color: var(--era-accent);
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.theme-option-type {
    overflow: hidden;
    color: var(--era-muted);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.theme-option-title {
    display: block;
    color: var(--era-ink);
    font-family: var(--era-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.theme-option-description {
    display: block;
    margin-top: 3px;
    color: var(--era-muted);
    font-size: 9px;
    line-height: 1.45;
}

.theme-option-check {
    color: var(--era-accent);
    font-size: 12px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--era-transition), transform var(--era-transition);
}

.theme-option.active .theme-option-check {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   1500–1800 — THE PRINTED FOLIO
   ========================================================= */

body[data-era='early-print'] {
    --era-bg: #e7d19a;
    --era-surface: #f6e8bf;
    --era-surface-alt: #ead7a5;
    --era-ink: #3b2918;
    --era-muted: #745a35;
    --era-accent: #70451f;
    --era-accent-2: #bf922f;
    --era-border: #967442;
    --era-border-strong: #4a321c;
    --era-font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --era-font-display: 'Baskerville', 'Palatino Linotype', Palatino, Georgia, serif;
    --era-font-ui: 'Trebuchet MS', Georgia, serif;
    --era-card-radius: 0;
    --era-control-radius: 0;
    --era-shadow: none;
    --era-image-filter: sepia(0.48) saturate(0.76) contrast(1.08);
    --era-map-filter: sepia(0.38) saturate(0.68) hue-rotate(-8deg) contrast(1.48) brightness(0.9);
    --era-rule-style: double;
    --era-bg-image:
        repeating-linear-gradient(0deg, rgba(62, 41, 21, 0.032) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
        radial-gradient(circle at 12% 18%, rgba(191, 146, 47, 0.13), transparent 27%),
        radial-gradient(circle at 86% 70%, rgba(112, 69, 31, 0.1), transparent 30%);
}

body[data-era='early-print'] :where(.site-navbar:not(.nav-transparent), .filter-bar, .card-list, .site-footer) {
    background-color: var(--era-surface);
    background-image:
        repeating-linear-gradient(0deg, rgba(59, 41, 24, 0.028) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 38%);
}

body[data-era='early-print'] .site-brand {
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.015em;
}

body[data-era='early-print'] .site-sub,
body[data-era='early-print'] :where(.label, .films-heading, .scheda-heading, .chapter-label, .timeline-location) {
    font-family: var(--era-font-ui);
    font-variant: small-caps;
    letter-spacing: 0.12em;
    text-transform: lowercase;
}

body[data-era='early-print'] :where(.navbar .nav-link, .narrative-tab) {
    font-variant: small-caps;
    letter-spacing: 0.08em;
}

body[data-era='early-print'] :where(.card, .film-card, .narrative-transition) {
    background-color: var(--era-surface);
    background-image:
        repeating-linear-gradient(0deg, rgba(52, 36, 27, 0.025) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.24), transparent 34%);
    border: 3px double var(--era-border);
}

body[data-era='early-print'] .card.active {
    outline: 1px solid var(--era-accent);
    outline-offset: -7px;
}

body[data-era='early-print'] :where(.about-section > p:first-of-type, .narrative-intro + p, .loc-description)::first-letter {
    float: left;
    margin: 0.02em 0.1em 0 0;
    color: var(--era-accent);
    font-family: var(--era-font-display);
    font-size: 3.25em;
    font-weight: 700;
    line-height: 0.82;
}

body[data-era='early-print'] :where(.about-section h1, .narrative-intro h1)::after {
    content: '❦';
    display: block;
    margin-top: 0.35rem;
    color: var(--era-accent);
    font-size: 17px;
    letter-spacing: 0;
}

body[data-era='early-print'] .hero {
    background-image:
        linear-gradient(rgba(63, 39, 16, 0.48), rgba(45, 28, 14, 0.67)),
        url('../images/lima-shore.webp');
    background-blend-mode: multiply;
}

body[data-era='early-print'] .hero h1 {
    font-family: var(--era-font-display);
    font-size: clamp(44px, 7vw, 78px);
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

body[data-era='early-print'] :where(.pill, .btn-more, .btn-evenmore, .difficulty-btn, .scheda-tab-btn, .hero-cta) {
    border-width: 2px;
    border-style: double;
}

body[data-era='early-print'] .loc-photo {
    border: 5px double var(--era-border);
    padding: 4px;
    background: var(--era-surface);
}

body[data-era='early-print'] :where(.map, .itinerary-map, .leaflet-container) {
    position: relative;
    overflow: hidden;
    background: #e5d4a8;
    border: 6px double #49321d;
    box-shadow:
        inset 0 0 0 2px rgba(246, 230, 185, 0.58),
        inset 0 0 24px rgba(67, 43, 22, 0.18),
        0 4px 0 rgba(62, 42, 22, 0.16);
}

/*
 * IMPORTANT:
 * Do not filter Leaflet's transformed tile pane. Chromium can render it white.
 * The old-map treatment is applied to individual tiles instead.
 */
body[data-era='early-print'] .leaflet-tile-pane {
    filter: none !important;
    opacity: 1 !important;
}

/*
 * Early-print uses the stronger standard OSM raster layer in map.js.
 * Keep the tiles readable: dark brown linework, pale paper, visible coastlines.
 */
body[data-era='early-print'] .leaflet-tile {
    opacity: 1 !important;
    filter:
        grayscale(0.62)
        sepia(0.82)
        saturate(0.72)
        hue-rotate(-8deg)
        brightness(0.90)
        contrast(1.48) !important;
    mix-blend-mode: normal !important;
}

/*
 * A very light paper wash. It must never cover the cartography.
 */
body[data-era='early-print'] .leaflet-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 450;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            7deg,
            rgba(72, 49, 27, 0.014) 0 1px,
            transparent 1px 5px
        ),
        radial-gradient(
            ellipse at 18% 22%,
            rgba(244, 224, 174, 0.10),
            transparent 36%
        ),
        radial-gradient(
            ellipse at 82% 76%,
            rgba(111, 72, 35, 0.055),
            transparent 42%
        ),
        radial-gradient(
            ellipse at center,
            transparent 70%,
            rgba(72, 47, 24, 0.045) 88%,
            rgba(47, 29, 15, 0.11) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(65, 43, 23, 0.52),
        inset 0 0 0 6px rgba(229, 204, 147, 0.10);
}

/* Route lines should read like hand-drawn ink. */
body[data-era='early-print'] .leaflet-overlay-pane path {
    stroke: #61351f;
    stroke-width: 2.6;
    stroke-dasharray: none;
    opacity: 0.88;
    filter: drop-shadow(0 1px 0 rgba(241, 222, 176, 0.38));
}

body[data-era='early-print'] :where(
    .leaflet-marker-pane,
    .leaflet-shadow-pane,
    .leaflet-popup-pane
) {
    filter: sepia(0.16) contrast(1.04);
}

body[data-era='early-print'] .num-marker {
    color: #f1dfac;
    background: #6d3a27 !important;
    border: 2px double #ead19a;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #49301d,
        1px 2px 0 rgba(47, 30, 17, 0.24);
    font-family: var(--era-font-display);
}

body[data-era='early-print'] .leaflet-marker-icon > div:not(.num-marker) {
    background: #6d3d29 !important;
    border: 2px solid #e4cc96 !important;
    box-shadow:
        0 0 0 1px #49301d,
        1px 2px 0 rgba(47, 30, 17, 0.22) !important;
}

body[data-era='early-print'] .custom-popup .leaflet-popup-content-wrapper {
    background-color: #ead6a3;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(58, 38, 19, 0.025) 0 1px,
            transparent 1px 5px
        );
    border: 3px double #4a321c;
    border-radius: 0;
    box-shadow: 2px 3px 0 rgba(53, 35, 20, 0.16);
}

body[data-era='early-print'] .leaflet-popup-tip {
    background: #ead6a3;
}

body[data-era='early-print'] .leaflet-control-attribution {
    color: var(--era-ink);
    background: rgba(229, 207, 157, 0.94);
    border-top: 1px solid rgba(74, 50, 28, 0.52);
    font-family: var(--era-font-display);
    font-style: italic;
}

body[data-era='early-print'] .leaflet-control-zoom a {
    color: var(--era-ink);
    background: #dfc88e;
    border-color: #5b3a20;
    border-radius: 0 !important;
    font-family: var(--era-font-display);
    font-weight: 700;
}

body[data-era='early-print'] .leaflet-control-zoom a:hover {
    color: #f3dfab;
    background: #654027;
}

body[data-era='early-print'] .theme-content,
body[data-era='early-print'] .theme-tab {
    border-style: double;
    border-width: 3px;
    background-image: repeating-linear-gradient(0deg, rgba(52, 36, 27, 0.025) 0 1px, transparent 1px 5px);
}

/* =========================================================
   FIRST HALF XX CENTURY — THE DAILY NEWSPAPER
   ========================================================= */

body[data-era='modern-print'] {
    --era-bg: #d8d2c4;
    --era-surface: #f2eee3;
    --era-surface-alt: #e5dfd1;
    --era-ink: #181714;
    --era-muted: #5e5a51;
    --era-accent: #8d211b;
    --era-accent-2: #242321;
    --era-border: #777167;
    --era-border-strong: #181714;
    --era-font-body: Georgia, 'Times New Roman', serif;
    --era-font-display: Georgia, 'Times New Roman', serif;
    --era-font-ui: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --era-card-radius: 0;
    --era-control-radius: 0;
    --era-shadow: 0 2px 0 rgba(24, 23, 20, 0.16);
    --era-image-filter: grayscale(0.9) contrast(1.12) sepia(0.08);
    --era-map-filter: grayscale(0.82) sepia(0.1) contrast(1.12);
    --era-bg-image:
        repeating-linear-gradient(0deg, rgba(24, 23, 20, 0.025) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 15% 20%, rgba(141, 33, 27, 0.035), transparent 26rem);
}

body[data-era='modern-print'] :where(h1, h2, h3, .site-brand, .film-title) {
    font-weight: 700;
    letter-spacing: -0.025em;
}

body[data-era='modern-print'] :where(.about-section h1, .narrative-intro h1, .hero h1) {
    text-transform: none;
    border-top: 4px double var(--era-ink);
    border-bottom: 1px solid var(--era-ink);
    padding-block: 0.16em;
}

body[data-era='modern-print'] :where(.label, .site-sub, .films-heading, .scheda-heading, .chapter-label, .timeline-location, .theme-kicker) {
    font-family: var(--era-font-ui);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-era='modern-print'] .navbar .nav-link.active {
    color: var(--era-accent);
    background: transparent;
    border-bottom: 3px solid var(--era-accent);
}

body[data-era='modern-print'] .navbar .nav-link {
    margin-left: 2px;
    padding-inline: 8px;
    text-transform: uppercase;
}

body[data-era='modern-print'] :where(.card, .film-card) {
    border: 0;
    border-top: 3px double var(--era-border-strong);
    border-bottom: 1px solid var(--era-border);
    background-image: repeating-linear-gradient(0deg, rgba(24, 23, 20, 0.018) 0 1px, transparent 1px 4px);
}

body[data-era='modern-print'] :where(.card, .film-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(24, 23, 20, 0.14);
}

body[data-era='modern-print'] .card.active {
    outline: 2px solid var(--era-accent);
}

body[data-era='modern-print'] .hero {
    align-items: center;
    padding-inline: clamp(24px, 8vw, 120px);
    text-align: center;
    background-image:
        linear-gradient(rgba(24, 23, 20, 0.72), rgba(24, 23, 20, 0.8)),
        url('../images/lima-shore.webp');
}

body[data-era='modern-print'] .hero h1 {
    max-width: 940px;
    font-family: var(--era-font-display);
    font-size: clamp(44px, 7vw, 92px);
    line-height: 0.94;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

body[data-era='modern-print'] .hero-intro {
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
}

body[data-era='modern-print'] .hero-actions {
    justify-content: center;
}

body[data-era='modern-print'] .hero-cta {
    color: var(--era-surface);
    background: var(--era-accent);
    border: 1px solid var(--era-surface);
    box-shadow: none;
    text-transform: uppercase;
}

body[data-era='modern-print'] :where(.narrative-chapter, .about-section) {
    border-top: 4px double var(--era-ink);
    border-left: 0;
    padding-top: 18px;
    padding-left: 0;
}

body[data-era='modern-print'] .timeline-year {
    color: var(--era-accent);
    font-family: var(--era-font-display);
    font-style: italic;
    font-size: 22px;
}

body[data-era='modern-print'] .theme-option.active {
    box-shadow: inset 6px 0 0 var(--era-accent);
}

/* =========================================================
   SECOND HALF XX CENTURY — THE POSTMODERN MAGAZINE
   ========================================================= */

body[data-era='editorial-print'] {
    --era-bg: #ddd9cf;
    --era-surface: #fffdf4;
    --era-surface-alt: #e9e5db;
    --era-ink: #151521;
    --era-muted: #5f5b68;
    --era-accent: #d51e75;
    --era-accent-2: #008e9b;
    --era-border: #151521;
    --era-border-strong: #d51e75;
    --era-font-body: Arial, Helvetica, sans-serif;
    --era-font-display: 'Arial Black', Impact, Arial, sans-serif;
    --era-font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --era-card-radius: 0;
    --era-control-radius: 0;
    --era-shadow: 7px 7px 0 rgba(0, 142, 155, 0.28);
    --era-image-filter: saturate(1.15) contrast(1.08);
    --era-map-filter: saturate(0.9) contrast(1.08);
    --era-bg-image:
        linear-gradient(135deg, transparent 0 76%, rgba(213, 30, 117, 0.06) 76% 86%, transparent 86%),
        repeating-linear-gradient(90deg, rgba(21, 21, 33, 0.018) 0 1px, transparent 1px 8px);
}

body[data-era='editorial-print'] :where(.site-sub, .navbar .nav-link, .label, .meta, .films-heading, .scheda-heading, .chapter-label, .timeline-location, .itinerary-meta) {
    font-family: var(--era-font-ui);
}

body[data-era='editorial-print'] :where(.about-section h1, .narrative-intro h1, .location-header h1) {
    font-size: clamp(34px, 5vw, 56px);
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.88;
    text-transform: uppercase;
}

body[data-era='editorial-print'] :where(.about-section h2, .narrative-chapter h2, .films-heading, .scheda-heading) {
    color: var(--era-accent-2);
    text-transform: uppercase;
}

body[data-era='editorial-print'] :where(.card, .film-card) {
    border: 2px solid var(--era-ink);
    border-top: 6px solid var(--era-accent);
    box-shadow: 4px 4px 0 rgba(0, 142, 155, 0.34);
}

body[data-era='editorial-print'] .card:nth-child(3n + 2),
body[data-era='editorial-print'] .film-card:nth-child(3n + 2) {
    border-top-color: var(--era-accent-2);
    box-shadow: 4px 4px 0 rgba(213, 30, 117, 0.3);
}

body[data-era='editorial-print'] .card:nth-child(3n),
body[data-era='editorial-print'] .film-card:nth-child(3n) {
    border-top-color: #e5b600;
}

body[data-era='editorial-print'] .hero {
    background-image:
        linear-gradient(115deg, rgba(213, 30, 117, 0.78) 0 36%, rgba(0, 142, 155, 0.62) 36% 62%, rgba(21, 21, 33, 0.38) 62%),
        url('../images/lima-shore.webp');
}

body[data-era='editorial-print'] .hero h1 {
    max-width: 820px;
    padding-bottom: 16px;
    border-bottom: 9px solid #f2cb18;
    font-family: var(--era-font-display);
    font-size: clamp(46px, 7vw, 78px);
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 0.92;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(0, 142, 155, 0.72);
}

body[data-era='editorial-print'] .about-section > p:first-of-type,
body[data-era='editorial-print'] .chapter-intro {
    font-size: 1.08rem;
    line-height: 1.65;
}

body[data-era='editorial-print'] .narrative-transition {
    border-left: 0;
    border: 2px solid var(--era-ink);
    border-left: 12px solid var(--era-accent);
    box-shadow: 7px 7px 0 rgba(0, 142, 155, 0.3);
}

body[data-era='editorial-print'] .timeline-year {
    color: var(--era-accent);
    font-family: var(--era-font-display);
    font-style: normal;
    font-weight: 900;
}

body[data-era='editorial-print'] .loc-photo {
    border: 4px solid var(--era-ink);
    box-shadow: 8px 8px 0 var(--era-accent-2);
}

body[data-era='editorial-print'] .theme-content {
    border-top: 8px solid var(--era-accent);
    box-shadow: 7px 7px 0 rgba(0, 142, 155, 0.35);
}

body[data-era='editorial-print'] :where(.hero-cta, .btn-more, .btn-evenmore, .difficulty-btn, .scheda-tab-btn) {
    border: 2px solid var(--era-ink);
    box-shadow: 3px 3px 0 var(--era-ink);
    font-weight: 800;
    text-transform: uppercase;
}

/* =========================================================
   2000–2010 — THE WEB PORTAL
   ========================================================= */

body[data-era='early-web'] {
    --era-bg: #dcdcdc;
    --era-surface: #ffffff;
    --era-surface-alt: #eeeeee;
    --era-ink: #222222;
    --era-muted: #666666;
    --era-accent: #003399;
    --era-accent-2: #ffcc00;
    --era-border: #8d8d8d;
    --era-border-strong: #003399;
    --era-font-body: Verdana, Geneva, Tahoma, sans-serif;
    --era-font-display: 'Trebuchet MS', Verdana, Arial, sans-serif;
    --era-font-ui: Verdana, Geneva, Tahoma, sans-serif;
    --era-card-radius: 2px;
    --era-control-radius: 2px;
    --era-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    --era-image-filter: saturate(0.9) contrast(1.03);
    --era-map-filter: saturate(0.9) contrast(1.02);
    --era-bg-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 8px 8px;
}

body[data-era='early-web'] .site-navbar:not(.nav-transparent) {
    background: linear-gradient(#ffffff, #dedede) !important;
    border-bottom: 2px solid #777777 !important;
}

body[data-era='early-web'] .site-brand {
    color: #003399 !important;
    font-family: var(--era-font-display);
}

body[data-era='early-web'] .navbar .nav-link {
    color: #003399;
    text-decoration: underline;
}

body[data-era='early-web'] .navbar .nav-link.active {
    color: #ffffff;
    background: #003399;
    text-decoration: none;
}

body[data-era='early-web'] :where(.back-link, .film-wiki, .scheda-tab-content a, .prev-next-btn, .prev-next-home, .timeline-location a, .itinerary-text a, .map-legend a) {
    color: #0000cc;
    text-decoration: underline;
}

body[data-era='early-web'] :where(.card, .film-card, .narrative-transition) {
    border: 1px solid #777777;
}

body[data-era='early-web'] :where(.card h2, .film-title, .narrative-chapter h2) {
    color: #003399;
}

body[data-era='early-web'] :where(.pill, .btn-more, .btn-evenmore, .difficulty-btn, .scheda-tab-btn, .hero-cta) {
    border: 1px solid;
    border-color: #ffffff #555555 #555555 #ffffff;
    box-shadow: inset 1px 1px 0 #fefefe, inset -1px -1px 0 #999999;
}

body[data-era='early-web'] :where(.pill, .btn-more, .difficulty-btn, .scheda-tab-btn) {
    background: linear-gradient(#ffffff, #d1d1d1);
}

body[data-era='early-web'] :where(.pill, .btn-more, .btn-evenmore, .difficulty-btn, .scheda-tab-btn):active {
    border-color: #555555 #ffffff #ffffff #555555;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.45);
    transform: translate(1px, 1px);
}

body[data-era='early-web'] .hero {
    background-image:
        linear-gradient(rgba(0, 30, 86, 0.7), rgba(0, 30, 86, 0.83)),
        url('../images/lima-shore.webp');
}

body[data-era='early-web'] .hero h1 {
    font-family: var(--era-font-display);
    font-size: clamp(40px, 6vw, 68px);
    text-shadow: 2px 2px 0 #001f66;
}

body[data-era='early-web'] .filter-bar {
    background: linear-gradient(#fefefe, #d7d7d7);
    border-bottom: 2px solid #777777;
}

body[data-era='early-web'] .theme-content {
    border: 2px outset #d4d0c8;
}

body[data-era='early-web'] .theme-header {
    color: #ffffff;
    background: linear-gradient(90deg, #003399, #4787d6);
    border-bottom: 0;
}

body[data-era='early-web'] .theme-header :where(.theme-kicker, .theme-title, .theme-close, .theme-reset) {
    color: #ffffff;
}

body[data-era='early-web'] .theme-tab {
    color: #ffffff;
    background: linear-gradient(90deg, #003399, #4787d6);
    border-color: #001d59;
}

body[data-era='early-web'] .theme-current-period {
    color: #ffdd33;
}

body[data-era='early-web'] :where(.loc-photo, .popup-img, .film-card img, .card img) {
    image-rendering: pixelated;
    filter: saturate(0.82) contrast(1.14);
    border: 1px solid #777777;
}

/* =========================================================
   2035 — THE LIVING ARCHIVE
   ========================================================= */

body[data-era='future'] {
    --era-bg: #090b11;
    --era-surface: rgba(22, 25, 35, 0.84);
    --era-surface-alt: rgba(36, 41, 56, 0.72);
    --era-ink: #f1f4f7;
    --era-muted: #a5adbb;
    --era-accent: #83f2cf;
    --era-accent-2: #aa8cff;
    --era-border: rgba(168, 188, 205, 0.27);
    --era-border-strong: #83f2cf;
    --era-font-body: Inter, 'Helvetica Neue', Arial, sans-serif;
    --era-font-display: Inter, 'Helvetica Neue', Arial, sans-serif;
    --era-font-ui: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --era-card-radius: 20px;
    --era-control-radius: 999px;
    --era-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --era-image-filter: saturate(0.86) contrast(1.06);
    --era-map-filter: invert(0.88) hue-rotate(178deg) saturate(0.78) brightness(0.78) contrast(1.08);
    --era-bg-image:
        radial-gradient(circle at 10% 8%, rgba(170, 140, 255, 0.18), transparent 29rem),
        radial-gradient(circle at 88% 30%, rgba(131, 242, 207, 0.12), transparent 34rem),
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: auto, auto, 32px 32px, 32px 32px;
    animation: future-aurora 16s ease-in-out infinite alternate;
}

body[data-era='future'] :where(.site-navbar:not(.nav-transparent), .filter-bar, .card-list, .card, .film-card, .site-footer, .narrative-transition, .theme-content, .theme-tab) {
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

body[data-era='future'] .site-navbar:not(.nav-transparent) {
    background: rgba(9, 11, 17, 0.78) !important;
}

body[data-era='future'] .site-brand {
    font-weight: 600;
    letter-spacing: -0.025em;
}

body[data-era='future'] .site-sub,
body[data-era='future'] :where(.label, .films-heading, .scheda-heading, .chapter-label, .timeline-location) {
    font-family: var(--era-font-ui);
    letter-spacing: 0.1em;
}

body[data-era='future'] .navbar-toggler {
    border-color: var(--era-border);
    filter: invert(1);
}

body[data-era='future'] :where(.card, .film-card) {
    border: 1px solid var(--era-border);
    color: #f4f7fa;
    background: rgba(24, 29, 41, 0.97);
    animation: future-card-in 0.55s ease both;
}

body[data-era='future'] .card-list {
    color: #f4f7fa;
    background: rgba(10, 13, 20, 0.96);
    border-color: rgba(131, 242, 207, 0.28);
}

body[data-era='future'] .card-list .card,
body[data-era='future'] .film-card {
    color: #f7fbff !important;
    background: linear-gradient(145deg, #172236, #101827) !important;
    border-color: rgba(131, 242, 207, 0.5) !important;
}

body[data-era='future'] .card-list .card :where(h1, h2, h3, h4, .title, .film-title, .location-title),
body[data-era='future'] .film-card :where(h1, h2, h3, h4, .title, .film-title, .location-title) {
    color: #ffffff !important;
}

body[data-era='future'] .card-list .card :where(p, .description, .meta, .access, .loc-address, .loc-access),
body[data-era='future'] .film-card :where(p, .description, .film-description, .film-meta, .film-year, .film-genres) {
    color: #d7e2f0 !important;
}

body[data-era='future'] .card-list .card :where(.label, .films-heading),
body[data-era='future'] .film-card :where(.label, .films-heading) {
    color: #83f2cf !important;
}

body[data-era='future'] :where(.card, .film-card) :where(h1, h2, h3, h4, .film-title, .location-title) {
    color: #ffffff;
}

body[data-era='future'] :where(.card, .film-card) :where(p, .description, .meta, .location-meta, .film-meta, .itinerary-meta) {
    color: #c8d0dc;
}

body[data-era='future'] :where(.card, .film-card) :where(.label, .pill, .movie-tag, .tag) {
    color: #07100d;
    background: var(--era-accent);
    border-color: transparent;
}

body[data-era='future'] :where(.card, .film-card):nth-child(2) { animation-delay: 0.07s; }
body[data-era='future'] :where(.card, .film-card):nth-child(3) { animation-delay: 0.14s; }
body[data-era='future'] :where(.card, .film-card):nth-child(4) { animation-delay: 0.21s; }

body[data-era='future'] :where(.card, .film-card):hover {
    transform: translateY(-4px);
    border-color: var(--era-accent);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(131, 242, 207, 0.18);
}

body[data-era='future'] .card.active {
    outline-color: var(--era-accent);
    box-shadow: 0 0 28px rgba(131, 242, 207, 0.14);
}

body[data-era='future'] .hero {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 75% 22%, rgba(131, 242, 207, 0.23), transparent 32%),
        linear-gradient(112deg, rgba(7, 9, 15, 0.92) 0 44%, rgba(7, 9, 15, 0.42) 100%),
        url('../images/lima-shore.webp');
}

body[data-era='future'] .hero::after {
    content: '';
    position: absolute;
    inset: -30% 0 auto;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(131, 242, 207, 0.13), transparent);
    mix-blend-mode: screen;
    animation: future-scan 7s linear infinite;
}

body[data-era='future'] .hero > * {
    position: relative;
    z-index: 1;
}

body[data-era='future'] .hero h1 {
    max-width: 920px;
    font-family: var(--era-font-display);
    font-size: clamp(50px, 8vw, 105px);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 0.88;
    text-shadow: 0 0 32px rgba(131, 242, 207, 0.12);
}

body[data-era='future'] .hero-sub {
    color: var(--era-accent);
    font-family: var(--era-font-ui);
}

body[data-era='future'] .hero-cta {
    color: #07100d;
    background: var(--era-accent);
    border-color: transparent;
    box-shadow: 0 0 28px rgba(131, 242, 207, 0.24);
}

body[data-era='future'] :where(.about-page, .location-page, .narrative-page) {
    position: relative;
}

body[data-era='future'] :where(.about-section h1, .narrative-intro h1) {
    background: linear-gradient(90deg, var(--era-ink), var(--era-accent), var(--era-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body[data-era='future'] .timeline-year {
    color: var(--era-accent);
    font-family: var(--era-font-ui);
}

body[data-era='future'] .narrative-transition {
    border-left-color: var(--era-accent-2);
    background: linear-gradient(120deg, rgba(170, 140, 255, 0.13), rgba(131, 242, 207, 0.06));
}

body[data-era='future'] .loc-photo {
    border: 1px solid var(--era-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

body[data-era='future'] .theme-content,
body[data-era='future'] .theme-tab {
    background: rgba(15, 18, 27, 0.88);
    border-color: var(--era-border);
}

body[data-era='future'] .theme-option.active {
    background: linear-gradient(110deg, rgba(131, 242, 207, 0.13), rgba(170, 140, 255, 0.13));
    box-shadow: inset 0 0 24px rgba(131, 242, 207, 0.04);
}

body[data-era='future'] .theme-option-preview {
    box-shadow: 0 0 18px rgba(131, 242, 207, 0.1);
}

body[data-era='future'] .leaflet-marker-icon {
    animation: future-marker-pulse 2.8s ease-in-out infinite;
}

@keyframes future-aurora {
    from { background-position: 0 0, 100% 20%, 0 0, 0 0; }
    to { background-position: 5vw 3vh, 92% 34%, 16px 16px, 16px 16px; }
}

@keyframes future-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes future-scan {
    from { transform: translateY(-20vh); }
    to { transform: translateY(150vh); }
}

@keyframes future-marker-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(131, 242, 207, 0.2)); }
    50% { filter: drop-shadow(0 0 9px rgba(131, 242, 207, 0.9)); }
}

/* =========================================================
   RESPONSIVE AND ACCESSIBILITY
   ========================================================= */

@media (max-width: 860px) {
    body[data-era='modern-print'] .hero {
        background-image:
            linear-gradient(rgba(17, 17, 17, 0.68), rgba(17, 17, 17, 0.7)),
            url('../images/lima-shore.webp');
    }

    body[data-era='modern-print'] .hero h1,
    body[data-era='modern-print'] .hero-intro {
        text-align: center;
    }
}

@media (max-width: 700px) {
    .theme-panel {
        right: auto;
        top: 50%;
        bottom: auto;
        left: 0;
        max-width: calc(100vw - 24px);
        flex-direction: row;
        align-items: center;
        transform: translateY(-50%);
    }

    .theme-tab {
        width: 44px;
        min-height: 72px;
        flex-direction: column;
        padding: 11px 8px;
        border-left: 0;
        border-radius: 0 68% 68% 0 / 0 52% 52% 0;
        writing-mode: vertical-rl;
        transform: none;
    }

    .theme-tab:hover,
    .theme-tab:focus-visible {
        width: 44px;
    }

    .theme-content {
        width: min(370px, calc(100vw - 54px));
        max-height: min(72vh, 650px);
        margin-top: 0;
        margin-left: 8px;
        border-radius: var(--era-card-radius);
        transform-origin: left center;
    }

    .theme-panel:not(.open) .theme-content {
        width: 0;
        height: 0;
        margin: 0;
        transform: translateX(-14px) scale(0.98);
    }

    .theme-panel[data-side='right']:not(.open) .theme-content {
        transform: translateX(14px) scale(0.98);
    }

    .theme-header {
        cursor: default;
        touch-action: auto;
    }

    .theme-reset {
        display: none;
    }

    .theme-introduction {
        display: none;
    }

    .theme-option {
        padding-block: 11px;
    }

    body[data-era='modern-print'] .hero {
        align-items: center;
        padding-inline: 24px;
    }

    body[data-era='editorial-print'] .hero h1 {
        font-size: clamp(38px, 11vw, 56px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-era],
    body[data-era] *,
    body[data-era] *::before,
    body[data-era] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@supports not (color: color-mix(in srgb, black, white)) {
    .theme-option.active {
        background: var(--era-surface-alt);
    }
}

/* ==========================================================================
   SHARED MUSEUM LAYOUT — ERA COMPATIBILITY
   The main stylesheet gives every page the home page's editorial structure.
   These rules preserve that structure while restoring each era's own palette,
   typography, borders and surfaces.
   ========================================================================== */

body[data-era] .narrative-page .narrative-switcher {
    background: var(--era-bg);
    background: color-mix(in srgb, var(--era-bg) 94%, transparent);
    border-color: var(--era-border);
}

body[data-era] .narrative-page .narrative-tab {
    color: var(--era-muted);
    background: transparent;
    border-color: transparent;
    font-family: var(--era-font-ui);
}

body[data-era] .narrative-page .narrative-tab:hover {
    color: var(--era-accent);
    border-color: var(--era-border);
}

body[data-era] .narrative-page .narrative-tab.active {
    color: var(--era-surface);
    background: var(--era-accent);
    border-color: var(--era-accent);
}

body[data-era] .narrative-page .narrative-intro,
body[data-era] .narrative-page .narrative-chapter,
body[data-era] .narrative-page .timeline-entry,
body[data-era] .narrative-page .map-legend {
    border-color: var(--era-border);
}

body[data-era] .narrative-page .narrative-intro h1,
body[data-era] .narrative-page .narrative-chapter h2,
body[data-era] .narrative-page .timeline-year,
body[data-era] .narrative-page .narrative-transition p {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] .narrative-page .narrative-subtitle,
body[data-era] .narrative-page .chapter-label,
body[data-era] .narrative-page .loc-photo-caption,
body[data-era] .narrative-page .timeline-year {
    color: var(--era-accent);
}

body[data-era] .narrative-page .itinerary-text p,
body[data-era] .narrative-page .narrative-intro > p:not(.narrative-subtitle),
body[data-era] .narrative-page .chapter-intro,
body[data-era] .narrative-page .timeline-body p,
body[data-era] .narrative-page .map-legend {
    color: var(--era-ink);
    font-family: var(--era-font-body);
}

body[data-era] .narrative-page :where(.itinerary-text a, .map-legend a) {
    color: var(--era-accent);
    border-color: var(--era-accent);
}

body[data-era] .narrative-page .itinerary-meta span {
    color: var(--era-muted);
    background: var(--era-surface);
    border-color: var(--era-border);
    font-family: var(--era-font-ui);
}

body[data-era] .narrative-page .loc-photo,
body[data-era] .narrative-page .itinerary-map {
    border-color: var(--era-border);
    border-radius: var(--era-card-radius);
}

body[data-era] .narrative-page .narrative-transition {
    color: var(--era-ink);
    background: var(--era-surface-alt);
    border-left-color: var(--era-accent);
}

body[data-era] .location-main > .difficulty-bar,
body[data-era] .loc-access,
body[data-era] .films-heading,
body[data-era] .scheda-tab-bar {
    border-color: var(--era-border);
}

body[data-era] .location-main > .difficulty-bar,
body[data-era] .difficulty-btn,
body[data-era] .difficulty-label {
    font-family: var(--era-font-ui);
}

/* =========================================================
   FILM COLLECTION PAGE
   ========================================================= */

body[data-era] .film-collection-page,
body[data-era] .film-catalogue {
    color: var(--era-ink);
    background-color: var(--era-bg);
    background-image: var(--era-bg-image);
}

body[data-era] :where(.film-collection-hero, .film-catalogue-heading, .film-controls, .film-results-line) {
    border-color: var(--era-border);
}

body[data-era] :where(.film-collection-hero h1, .film-catalogue-heading h2, .film-dialog-title) {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] :where(
    .film-collection-lead,
    .film-catalogue-heading > p,
    .film-results-line p,
    .film-dialog-text,
    .film-dialog-value,
    .film-dialog-location-district
) {
    color: var(--era-muted);
}

body[data-era] :where(
    .film-collection-summary,
    .film-card-meta,
    .film-card-arrow,
    .film-dialog-label,
    .film-dialog-section-title,
    .film-results-line p:first-child
) {
    color: var(--era-accent);
    font-family: var(--era-font-ui);
}

body[data-era] :where(.film-collection-jump, .film-dialog-location-link, .film-dialog-external) {
    color: var(--era-accent);
    border-color: var(--era-accent);
    text-decoration-color: color-mix(in srgb, var(--era-accent) 55%, transparent);
}

body[data-era] .film-collage-frame {
    background: var(--era-surface-alt);
    border-color: var(--era-bg);
    border-radius: var(--era-card-radius);
    box-shadow: var(--era-shadow);
}

body[data-era] :where(.film-collage-frame img, .film-card-visual img, .film-dialog-visual img, .film-dialog-gallery-grid img) {
    filter: var(--era-image-filter);
}

body[data-era] .film-card.film-collection-card {
    color: var(--era-ink);
    background: var(--era-surface);
    border-color: var(--era-border);
    border-radius: var(--era-card-radius);
}

body[data-era] .film-collection-card .film-title {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] :where(.film-collection-card .film-description, .film-card-footer) {
    color: var(--era-muted);
}

body[data-era] :where(.film-card-footer, .film-dialog-fact, .film-dialog-section, .film-dialog-location-list li) {
    border-color: var(--era-border);
}

body[data-era] .film-genre-tag {
    color: var(--era-ink);
    background: var(--era-surface-alt);
    border-radius: var(--era-control-radius);
    font-family: var(--era-font-ui);
}

body[data-era] :where(.film-card-fallback, .film-dialog-fallback) {
    color: var(--era-muted);
    background-color: var(--era-surface-alt);
    font-family: var(--era-font-display);
}

body[data-era] .film-card-index {
    color: var(--era-surface);
    background: color-mix(in srgb, var(--era-ink) 88%, transparent);
    font-family: var(--era-font-ui);
}

body[data-era] .film-controls label {
    color: var(--era-muted);
    font-family: var(--era-font-ui);
}

body[data-era] :where(.film-controls input, .film-controls select) {
    color: var(--era-ink);
    background: var(--era-surface);
    border-color: var(--era-border-strong);
    border-radius: var(--era-control-radius);
    font-family: var(--era-font-ui);
}

body[data-era] :where(.film-controls input, .film-controls select):focus {
    border-color: var(--era-accent);
    box-shadow: 0 2px 0 var(--era-accent);
}

body[data-era] .film-clear-filters {
    color: var(--era-ink);
    background: var(--era-surface);
    border-color: var(--era-border-strong);
    border-radius: var(--era-control-radius);
    font-family: var(--era-font-ui);
}

body[data-era] .film-clear-filters:hover:not(:disabled) {
    color: var(--era-surface);
    background: var(--era-accent);
    border-color: var(--era-accent);
}

body[data-era] .film-dialog {
    color: var(--era-ink);
    background: var(--era-bg);
    background-image: var(--era-bg-image);
    border-color: var(--era-border-strong);
    border-radius: var(--era-card-radius);
    box-shadow: var(--era-shadow);
}

body[data-era] .film-dialog-close {
    color: var(--era-surface);
    background: var(--era-accent);
    border-color: var(--era-surface);
    border-radius: var(--era-control-radius);
    font-family: var(--era-font-ui);
}

body[data-era] :where(.film-dialog-visual, .film-dialog-gallery-grid figure) {
    background: var(--era-surface-alt);
    border-radius: var(--era-card-radius);
}

body[data-era='early-print'] .film-collection-hero h1::after {
    content: '❦';
    display: block;
    margin-top: 0.32em;
    color: var(--era-accent);
    font-size: 20px;
    letter-spacing: 0;
}

body[data-era='early-print'] :where(.film-card.film-collection-card, .film-dialog) {
    background-image:
        repeating-linear-gradient(0deg, rgba(52, 36, 27, 0.025) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.24), transparent 34%);
    border: 3px double var(--era-border);
}

body[data-era='modern-print'] :where(.film-collection-hero h1, .film-catalogue-heading h2) {
    border-top: 4px double var(--era-ink);
    border-bottom: 1px solid var(--era-ink);
    padding-block: 0.16em;
}

body[data-era='editorial-print'] :where(.film-collection-hero h1, .film-catalogue-heading h2, .film-dialog-title) {
    color: var(--era-ink);
    font-weight: 900;
    text-transform: uppercase;
}

body[data-era='early-web'] :where(.film-controls input, .film-controls select, .film-clear-filters) {
    border: 1px solid;
    border-color: #ffffff #555555 #555555 #ffffff;
    background: linear-gradient(#ffffff, #d1d1d1);
    box-shadow: inset 1px 1px 0 #fefefe, inset -1px -1px 0 #999999;
}

body[data-era='early-web'] :where(.film-collection-jump, .film-dialog-location-link, .film-dialog-external) {
    color: #0000cc;
    text-decoration: underline;
}

body[data-era='future'] :where(.film-collection-hero, .film-catalogue, .film-dialog) {
    color: #f4f7fa;
    background-color: #090b11;
}

body[data-era='future'] .film-dialog {
    border-color: rgba(131, 242, 207, 0.5);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.64), 0 0 0 1px rgba(131, 242, 207, 0.12);
}

body[data-era='future'] :where(.film-dialog-title, .film-dialog-section-title, .film-dialog-location-link) {
    color: #ffffff;
}

body[data-era='future'] :where(.film-dialog-text, .film-dialog-value, .film-dialog-location-district) {
    color: #d7e2f0;
}

body[data-era='future'] :where(.film-controls input, .film-controls select, .film-clear-filters) {
    color: #f4f7fa;
    background: rgba(24, 29, 41, 0.96);
    border-color: rgba(131, 242, 207, 0.48);
}

/* =========================================================
   SHARED PAGE CANVAS
   Documentation, About, Narratives, Films and Location records use the
   same palette and background treatment within each editorial era.
   ========================================================= */

body[data-era] :where(
    .about-page,
    .film-collection-page,
    .location-page
) {
    color: var(--era-ink);
    background-color: var(--era-bg);
    background-image: var(--era-bg-image);
    background-attachment: fixed;
}

/* The catalogue sits inside the shared Films canvas, so it remains
   transparent instead of restarting the era background halfway down. */
body[data-era] .film-collection-page :where(.film-collection-hero, .film-catalogue) {
    background-color: transparent;
    background-image: none;
}

body[data-era] .about-page .about-section {
    border-color: var(--era-border);
}

body[data-era] .about-page .about-section h2 {
    color: var(--era-accent);
    font-family: var(--era-font-display);
}

body[data-era] .about-page :where(
    .about-section p,
    .about-section .doc-list,
    .about-section .doc-list li,
    .credits-list li
) {
    color: var(--era-ink);
}

body[data-era] .about-page :where(.about-section a, .credits-list a) {
    color: var(--era-accent);
    text-decoration-color: color-mix(in srgb, var(--era-accent) 55%, transparent);
}

body[data-era] .about-page .credit-role {
    color: var(--era-accent-2);
    font-family: var(--era-font-ui);
}

body[data-era] .about-page code {
    color: var(--era-accent);
    background: var(--era-surface-alt);
    border: 1px solid var(--era-border);
    border-radius: var(--era-control-radius);
    padding: 0.08em 0.34em;
}

body[data-era] .about-page .doc-design-block {
    border-color: var(--era-border);
}

body[data-era] .about-page .doc-design-block h3 {
    color: var(--era-ink);
    font-family: var(--era-font-display);
}

body[data-era] .about-page .doc-design-block :where(p, .doc-list, .doc-list li) {
    color: var(--era-ink);
}

body[data-era] .about-page .doc-table-wrap {
    border-color: var(--era-border-strong);
}

body[data-era] .about-page .doc-table-wrap:focus-visible {
    outline-color: var(--era-accent);
}

body[data-era] .about-page .doc-table {
    color: var(--era-ink);
}

body[data-era] .about-page .doc-table :where(th, td) {
    border-color: var(--era-border);
}

body[data-era] .about-page .doc-table th {
    color: var(--era-accent);
    font-family: var(--era-font-ui);
}

/* Reuse the small tiled portal grid on every internal page. */
body[data-era='early-web'] :where(
    .about-page,
    .film-collection-page,
    .location-page
) {
    background-size: 8px 8px;
}

/* Reuse the aurora and 32px archive grid on every internal page. */
body[data-era='future'] :where(
    .about-page,
    .film-collection-page,
    .location-page
) {
    background-size: auto, auto, 32px 32px, 32px 32px;
}

/* =========================================================
   CONTRAST SAFEGUARDS
   Keep labels readable across every editorial palette and over photography.
   ========================================================= */

/* Location titles always sit over photography: a fixed light foreground and
   layered shadow remain reliable regardless of the selected era or image. */
body[data-era] .location-header:not(.no-image) h1 {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.92),
        0 7px 28px rgba(0, 0, 0, 0.72);
}

body[data-era] .location-header:not(.no-image) .location-header-overlay {
    background: linear-gradient(
        to top,
        rgba(6, 8, 10, 0.94) 0%,
        rgba(6, 8, 10, 0.68) 34%,
        rgba(6, 8, 10, 0.24) 68%,
        rgba(6, 8, 10, 0.08) 100%
    );
}

/* District colours remain visible on map cards. Inside the photographic
   header the badge uses a dark translucent plate instead of a pale district
   background paired with white text. */
body[data-era] .location-header:not(.no-image) .badge {
    color: #ffffff !important;
    background: color-mix(in srgb, #080a0c 84%, var(--era-accent) 16%) !important;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    text-shadow: none;
}

body[data-era] .location-header:not(.no-image) .loc-address {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

/* Preserve a readable theme-aware fallback when a location has no image. */
body[data-era] .location-header.no-image {
    color: var(--era-ink);
    background: var(--era-surface-alt);
    border-color: var(--era-border);
}

body[data-era] .location-header.no-image h1 {
    color: var(--era-ink) !important;
    text-shadow: none;
}

body[data-era] .location-header.no-image .loc-address {
    color: var(--era-ink) !important;
    text-shadow: none;
}

body[data-era] .location-header.no-image .badge {
    color: var(--era-ink) !important;
    background: var(--era-surface);
    border: 1px solid var(--era-border);
    text-shadow: none;
}

/* Film tags use the same high-contrast surface pair in every era. */
body[data-era] :where(.movie-tag, .film-genre-tag) {
    color: var(--era-ink);
    background: var(--era-surface-alt);
    border: 1px solid var(--era-border);
}

body[data-era='future'] :where(.movie-tag, .film-genre-tag) {
    color: #07100d;
    background: var(--era-accent);
    border-color: transparent;
}

/* Expanded film profiles on location records previously retained fixed grey
   values designed only for white cards. */
body[data-era] .film-card :where(.film-profile-text, .film-profile-themes) {
    color: var(--era-ink);
}

body[data-era] .film-card :where(.film-profile-label, .film-profile-toggle) {
    color: var(--era-accent);
}

body[data-era] .film-card :where(.film-profile, .film-profile-toggle) {
    border-color: var(--era-border);
}

body[data-era] .film-card .film-profile-toggle:hover,
body[data-era] .film-card .film-profile-toggle.open {
    color: var(--era-ink);
}