/* The 2D map of the museum: a plan you can click, with a panel for the exhibit you picked, and the same works as a plain list below. */
.map-page { --m-ground: #efe3c4; --m-plaza: #d9c9a3; --m-stone: #cdb48a; --m-floor: #f6ecd0; --m-ink: #4a3220; --m-line: #8a6a3a; --m-accent: #b8441c; --m-water: #8fc3c9; --m-dark: #1c1612; --m-dark-ink: #f0e2bf; }
[data-theme='dark'] .map-page, [data-theme='dark'].map-page { --m-ground: #231d17; --m-plaza: #2f271e; --m-stone: #4a3d2c; --m-floor: #3a3024; --m-ink: #efe0bd; --m-line: #b69456; --m-accent: #f08a56; --m-water: #3b6a73; --m-dark: #0f0c09; --m-dark-ink: #f0e2bf; }

.map-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; }
.map-tab { font: 600 .92rem var(--font-sans); padding: .55rem 1rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-card); color: var(--text-primary); cursor: pointer; }
.map-tab:hover { background: var(--surface-hover); }
.map-tab[aria-selected='true'] { background: var(--accent-brand); border-color: var(--accent-brand); color: var(--on-accent); }
:root[data-theme='light'] .map-tab[aria-selected='true'] { background: #C2410C; border-color: #C2410C; }
.map-tab:focus-visible, .map-svg a:focus-visible { outline: 3px solid var(--accent-interactive); outline-offset: 2px; }

.map-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 3rem; }
@media (min-width: 960px) { .map-layout { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); } .map-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }

.map-view { margin: 0; }
.map-view[hidden] { display: none; }
.map-svg { display: block; width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--m-ground); }
.map-cap { margin-top: .6rem; font-size: .88rem; color: var(--text-muted); max-width: 70ch; }

