:root {
  color-scheme: dark;
  --paper: #f4e6c9;
  --paper-muted: #d0bea0;
  --ink: #211b14;
  --brass: #a68a57;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); }
body { color: var(--paper); font-family: Georgia, 'Times New Roman', serif; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; }
button, a { outline-offset: 5px; }
button:focus-visible, a:focus-visible { outline: 2px solid #ffe8a5; }
button { color: inherit; }
[hidden] { display: none !important; }
.world { height: 100vh; height: 100svh; min-height: 320px; position: relative; isolation: isolate; overflow: hidden; }
.atmosphere { position: absolute; inset: -38px; z-index: -2; background: url('assets/old-city-map.webp') center / cover no-repeat; filter: blur(25px) brightness(.43) saturate(.8); }
.map-frame { position: absolute; width: min(100vw, 133.333333vh); width: min(100vw, 133.333333svh); aspect-ratio: 4 / 3; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.map { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.identity { position: absolute; z-index: 3; top: clamp(6px, 1.3svh, 18px); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.identity h1 { margin: 0; }
.identity img { display: block; width: clamp(160px, 34svh, 340px); height: auto; margin: 0 auto; filter: drop-shadow(0 2px 3px rgba(20, 13, 7, .45)); }
.tagline { margin: 5px -30px 0; padding: 4px 10px; font-size: clamp(11px, 1.5svh, 15px); line-height: 1.4; white-space: nowrap; font-style: italic; color: #fff0d4; text-shadow: 0 1px 3px #130c04, 0 1px 7px #130c04; background: radial-gradient(ellipse, rgba(33, 23, 12, .7) 0%, rgba(33, 23, 12, 0) 72%); }
.landmark { position: absolute; display: block; padding: 0; min-width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
#last-chance { left: 4.5%; top: 36%; width: 21.5%; height: 29%; }
#black-mesa { left: 68%; top: 1.5%; width: 22%; height: 15.5%; }
#tomorrows-news { left: 77%; top: 49.5%; width: 20%; height: 25%; }
.landmark-mark { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; background: rgba(37, 29, 18, .87); color: #f8e2ae; border: 1px solid rgba(248, 226, 174, .8); border-radius: 50%; box-shadow: 0 2px 7px #251b1190; font: 21px/1 Georgia, serif; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; pointer-events: none; }
#last-chance .landmark-mark { left: 85%; top: 75%; }
#black-mesa .landmark-mark { left: 70%; top: 71%; }
#tomorrows-news .landmark-mark { left: 76%; top: 85%; }
.landmark:hover .landmark-mark, .landmark[aria-expanded='true'] .landmark-mark, .landmark:focus-visible .landmark-mark { transform: scale(1.14); background: #5b401e; box-shadow: 0 0 0 4px #f4d89b26, 0 2px 8px #251b11a0; }
.landmark:focus-visible { outline: 2px dashed #ffe8a5; outline-offset: 0; background: #ffe5ab0a; }
.bottom-shade { position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(transparent, #100e0acc); pointer-events: none; z-index: 1; }
.film-invitation { position: absolute; z-index: 4; left: max(22px, env(safe-area-inset-left)); bottom: calc(66px + var(--safe-bottom)); display: flex; align-items: center; gap: 13px; padding: 8px 15px 8px 8px; border: 1px solid #bc9c6460; border-radius: 4px; background: #211a11e8; box-shadow: 0 5px 18px #120d073f; cursor: pointer; text-align: left; transition: border-color .18s, background .18s; }
.film-invitation:hover { border-color: #dbc086; background: #302315; }
.film-thumbnail { width: 62px; height: 46px; position: relative; flex: 0 0 auto; overflow: hidden; border-radius: 2px; }
.film-thumbnail img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.play-symbol { display: grid; place-items: center; position: absolute; inset: 0; padding-left: 2px; font: 18px/1 Arial, sans-serif; color: #fff3d4; text-shadow: 0 1px 4px #000; }
.film-label { display: flex; flex-direction: column; gap: 4px; }
.small-label { font: 9px/1.3 Arial, sans-serif; letter-spacing: .18em; color: #d2b98b; }
.film-action { font-size: 17px; }
.film-action > span { font-size: 13px; margin-left: 12px; color: #cbb78b; }
.explore-hint { position: absolute; z-index: 3; right: max(25px, env(safe-area-inset-right)); bottom: calc(84px + var(--safe-bottom)); display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-style: italic; text-shadow: 0 1px 4px #000; pointer-events: none; }
.hint-mark { border: 1px solid #ead7b077; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font: 17px/1 Georgia, serif; }
.site-footer { position: absolute; z-index: 3; bottom: calc(16px + var(--safe-bottom)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 11px/1.5 Arial, sans-serif; color: var(--paper-muted); text-shadow: 0 1px 4px #000; }
.development-note { margin: 0; }
.site-footer nav { display: flex; align-items: center; gap: 13px; }
.site-footer a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.discovery, .film-panel { position: fixed; z-index: 20; padding: 0; color: var(--paper); background: #211a13; border: 1px solid #aa8b57; border-radius: 5px; box-shadow: 0 13px 48px #100b06b3, 0 1px 5px #0007; overflow: hidden; }
.discovery { animation: arrive .15s ease both; }
.discovery-heading, .film-heading { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 13px; background: #211a13; }
.discovery h2, .film-panel h2 { margin: 0; font-size: 16px; font-weight: normal; line-height: 1.3; }
.close-button { min-width: 44px; width: 44px; height: 44px; padding: 0; border: 0; background: none; font: 27px/1 Arial, sans-serif; color: #eedabd; cursor: pointer; }
.close-button:hover { color: #fff; background: #ffffff0d; }
.close-button:focus-visible { outline-offset: -6px; }
.discovery-art { display: block; width: 100%; height: auto; background: #c7ac80; }
.discovery-footer { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 11px; font: 10px/1.4 Arial, sans-serif; color: #c6b598; }
.discovery-footer a { display: inline-flex; align-items: center; gap: 3px; min-height: 34px; color: #f5e0bd; text-decoration: none; white-space: nowrap; }
.discovery-footer a:hover { text-decoration: underline; }
.film-panel { width: min(390px, calc(100vw - 32px)); left: max(22px, env(safe-area-inset-left)); bottom: calc(66px + var(--safe-bottom)); animation: arrive .15s ease both; }
.film-panel video { width: 100%; height: auto; max-height: calc(100svh - 170px); aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #000; }
.film-note { font: 10px/1.5 Arial, sans-serif; color: #c6b598; padding: 9px 12px; margin: 0; }
.film-error { font: 13px/1.5 Arial, sans-serif; margin: 0; padding: 10px 12px; }
.film-error a { color: inherit; }
.no-script { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; padding: 15px; background: #211b14; color: var(--paper); }
.no-script a { color: inherit; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-aspect-ratio: 1/1) {
  .identity { top: clamp(16px, 4svh, 44px); }
  .identity img { width: clamp(128px, calc((100svh - 75vw) * .42), 260px); }
  .tagline { font-size: clamp(12px, 1.6svh, 15px); margin-top: 8px; }
  .bottom-shade { height: 23svh; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .film-invitation { left: 18px; bottom: calc(87px + var(--safe-bottom)); }
  .film-panel { left: 16px; bottom: calc(87px + var(--safe-bottom)); }
  .explore-hint { left: 20px; right: auto; bottom: calc(170px + var(--safe-bottom)); font-size: 14px; }
  .site-footer { left: 20px; right: 20px; bottom: calc(10px + var(--safe-bottom)); flex-direction: column; gap: 3px; align-items: flex-start; font-size: 10px; }
  .site-footer nav { gap: 12px; }
  .site-footer a { min-height: 34px; }
  .landmark-mark { width: 22px; height: 22px; font-size: 19px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .film-invitation { bottom: calc(49px + var(--safe-bottom)); left: 15px; padding: 6px 10px 6px 6px; gap: 8px; }
  .film-thumbnail { width: 45px; height: 34px; }
  .film-action { font-size: 14px; }
  .small-label { font-size: 8px; }
  .explore-hint { bottom: calc(62px + var(--safe-bottom)); right: 16px; font-size: 12px; }
  .site-footer { bottom: calc(7px + var(--safe-bottom)); left: 16px; right: 16px; font-size: 10px; }
  .development-note { max-width: 140px; }
  .identity img { width: max(96px, 23svh); }
  .tagline { font-size: 10px; margin-top: 0; }
  .film-panel { left: 15px; bottom: calc(43px + var(--safe-bottom)); width: min(330px, calc((100svh - 132px) * 1.33333)); }
  .film-panel video { max-height: none; }
  .film-note { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the invitation distinct from the three actual map markers. */
.explore-hint { flex-direction: column; align-items: flex-end; gap: 4px; }
.explore-hint small { font: 10px/1.4 Arial, sans-serif; color: #d0bea0; }
@media (max-width: 600px) and (orientation: portrait) { .explore-hint { align-items: flex-start; } }
/* Keep the desktop film over the bridge rather than over the ballroom. */
@media (min-width: 601px) and (min-height: 521px) {
  .film-panel { width: min(330px, 28svh, calc(100vw - 32px)); bottom: calc(44px + var(--safe-bottom)); }
}