/* museumofdestruction.com. The same green and brass plaques, gold and paper as inside the game. */
@font-face { font-family: "Jersey 10"; src: url(/fonts/jersey-10.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #1b1117;
  --bg-deep: #140c11;
  --ink: #f6ecd8;
  --dim: #dccdb3;
  --faint: #ab9a82;
  --gold: #f0b04a;
  --gold-hi: #ffd890;
  --brass: #d8b468;
  --paper: #f6ecd4;
  --paper-ink: #2a1a10;
  --edge: #3a2414;
  --pixel: "Jersey 10", "Courier New", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--dim); font: 400 18px/1.6 var(--serif); overflow-x: hidden; }
@media (min-width: 800px) { body { font-size: 19px; } }
img, video { display: block; max-width: 100%; }
a { color: var(--gold-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff3dc; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--pixel); font-weight: 400; line-height: 1; color: var(--ink); text-wrap: balance; }
h2 { font-size: 40px; margin-bottom: 22px; }
h3 { font-size: 30px; }
@media (min-width: 800px) { h2 { font-size: 60px; margin-bottom: 28px; } }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.kicker { margin: 0 0 12px; font: 400 20px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.prose { max-width: 36em; }
.prose strong { color: var(--ink); font-weight: 600; }
section { padding-block: clamp(64px, 10vw, 120px); }
.deep { background: var(--bg-deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the plaques from the front steps: green and brass, or gold for the one you probably want */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 9px 26px 12px; font: 400 30px/1 var(--pixel); color: #fff3dc; text-decoration: none; background: linear-gradient(180deg, #24402f 0%, #172a20 100%); box-shadow: 0 0 0 1px #120c08, inset 0 0 0 1px #a8843e, inset 0 2px 0 rgba(246, 228, 172, .14), 0 3px 0 rgba(8, 4, 2, .6); transition: filter .12s, transform .07s, box-shadow .07s; }
.btn:hover { color: #fff3dc; filter: brightness(1.3); }
.btn:active { transform: translateY(2px); filter: brightness(.88); }
.btn.gold { color: #2a1408; background: linear-gradient(180deg, #ffd890 0%, #f0b04a 100%); box-shadow: 0 0 0 1px #5e3c1c, inset 0 1px 0 #fff0c4, 0 3px 0 #8a5a20; }
.btn.gold:hover { color: #2a1408; filter: brightness(1.1); }
.btn.gold:active { filter: none; box-shadow: 0 0 0 1px #5e3c1c, inset 0 1px 0 #fff0c4, 0 1px 0 #8a5a20; }

/* a gold frame, as round every view in the Grand Gallery */
.framed { margin: 0; background: #0c0a0c; box-shadow: 0 0 0 1px #140a06, 0 0 0 3px #d8a048, 0 0 0 4px #5e3c1c, 0 18px 40px rgba(0, 0, 0, .45); }
.framed img, .framed video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
a.shot { display: block; cursor: zoom-in; }

/* the front at sunset, with the name set into the sign over the doors, as on the title screen */
.hero { position: relative; height: max(32.3vw, min(94.7vw, 62vh)); height: max(32.3vw, min(94.7vw, 62svh)); overflow: hidden; background: #d27a6c; }
.stage { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 3840 / 1240; transform: translateX(-50%); }
.pano { width: 100%; height: 100%; }
.logo { position: absolute; left: 33.3333%; top: 11.9355%; width: 33.3333%; }
.logo img { width: 100%; height: auto; }
.top { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.top a { font: 400 20px/1 var(--pixel); color: #fff3dc; text-decoration: none; text-shadow: 2px 2px 0 rgba(30, 10, 24, .6); }
.top a:hover { color: var(--gold-hi); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 30px; height: 30px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(30, 10, 24, .5), 2px 2px 0 rgba(30, 10, 24, .45); }
.brand span { display: none; }
.top nav { display: flex; gap: clamp(14px, 3vw, 30px); }
@media (min-width: 960px) { .brand span { display: inline; } .top { padding: 16px 24px; } }

.lead { padding-block: clamp(40px, 6vw, 68px) clamp(64px, 9vw, 104px); text-align: center; background: linear-gradient(180deg, #3b2734 0, var(--bg) 280px); }
.motto { margin: 0 0 20px; font: 400 40px/1 var(--pixel); color: var(--ink); text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
@media (min-width: 800px) { .motto { font-size: 60px; } }
.pitch { max-width: 33em; margin: 0 auto 32px; font-size: 1.08em; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.note { margin: 22px 0 0; font-size: 16px; color: var(--faint); }

/* the advertisement that started it all, on the same paper as the game's reminder slips */
.job .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 880px) { .job .wrap { grid-template-columns: 5fr 6fr; gap: 72px; } }
.notice { --px: 3px; --n: calc(var(--px) * -1); --n2: calc(var(--px) * -2); --p2: calc(var(--px) * 2); position: relative; justify-self: center; width: min(430px, 100%); margin: 0; padding: 38px 30px 34px; text-align: center; color: var(--paper-ink); background: var(--paper); box-shadow: 0 var(--n) 0 var(--paper), 0 var(--px) 0 #dccaa4, var(--n) 0 0 var(--paper), var(--px) 0 0 var(--paper), 0 var(--n2) 0 var(--edge), 0 var(--p2) 0 var(--edge), var(--n2) 0 0 var(--edge), var(--p2) 0 0 var(--edge), var(--n) var(--n) 0 var(--edge), var(--px) var(--n) 0 var(--edge), var(--n) var(--px) 0 var(--edge), var(--px) var(--px) 0 var(--edge), 0 calc(var(--px) * 5) 0 rgba(8, 4, 2, .34), 0 0 90px 26px rgba(255, 214, 150, .12); }
.notice::before { content: ""; position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe8b0, #c8902c 55%, #6a4214); box-shadow: 0 2px 2px rgba(42, 20, 8, .45); }
.notice .label { margin: 0 0 10px; font: 400 20px/1 var(--pixel); letter-spacing: .16em; text-transform: uppercase; color: #b4502a; }
.notice h2 { margin: 0 0 16px; font: 700 clamp(32px, 7vw, 42px)/1.05 var(--serif); color: var(--paper-ink); }
.notice .ad { margin: 0; padding-top: 14px; border-top: 1px dashed #c4b08a; font: italic 400 21px/1.4 var(--serif); }

.exhibits { display: grid; gap: 52px 32px; margin-top: 48px; }
@media (min-width: 720px) { .exhibits { grid-template-columns: 1fr 1fr; } }
.exhibit { margin: 0; }
.placard { position: relative; width: fit-content; max-width: 90%; margin: -16px auto 0; padding: 11px 18px 12px; text-align: center; color: var(--paper-ink); background: var(--paper); box-shadow: 0 0 0 1px var(--edge), 0 4px 0 rgba(8, 4, 2, .35); }
.placard b { display: block; margin-bottom: 5px; font: 400 20px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: #8a3a22; }
.placard i { display: block; font-size: 17px; line-height: 1.35; }

.split .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split .wrap { grid-template-columns: 7fr 5fr; gap: 60px; } .split.flip .wrap { grid-template-columns: 5fr 7fr; } .split.flip .wrap > figure { order: 2; } }

/* the directory board from the Entrance Hall */
.museum-grid { display: grid; gap: 44px; align-items: start; margin-top: 8px; }
@media (min-width: 940px) { .museum-grid { grid-template-columns: 6fr 5fr; gap: 56px; } }
.directory { margin: 0; padding: 22px 24px 16px; background: linear-gradient(180deg, #213d2c 0%, #142519 100%); box-shadow: 0 0 0 1px #0c140f, 0 0 0 4px #a8843e, 0 0 0 5px #3a2a14, 0 18px 40px rgba(0, 0, 0, .4); }
.directory h3 { margin-bottom: 10px; text-align: center; font-size: 30px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.directory dl { margin: 0; }
.directory dl > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 12px 0 13px; border-top: 1px solid rgba(216, 180, 104, .2); }
.directory dt, .directory .way { font: 400 20px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: #f0dca8; }
.directory dt { display: flex; align-items: baseline; gap: 12px; }
.directory dt::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(216, 180, 104, .38); transform: translateY(-4px); }
.directory dd { margin: 0; }
.directory .way { color: var(--gold); }
.directory .what { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; font-style: italic; color: #cbbd9f; }
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; margin-top: 52px; }
@media (min-width: 900px) { .rooms { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.rooms figure { margin: 0; }
.rooms figcaption { margin-top: 12px; font: 400 20px/1.1 var(--pixel); color: var(--ink); }

.calm ul { display: grid; gap: 14px 48px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .calm ul { grid-template-columns: 1fr 1fr; } }
.calm li { position: relative; padding-left: 36px; }
.calm li::before { content: ""; position: absolute; left: 0; top: .52em; width: 20px; height: 10px; background: #a84a30; box-shadow: inset 0 2px 0 #c96c48, inset 0 -2px 0 #6a2a1a, 0 0 0 1px #2a120a; }
.closing { margin-top: 44px; font: 400 30px/1.1 var(--pixel); color: var(--ink); }

/* the ticket: admission free, damages extra */
.visit { background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(240, 176, 74, .13), transparent 70%), var(--bg-deep); }
.visit .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .visit .wrap { grid-template-columns: 5fr 6fr; gap: 72px; } }
.ticket-wrap { justify-self: center; width: min(400px, 100%); filter: drop-shadow(0 5px 0 rgba(8, 4, 2, .4)) drop-shadow(0 0 40px rgba(255, 214, 150, .12)); transform: rotate(-2deg); }
.ticket { padding: 26px 34px 22px; text-align: center; color: var(--paper-ink); background: var(--paper); -webkit-mask: radial-gradient(circle 12px at 0 62%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat; mask: radial-gradient(circle 12px at 0 62%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat; }
.ticket .small { margin: 0 0 8px; font: 400 20px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: #6a4e34; }
.ticket .big { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px dashed #c4b08a; font: 700 40px/1 var(--serif); }
.ticket dl { display: grid; gap: 7px; margin: 0; }
.ticket dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: 18px; }
.ticket dt { color: #6a4e34; }
.ticket dd { margin: 0; font-weight: 700; }
.ticket .red { color: #a83a2c; }
.ticket .no { margin: 16px 0 0; font: 400 20px/1 var(--pixel); letter-spacing: .2em; color: #8a3a22; }
.visit .btn { margin-top: 8px; }

.press .wrap { display: grid; gap: 48px; }
@media (min-width: 900px) { .press .wrap { grid-template-columns: 7fr 5fr; gap: 72px; } }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.facts dt { font: 400 20px/1.5 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 12px; } }
.downloads { margin: 18px 0 0; padding: 0; list-style: none; }
.downloads li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 11px 0; border-top: 1px solid rgba(216, 180, 104, .18); }
.downloads a { font: 400 20px/1.2 var(--pixel); letter-spacing: .04em; }
.downloads span { font-size: 15px; color: var(--faint); }

.foot { padding-block: 64px 56px; text-align: center; background: #0e080b; font-size: 16px; color: var(--faint); }
.foot .motto-sm { margin: 0; font: 400 30px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.foot .gloss { margin: 6px 0 26px; font-style: italic; }
.foot .maker { margin: 0 0 6px; color: var(--dim); }
.foot .fine { margin-top: 18px; font-size: 14px; }

/* a closer look at any picture */
.look { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; cursor: zoom-out; }
.look::backdrop { background: rgba(10, 6, 8, .88); }
.look img { width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); box-shadow: 0 0 0 1px #140a06, 0 0 0 3px #d8a048, 0 0 0 4px #5e3c1c; }

/* the closed wing */
.lost { display: grid; min-height: 100vh; min-height: 100svh; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px; text-align: center; }
.lost img { width: 96px; height: 96px; image-rendering: pixelated; }
.lost h1 { font-size: 60px; }
.lost p { max-width: 26em; margin: 0 0 10px; }