.m-ground { fill: var(--m-ground); } .m-ground--dark { fill: var(--m-dark); }
.m-plaza { fill: var(--m-plaza); } .m-road { fill: var(--m-plaza); stroke: var(--m-line); stroke-width: 1; }
.m-stone { fill: var(--m-stone); stroke: var(--m-line); stroke-width: 2; } .m-floor { fill: var(--m-floor); }
.m-steps { stroke: var(--m-line); stroke-width: 1.5; fill: none; }
.m-pit { fill: var(--m-line); opacity: .55; }
.m-fix { fill: var(--m-stone); stroke: var(--m-line); stroke-width: 1.5; } .m-fix--ring { fill: none; }
.m-col { fill: var(--m-stone); stroke: var(--m-line); stroke-width: 1.5; }
.m-desk rect { fill: var(--m-line); }
.m-water { fill: var(--m-water); stroke: var(--m-line); stroke-width: 1.5; }
.m-house { fill: var(--m-stone); stroke: var(--m-line); stroke-width: 2; } .m-board { fill: var(--m-accent); stroke: var(--m-line); }
.m-start { fill: var(--m-accent); stroke: #fff; stroke-width: 2; }
.m-note { font: 500 11px var(--font-sans); fill: var(--m-ink); paint-order: stroke; stroke: var(--m-floor); stroke-width: 3px; stroke-linejoin: round; }
.m-note--light { fill: var(--m-dark-ink); stroke: var(--m-dark); }
.m-link { fill: var(--m-accent); font-weight: 700; text-decoration: underline; cursor: pointer; }
.m-hot { cursor: pointer; } a:hover > .m-hot { fill: var(--m-floor); }

.m-picture { fill: var(--m-accent); stroke: var(--m-line); stroke-width: 1; }
.m-dais { fill: var(--m-floor); stroke: var(--m-line); stroke-width: 2.5; transition: fill .15s; }
.m-dais--in { fill: var(--m-stone); stroke-width: 1; }
.m-badge { fill: var(--m-accent); stroke: #fff; stroke-width: 2; } .m-n { font: 700 14px var(--font-sans); fill: #fff; }
.m-name { font: 700 11.5px var(--font-sans); fill: var(--m-ink); paint-order: stroke; stroke: var(--m-floor); stroke-width: 3.5px; stroke-linejoin: round; }
.m-spot a { cursor: pointer; } .m-spot a:hover .m-dais, .m-spot.is-open .m-dais { fill: color-mix(in srgb, var(--m-accent) 28%, var(--m-floor)); }
.m-spot.is-open .m-dais { stroke: var(--m-accent); stroke-width: 4; }

.m-tunnel { fill: #2b2218; stroke: var(--m-line); stroke-width: 2; } .m-cave { fill: #2b2218; stroke: var(--m-line); stroke-width: 3; }
.m-pool { fill: #3a6f7a; stroke: var(--m-line); stroke-width: 2; }
.m-pod { fill: none; stroke: #e0a43a; stroke-width: 2.5; } .m-pod--on { fill: #5fbf7a; stroke: #e8f6ec; }

.map-panel { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); padding: 1.1rem 1.2rem 1.3rem; min-width: 0; }
.map-panel h2 { font-size: 1.35rem; line-height: 1.2; margin: .2rem 0 .5rem; }
.map-panel__empty h2, .map-panel__vault h2 { font-size: 1.15rem; }
.map-panel__img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border-subtle); margin-bottom: .8rem; cursor: zoom-in; background: var(--surface-hover); }
.map-panel__body { position: relative; } .map-panel__close { position: absolute; top: .35rem; right: .35rem; z-index: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.map-panel__facts { padding-left: 1.2rem; margin: .5rem 0 .8rem; } .map-panel__facts li { margin: .25rem 0; }
.map-key { padding-left: 1.3rem; margin: .8rem 0 0; } .map-key li { margin: .3rem 0; }
.map-panel .lede { font-size: 1rem; margin: 0 0 .6rem; }
.vault-list { list-style: none; padding: 0; margin: .5rem 0 1rem; } .vault-list h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 .3rem; }
.vault-list li { padding: .45rem 0; border-top: 1px solid var(--border-subtle); } .vault-list strong { display: block; } .vault-list span { color: var(--text-muted); font-size: .9rem; }
.vault-tag { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 4px; font: 600 .7rem var(--font-mono); background: var(--surface-hover); color: var(--status-ok); }

.map-works { max-width: 1000px; }
.map-cards { display: grid; gap: 2.25rem; }
/* One card per work: the picture on top at the full width of the card (it is 16:9, so it wants the width), the words below it */
.map-card { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); overflow: hidden; scroll-margin-top: 1rem; }
.map-card:target { outline: 3px solid var(--accent-interactive); outline-offset: 4px; }
.map-card__pic { display: block; border-bottom: 1px solid var(--border-subtle); background: var(--surface-hover); }
.map-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.map-card__body { padding: 1.4rem 1.6rem 1.6rem; }
.map-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.2; margin: .15rem 0 .4rem; letter-spacing: -.01em; }
.map-card__tagline { color: var(--text-muted); font-size: 1.08rem; margin: 0 0 1rem; max-width: 62ch; }
.map-card__body > p { max-width: 70ch; }
.map-card .map-panel__facts { margin: 1rem 0 1.1rem; padding-left: 1.2rem; max-width: 70ch; }
.map-card .tool-meta { margin: 0 0 1.2rem; }
.map-card .cta-row { margin: 0; }
@media (max-width: 560px) { .map-card__body { padding: 1.1rem 1.1rem 1.3rem; } .map-card .cta-row .btn { flex: 1 1 100%; text-align: center; } }

@media (prefers-reduced-motion: reduce) { .m-dais { transition: none; } }
@media print { .map-tabs, .map-panel, .cta-row { display: none; } }

/* The way into the 3D walk: one clear button under the map */
.map-enter { text-align: center; max-width: 46rem; margin: 0 auto 3.5rem; padding: 2rem 1.5rem 1.6rem; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); }
.map-enter h2 { border: 0; font: 700 1.5rem var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-primary); margin: 0 0 .5rem; }
.map-enter p { color: var(--text-muted); margin: 0 auto 1.2rem; max-width: 52ch; }
.map-enter .fine { margin: 1rem 0 0; font-size: .88rem; }
.btn-xl { font-size: 1.15rem; padding: .9rem 2.2rem; border-radius: 999px; box-shadow: 0 6px 22px rgb(0 0 0 / .22); transition: transform .15s ease, box-shadow .15s ease; }
.btn-xl:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgb(0 0 0 / .3); }
.btn-xl:focus-visible { outline: 3px solid var(--accent-interactive); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-xl { transition: none; } .btn-xl:hover { transform: none; } }

.map-panel h2:focus { outline: none; }