← All work · 2026
Unopened Worlds
A design piece: a museum for thirty-two sealed worlds
An exhibit of my design eye rather than my engineering. I art-directed a site for my collection of sealed Infocom games as a small private museum, with the voice of a curator, the conventions of a collector and the grammar of the games themselves.






- 3
- typefaces, one job each
- 4
- colors: warm black, paper, brass, terminal green
- 32
- boxes, each photographed and graded
- What I did
- The concept, the art direction, the typography and palette, the photography, every word, and every decision about what belongs.
- What AI did
- The implementation. Claude Code built the site to my direction and my eye.
The brief I gave myself
Make it feel like walking into a small private museum after hours, not like browsing a store. These are thirty-two objects I have spent years finding, and the design had to treat them the way a curator would: with restraint, with context, and with a little reverence.
Type that knows its job
Three faces, and each one does one thing. Cormorant Garamond is the voice of the museum: large, literary titles with italic asides (“Thirty Two Worlds, Unopened.”). IBM Plex Sans carries the reading. IBM Plex Mono is the voice of the machine: labels, room numbers, condition grades and status lines, all set in small capitals with generous spacing, the way a 1980s terminal would print them.
A palette from the objects
Warm black for the gallery walls. A paper tone, taken from the box art, for the text. Brass for the museum’s own signage and highlights. And one color that only appears where something is alive: a muted terminal green that marks the two worlds you can actually enter.
Three vocabularies, borrowed
The site speaks in three registers, all borrowed from the subject:
- The museum’s. The home page is organized into rooms (“Room 01 / The Wall”). The opening is a curator’s statement. Each box has its own exhibit page.
- The collector’s. Every box carries a condition grade (“NM, Near Mint”), noted honestly as photo and owner inspection rather than third-party certified, and badges for my own history with it: owned and played as a kid, finished, a favorite, still sealed.
- The games’. Each exhibit page opens with a parser command (“> EXAMINE TRINITY”), and the header keeps a status line, “2 worlds online · 31 sealed · 1 unsealed”, the way Infocom kept your score.
What I didn’t do
No animations for their own sake, no carousel, no shop. The boxes are photographed straight on and framed alike, so the art on them does the talking. The restraint is the design.
18:root { 19 --background: #0d0c0a; --foreground: #f2ead9; --card: #171512; --card-foreground: #f2ead9; 20 --popover: #171512; --popover-foreground: #f2ead9; --primary: #d9a441; --primary-foreground: #0d0c0a; 21 --muted: #242019; --muted-foreground: #aaa08f; --border: #3b3429; --ring: #d9a441; 22 --brass: #d9a441; --paper: #f2ead9; --wall: #181613; --terminal: #a7cb7c; 23} 24 25* { box-sizing: border-box; } 26html { scroll-behavior: smooth; background: var(--background); } 27body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans-custom), sans-serif; -webkit-font-smoothing: antialiased; } 28button, a { -webkit-tap-highlight-color: transparent; } 29a { color: inherit; } 30 31.site-header { height: 78px; padding: 0 clamp(22px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(242 234 217 / 12%); background: rgb(13 12 10 / 88%); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; } 32.wordmark { text-decoration: none; text-transform: uppercase; letter-spacing: .16em; font: 400 clamp(12px, 1.1vw, 15px)/1 var(--font-mono-custom), monospace; } 33.wordmark span, .wordmark i { color: var(--terminal); font-style: normal; } 34.wordmark i { animation: blink 1.05s steps(1) infinite; } 35@keyframes blink { 50% { opacity: 0; } } 36.header-right { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); } 37.header-live-link { display: flex; align-items: center; gap: 8px; color: #b8cfa0; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; } 38.header-live-link span, .live-kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 12px rgb(167 203 124 / 70%); } 39.collection-tally { display: flex; align-items: center; gap: 14px; color: #9c9384; font: 11px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .12em; } 40.collection-tally strong { color: var(--paper); font-weight: 500; } 41.collection-tally b { width: 24px; height: 1px; background: #564e41; } 42 43.wall-intro { min-height: 48vh; padding: clamp(62px, 7vw, 96px) clamp(22px, 5.5vw, 88px) clamp(58px, 6vw, 86px); display: grid; grid-template-columns: 1fr; gap: clamp(48px, 5vw, 76px); align-items: start; background: radial-gradient(circle at 68% 24%, rgb(217 164 65 / 9%), transparent 27%), linear-gradient(180deg, #0d0c0a, #12100d); } 44.eyebrow, .room-number, .drawer-label { margin: 0 0 20px; color: var(--brass); font: 500 10px/1.4 var(--font-mono-custom), monospace; letter-spacing: .19em; text-transform: uppercase; } 45.wall-intro h1 { margin: 0; max-width: 930px; font: 500 clamp(62px, calc(6vw + 28px), 142px)/.9 var(--font-display), serif; letter-spacing: -.045em; } 46.wall-intro h1 em { color: var(--brass); font-weight: 400; } 47.hero-type { position: relative; display: inline-block; white-space: nowrap; } 48.hero-type-text { display: inline-block; clip-path: inset(0 100% 0 0); animation: hero-type 1.55s steps(17, end) .25s forwards; } 49.hero-type-cursor { position: absolute; top: .12em; bottom: .08em; left: 0; width: max(2px, .025em); background: var(--brass); animation: hero-cursor-travel 1.55s steps(17, end) .25s forwards, blink .65s steps(1) 1.8s 3; } 50.hero-unopened { display: inline-block; opacity: 0; transform: translateY(.08em); animation: hero-unopened .42s ease-out 2s forwards; } 51@keyframes hero-type { to { clip-path: inset(0 0 0 0); } } 52@keyframes hero-cursor-travel { to { left: 100%; } } 53@keyframes hero-unopened { to { opacity: 1; transform: translateY(0); } } 54.intro-copy { width: 100%; max-width: 760px; justify-self: end; padding-bottom: 7px; } 55.intro-copy p { margin: 0 0 21px; color: #b8ae9e; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; } 56.intro-copy .intro-orientation { font-size: clamp(15px, 1.2vw, 18px); } 57.intro-copy .intro-collection { color: #aaa194; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; } 58.intro-copy .intro-live-note { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 31px; color: #839d70; font: 500 8px/1.65 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 59.intro-live-note span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 12px rgb(167 203 124 / 70%); } 60.intro-copy > a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--paper); font: 500 10px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid var(--brass); padding-bottom: 8px; } 61.intro-copy .intro-skip-link { margin: 2px 0 30px; } 62.intro-copy .intro-worlds-link { margin-top: 2px; } 63.intro-copy .intro-game-link { color: #d7cdbd; text-decoration-color: rgb(217 164 65 / 58%); text-decoration-thickness: 1px; text-underline-offset: 3px; } 64.intro-copy .intro-game-link:hover, .intro-copy .intro-game-link:focus-visible { color: var(--paper); text-decoration-color: var(--brass); outline: none; } 65 66.work-room { padding: clamp(72px, 9vw, 126px) clamp(18px, 5.5vw, 86px); background: linear-gradient(180deg, #12100d, #0e0d0b); border-top: 1px solid #2b261e; } 67.work-heading { max-width: 1540px; margin: 0 auto 46px; display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(50px, 9vw, 150px); align-items: end; } 68.work-heading h2 { margin: 0; font: 500 clamp(42px, 5vw, 72px)/.96 var(--font-display), serif; letter-spacing: -.035em; } 69.work-heading h2 em { color: var(--terminal); font-weight: 400; } 70.work-heading > p { max-width: 560px; margin: 0 0 4px; color: #aaa194; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; } 71.work-grid { max-width: 1540px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } 72.work-card { min-height: 440px; padding: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #3a342b; background: #15130f; box-shadow: 0 24px 60px rgb(0 0 0 / 24%); } 73.work-card--zork { background: radial-gradient(circle at 92% 8%, rgb(167 203 124 / 8%), transparent 28%), #15130f; } 74.work-card--planetfall { background: radial-gradient(circle at 92% 8%, rgb(217 164 65 / 9%), transparent 28%), #15130f; } 75.work-card-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(116px, 10vw, 150px); gap: clamp(24px, 3vw, 42px); align-items: start; } 76.work-number { margin: 0 0 26px; color: #77866a; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .15em; } 77.work-card--planetfall .work-number { color: #9b8150; } 78.work-card h3 { max-width: 650px; margin: 0; color: #e5ddcf; font: 500 clamp(32px, 3.2vw, 50px)/.98 var(--font-display), serif; letter-spacing: -.025em; } 79.work-card h3 em { color: var(--terminal); font-weight: 400; } 80.work-card--planetfall h3 em { color: var(--brass); } 81.work-copy { max-width: 620px; margin: 27px 0 40px; color: #918a7f; font-size: 12px; line-height: 1.75; } 82.work-thumbnail-frame { box-shadow: 0 18px 34px rgb(0 0 0 / 42%); } 83.work-thumbnail { display: block; width: 100%; height: auto; } 84.work-invitation { padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #38332a; } 85.work-invitation p { max-width: 330px; margin: 0; color: #c1b8a8; font: italic 17px/1.35 var(--font-display), serif; } 86.work-invitation a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #9fbd83; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } 87.work-card--planetfall .work-invitation a { color: var(--brass); } 88.work-invitation a:hover, .work-invitation a:focus-visible { color: var(--paper); outline: none; } 89 90.live-exhibit { border: 1px solid #3c352a; background: #15130f; box-shadow: 0 26px 70px rgb(0 0 0 / 30%); } 91.live-exhibit--zork { min-width: 0; padding: clamp(22px, 3vw, 44px); } 92.live-exhibit--planetfall { min-width: 0; padding: clamp(22px, 3vw, 44px); border-color: #5a4131; background: radial-gradient(circle at 86% 0%, rgb(180 73 54 / 12%), transparent 31%), #17110e; } 93.live-exhibit--planetfall .live-kicker { color: #e6ae64; } 94.live-exhibit--planetfall .live-score { border-color: #654633; } 95.live-exhibit--planetfall .live-score span { color: #ead9bd; } 96.live-exhibit--planetfall .exhibit-explanation, .live-exhibit--planetfall .terminal-frame { border-color: #634634; background: linear-gradient(145deg, #160d0a, #0d0907 62%); box-shadow: inset 0 0 70px rgb(202 111 69 / 5%), 0 24px 50px rgb(0 0 0 / 38%); } 97.live-exhibit--planetfall .explanation-statement, .live-exhibit--planetfall .explanation-points > div + div, .live-exhibit--planetfall .explanation-actions, .live-exhibit--planetfall .terminal-bar, .live-exhibit--planetfall .terminal-input { border-color: #3f2c23; } 98.live-exhibit--planetfall .explanation-statement > p, .live-exhibit--planetfall .explanation-points span, .live-exhibit--planetfall .explanation-actions > div:first-child p { color: #cb8960; } 99.live-exhibit--planetfall .explanation-statement blockquote { color: #ead7bd; } 100.live-exhibit--planetfall .explanation-points p { color: #a39081; } 101.live-exhibit--planetfall .explanation-actions { background: #120c09; } 102.live-exhibit--planetfall .explanation-actions button { border-color: #c48659; background: #d79a68; color: #1a0f09; } 103.live-exhibit--planetfall .explanation-actions a { border-color: #5d4130; color: #d5a476; } 104.live-exhibit--planetfall .explanation-actions button:hover, .live-exhibit--planetfall .explanation-actions button:focus-visible { background: #ebb27a; } 105.live-exhibit--planetfall .terminal-bar { background: #120c09; color: #9b7055; } 106.live-exhibit--planetfall .terminal-status { color: #d2aa7e; } 107.live-exhibit--planetfall .terminal-status i { background: #e4a467; box-shadow: 0 0 9px rgb(228 164 103 / 65%); } 108.live-exhibit--planetfall .terminal-transcript { scrollbar-color: #704631 #0e0907; color: #e4c49d; } 109.live-exhibit--planetfall .terminal-command { color: #f0af6f; } 110.live-exhibit--planetfall .terminal-muted { color: #9c7055; } 111.live-exhibit--planetfall .terminal-input { background: #100a08; } 112.live-exhibit--planetfall .terminal-input label { color: #eca766; } 113.live-exhibit--planetfall .terminal-input input { color: #f2d3af; } 114.live-exhibit--planetfall .terminal-input input::placeholder { color: #795747; } 115.live-exhibit--planetfall .terminal-input button { background: #d79a68; color: #1a0f09; } 116.live-exhibit-heading { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 25px; } 117.live-exhibit-heading h3, .live-exhibit--planetfall h3 { margin: 0; font: 500 clamp(34px, 3.5vw, 54px)/.95 var(--font-display), serif; letter-spacing: -.025em; } 118.live-exhibit-heading > div:first-child > p:last-child { max-width: 520px; margin: 13px 0 0; color: #8f877a; font-size: 12px; line-height: 1.6; } 119.live-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--terminal); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .16em; text-transform: uppercase; } 120.live-score { min-width: 190px; align-self: end; padding: 12px 14px; border-left: 1px solid #554a39; text-align: right; font-family: var(--font-mono-custom), monospace; } 121.live-score span { display: block; color: #d9cfbe; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } 122.live-score b { display: block; margin-top: 6px; color: #766f64; font-size: 8px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; } 123.exhibit-explanation { overflow: hidden; border: 1px solid #3c4633; background: linear-gradient(145deg, #0c0f0b, #080a07 62%); box-shadow: inset 0 0 70px rgb(130 171 91 / 4%), 0 24px 50px rgb(0 0 0 / 38%); } 124.explanation-statement { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid #252d21; } 125.explanation-statement > p { margin: 6px 0 0; color: var(--terminal); font: 500 8px/1.5 var(--font-mono-custom), monospace; letter-spacing: .13em; } 126.explanation-statement blockquote { max-width: 760px; margin: 0; color: #d8dfcd; font: 400 clamp(21px, 2.25vw, 34px)/1.25 var(--font-display), serif; } 127.explanation-points { display: grid; grid-template-columns: 1fr 1fr; } 128.explanation-points > div { padding: clamp(26px, 3vw, 44px); } 129.explanation-points > div + div { border-left: 1px solid #252d21; } 130.explanation-points span, .explanation-actions p { display: block; margin: 0 0 13px; color: #78886b; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .15em; } 131.explanation-points h4 { margin: 0 0 16px; color: #e5dccb; font: 500 clamp(22px, 2vw, 30px)/1.04 var(--font-display), serif; letter-spacing: -.015em; } 132.explanation-points p { max-width: 510px; margin: 0; color: #898f82; font-size: 11px; line-height: 1.7; } 133.explanation-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px clamp(24px, 3vw, 44px); border-top: 1px solid #252d21; background: #0d100c; } 134.explanation-actions > div:first-child p { margin-bottom: 7px; color: var(--brass); } 135.explanation-actions > div:first-child span { color: #747d6c; font-size: 10px; } 136.explanation-actions > div:last-child { display: flex; align-items: center; gap: 9px; } 137.explanation-actions button, .explanation-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid #89aa68; border-radius: 0; background: #9fc579; color: #0a0d09; cursor: pointer; text-decoration: none; font: 600 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 138.explanation-actions a { border-color: #3f4839; background: transparent; color: #89967d; } 139.explanation-actions button:hover, .explanation-actions button:focus-visible { background: #b0d58a; outline: none; } 140.explanation-actions a:hover, .explanation-actions a:focus-visible { border-color: #68765f; color: #bdcab2; outline: none; } 141.terminal-reveal { animation: reveal-terminal .35s cubic-bezier(.2,.75,.25,1); } 142@keyframes reveal-terminal { from { opacity: 0; transform: translateY(-8px); } } 143.terminal-frame { overflow: hidden; border: 1px solid #3c4633; background: #070906; box-shadow: inset 0 0 70px rgb(130 171 91 / 4%), 0 24px 50px rgb(0 0 0 / 38%); } 144.terminal-bar { min-height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #252d21; background: #0d100c; color: #66705e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; text-transform: uppercase; } 145.terminal-status { display: flex; align-items: center; gap: 7px; color: #859b73; } 146.terminal-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 9px rgb(167 203 124 / 65%); } 147.terminal-status svg { animation: spin 1s linear infinite; } 148.terminal-status--error { color: #bd876c; } 149.terminal-bar > div { display: flex; align-items: center; gap: 16px; } 150.terminal-collapse { display: flex; align-items: center; gap: 4px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid #2f382a; background: transparent; color: #68735f; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; } 151.terminal-collapse:hover, .terminal-collapse:focus-visible { color: #aabc99; outline: none; } 152@keyframes spin { to { transform: rotate(360deg); } } 153.terminal-transcript { height: clamp(315px, 34vw, 455px); overflow-y: auto; padding: clamp(20px, 2.4vw, 34px); scrollbar-color: #3d4d32 #0a0c09; color: #b7d294; font: 400 clamp(11px, .92vw, 13px)/1.68 var(--font-mono-custom), monospace; } 154.terminal-turn { margin-bottom: 24px; } 155.terminal-turn p { margin: 0; white-space: pre-wrap; } 156.terminal-command { margin-bottom: 8px !important; color: #e0bd70; font-weight: 500; } 157.terminal-muted { margin: 0; color: #64725a; } 158.terminal-threshold { margin-top: 28px; padding: 18px 20px; border: 1px solid rgb(217 164 65 / 34%); background: rgb(217 164 65 / 6%); color: #d6c6a5; } 159.terminal-threshold p { margin: 0 0 10px; } 160.terminal-threshold a { display: inline-flex; align-items: center; gap: 7px; color: var(--brass); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; } 161.terminal-input { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; padding: 9px 10px 9px 17px; border-top: 1px solid #252d21; background: #0a0d09; } 162.terminal-input label { color: var(--terminal); font: 500 14px/1 var(--font-mono-custom), monospace; } 163.terminal-input input { height: 38px; border: 0; border-radius: 0; background: transparent; color: #d1e5b8; box-shadow: none; font: 400 12px/1 var(--font-mono-custom), monospace; } 164.terminal-input input:focus-visible { border: 0; box-shadow: none; } 165.terminal-input input::placeholder { color: #4f5d47; } 166.terminal-input button { height: 36px; padding: 0 16px; border-radius: 0; background: #9fc579; color: #0a0d09; font: 600 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 167.handoff-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 0; } 168.handoff-strip p { margin: 0 0 6px; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; } 169.handoff-strip span { color: #80796e; font-size: 11px; } 170.handoff-actions { display: flex; align-items: center; gap: 10px; } 171.handoff-actions button, .handoff-actions a, .live-exhibit--planetfall > a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid #4d4539; background: transparent; color: #aaa092; text-decoration: none; cursor: pointer; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 172.handoff-actions a { border-color: var(--brass); background: var(--brass); color: #100e0b; } 173.handoff-actions button:hover, .handoff-actions button:focus-visible { color: var(--paper); border-color: #756a58; outline: none; } 174.handoff-actions a:hover, .handoff-actions a:focus-visible { background: #ecc06c; outline: none; } 175.gallery-room { background: var(--wall); padding: clamp(54px, 7vw, 100px) clamp(14px, 4.2vw, 68px) 46px; border-top: 1px solid #28231c; } 176.room-heading { max-width: 1840px; margin: 0 auto 46px; display: flex; justify-content: space-between; gap: 30px; align-items: end; } 177.room-heading h2 { margin: 0; font: 500 clamp(34px, 4.2vw, 64px)/1 var(--font-display), serif; letter-spacing: -.025em; } 178.room-heading > p { max-width: 330px; margin: 0 0 4px; color: #8f877a; font: 10px/1.6 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .09em; } 179.actual-wall-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; padding-bottom: 6px; border-bottom: 1px solid #67543a; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; } 180.actual-wall-link:hover, .actual-wall-link:focus-visible { color: var(--paper); border-color: var(--paper); outline: none; } 181.room-number { margin-bottom: 12px; } 182.shadowbox-wall { max-width: 1840px; margin: auto; padding: clamp(22px, 2.5vw, 44px); background: radial-gradient(ellipse at 50% -5%, rgb(255 232 183 / 12%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 2%), transparent 27%), #12110f; border: 1px solid #2b271f; box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 38px 90px rgb(0 0 0 / 34%); } 183.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: clamp(18px, 1.7vw, 30px) clamp(12px, 1.25vw, 22px); } 184.shadowbox { position: relative; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: zoom-in; opacity: 0; transform: translateY(14px); animation: arrive .65s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--index) * 22ms); } 185@keyframes arrive { to { opacity: 1; transform: translateY(0); } } 186.frame-lip { display: block; padding: clamp(4px, .45vw, 8px); aspect-ratio: .83; background: linear-gradient(135deg, #503a27 0%, #23170f 33%, #61462e 54%, #21170f 100%); box-shadow: 0 12px 22px rgb(0 0 0 / 52%), 0 2px 2px #000, inset 0 0 0 1px rgb(231 195 126 / 13%); transition: transform .28s ease, box-shadow .28s ease; } 187.frame-mat { position: relative; display: grid; place-items: center; height: 100%; padding: clamp(5px, .45vw, 8px); overflow: hidden; background: #080807; box-shadow: inset 0 0 17px #000; } 188.frame-mat img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.9) contrast(1.04); } 189.glass-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(117deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 2%) 15%, transparent 31%, transparent 72%, rgb(255 255 255 / 4%) 100%); mix-blend-mode: screen; } 190.shadowbox:hover .frame-lip, .shadowbox:focus-visible .frame-lip { transform: translateY(-6px) scale(1.018); box-shadow: 0 21px 30px rgb(0 0 0 / 70%), 0 2px 2px #000, 0 0 0 1px rgb(217 164 65 / 45%); } 191.shadowbox:focus-visible { outline: none; } 192.object-label { display: block; padding: 10px 2px 2px; overflow: hidden; } 193.object-label-meta { min-height: 14px; display: flex; align-items: center; justify-content: space-between; gap: 4px; } 194.object-label-meta > span:first-child { flex: none; color: #70695f; font: 8px/1 var(--font-mono-custom), monospace; letter-spacing: .09em; } 195.object-label strong { display: block; margin-top: 5px; overflow: hidden; color: #cfc5b5; font: 500 clamp(9px, .78vw, 12px)/1.2 var(--font-sans-custom), sans-serif; white-space: nowrap; text-overflow: ellipsis; } 196.badge-marks { display: flex; align-items: center; justify-content: flex-end; gap: 1px; } 197.collection-badge { width: 15px; height: 15px; display: inline-grid; flex: none; place-items: center; border: 1px solid #635b4d; background: #1a1814; color: #9f9687; box-shadow: inset 0 1px rgb(255 255 255 / 4%); } 198.collection-badge--played-as-kid { border-color: #596872; color: #91a3ad; } 199.collection-badge--childhood-box { border-color: #79663f; color: #c3a563; } 200.collection-badge--unsealed-copy { border-color: #706c63; color: #b9b2a6; } 201.collection-badge--childhood-favorite { border-color: #79524d; color: #c47c72; } 202.collection-badge--finished-as-kid { border-color: #596b4d; color: #92aa7e; } 203.collection-badge--ai-recreation { border-color: #587146; color: var(--terminal); box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 0 8px rgb(167 203 124 / 14%); } 204.collection-badge--second-sealed-copy { border-color: #625878; color: #a99ac3; } 205.badge-key { max-width: 1840px; margin: 20px auto 0; padding: 16px 18px; display: grid; grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr); align-items: center; gap: 24px; border: 1px solid #302b23; background: #151310; } 206.badge-key-heading p { margin: 0 0 6px; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 207.badge-key-heading span { display: block; color: #6f685e; font: 9px/1.5 var(--font-mono-custom), monospace; } 208.badge-key-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 10px; } 209.badge-marks--expanded { justify-content: flex-start; flex-wrap: wrap; gap: 7px; } 210.badge-marks--expanded .collection-badge { width: auto; min-height: 27px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; } 211.badge-marks--expanded .collection-badge > span { color: #a49b8e; font: 500 7px/1.25 var(--font-mono-custom), monospace; letter-spacing: .05em; text-transform: uppercase; } 212.shadowbox--sought .frame-lip { box-shadow: 0 12px 22px rgb(0 0 0 / 52%), 0 0 0 1px rgb(217 164 65 / 52%); } 213.shadowbox--sought .frame-mat img { filter: saturate(.52) contrast(1.03); } 214.shadowbox--living .frame-lip { transform: translateY(-7px); box-shadow: 0 19px 30px rgb(0 0 0 / 68%), 0 0 0 1px rgb(167 203 124 / 62%), 0 0 24px rgb(127 171 91 / 9%); } 215.shadowbox--living { scroll-margin-top: 120px; } 216.shadowbox--living .object-label strong { color: #e2dbc9; } 217.shadowbox--living:hover .frame-lip, .shadowbox--living:focus-visible .frame-lip { transform: translateY(-12px) scale(1.025); box-shadow: 0 27px 36px rgb(0 0 0 / 78%), 0 0 0 1px rgb(167 203 124 / 92%), 0 0 32px rgb(127 171 91 / 18%); } 218.shadowbox--living:target .frame-lip { animation: signal-pulse 1.1s ease-out; } 219@keyframes signal-pulse { 35% { box-shadow: 0 24px 36px rgb(0 0 0 / 75%), 0 0 0 2px rgb(167 203 124 / 95%), 0 0 40px rgb(127 171 91 / 32%); } } 220.wall-caption { max-width: 1840px; margin: 22px auto 0; display: flex; justify-content: space-between; gap: 20px; color: #80776b; font: 10px/1.5 var(--font-mono-custom), monospace; letter-spacing: .05em; } 221.wall-caption p { margin: 0; } 222.wall-caption p:first-child span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border: 1px solid #5d5548; color: var(--brass); border-radius: 50%; } 223 224.survivors-note { padding: clamp(58px, 7vw, 96px) clamp(22px, 5vw, 76px); border-top: 1px solid #28231c; background: radial-gradient(circle at 75% 45%, rgb(217 164 65 / 6%), transparent 28%), #11100e; } 225.survivors-note-inner { max-width: 1540px; margin: auto; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(44px, 8vw, 128px); align-items: end; } 226.survivors-note .room-number { margin-bottom: 15px; } 227.survivors-note h2 { max-width: 560px; margin: 0; color: #e3dacb; font: 500 clamp(34px, 4vw, 58px)/.98 var(--font-display), serif; letter-spacing: -.025em; } 228.survivors-note-inner > p { max-width: 720px; margin: 0 0 3px; color: #a9a092; font: 400 clamp(17px, 1.6vw, 23px)/1.55 var(--font-display), serif; } 229.survivors-note-inner > p em { color: #d7cbb8; } 230.kept-box-grid { max-width: 1540px; margin: clamp(38px, 5vw, 64px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(13px, 1.35vw, 22px); } 231.kept-box-card { min-width: 0; margin: 0; } 232.kept-box-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: clamp(6px, .65vw, 10px); overflow: hidden; border: 1px solid #393228; background: #0b0a08; box-shadow: 0 16px 28px rgb(0 0 0 / 27%); } 233.kept-box-photo img { display: block; width: 100%; height: 100%; object-fit: contain; } 234.kept-box-card figcaption { padding: 10px 2px 0; } 235.kept-box-card figcaption span { display: block; margin-bottom: 5px; color: #897d68; font: 500 7px/1.3 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 236.kept-box-card figcaption strong { display: block; color: #c9bdac; font: 500 clamp(11px, 1vw, 14px)/1.22 var(--font-display), serif; } 237 238footer { min-height: 150px; padding: 48px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 54px; align-items: center; color: #797164; font-size: 12px; } 239footer p { max-width: 580px; font: italic 17px/1.4 var(--font-display), serif; } 240footer .footer-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2vw, 34px); } 241footer a { display: flex; align-items: center; gap: 7px; font: 9px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .11em; text-underline-offset: 5px; } 242 243.collection-photo-frame { width: 100%; aspect-ratio: 5 / 6; overflow: hidden; border: 1px solid #4e4538; background: #ddd8cf; box-shadow: 0 34px 55px rgb(0 0 0 / 68%); } 244/* Most photographs use the standard 5:6 frame. Only scans with a materially 245 different native shape receive a matching frame of their own. */ 246.collection-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } 247.collection-photo--native { object-fit: contain; } 248.collection-photo--front { box-sizing: border-box; border: 6px solid var(--paper); outline: 3px solid var(--brass); outline-offset: -8px; } 249.collection-photo--leather-goddesses { object-fit: contain; } 250.collection-photo--starcross { object-fit: contain; } 251.collection-photo-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; } 252.collection-photo-controls > p { display: flex; align-items: center; gap: 8px; margin: 0; color: #8e8577; font: 500 8px/1.4 var(--font-mono-custom), monospace; letter-spacing: .09em; text-transform: uppercase; } 253.collection-photo-controls > p svg { color: var(--brass); } 254.collection-photo-controls > div { display: flex; flex-wrap: wrap; border: 1px solid #51483a; } 255.collection-photo-controls button { min-width: 70px; height: 36px; padding: 0 15px; border: 0; background: transparent; color: #898174; cursor: pointer; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 256.collection-photo-controls button + button { border-left: 1px solid #51483a; } 257.collection-photo-controls button[aria-pressed='true'] { background: var(--brass); color: #100e0b; } 258.collection-photo-controls button:hover, .collection-photo-controls button:focus-visible { color: var(--paper); outline: none; } 259.collection-photo-controls button[aria-pressed='true']:hover, .collection-photo-controls button[aria-pressed='true']:focus-visible { color: #100e0b; } 260.exhibit-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 60px; background: radial-gradient(circle at 50% 38%, #30291f, #13110e 67%); border-right: 1px solid #383127; } 261.exhibit-cover { width: min(310px, 75%); padding: 15px; background: linear-gradient(135deg, #5c422b, #20150e 36%, #65472d 58%, #21160e); box-shadow: 0 35px 46px rgb(0 0 0 / 72%); transform: perspective(900px) rotateY(2deg) rotateX(1deg); } 262.exhibit-cover img { display: block; width: 100%; aspect-ratio: .83; object-fit: cover; background: #000; } 263.photo-status { max-width: 315px; display: flex; align-items: center; gap: 9px; color: #7f776c; font: 8px/1.5 var(--font-mono-custom), monospace; letter-spacing: .05em; text-transform: uppercase; } 264.exhibit-story { padding: clamp(58px, 6vw, 92px); align-self: center; } 265.terminal-line { margin: 0 0 58px; color: var(--terminal); font: 10px/1.5 var(--font-mono-custom), monospace; letter-spacing: .09em; } 266.exhibit-year { margin: 0 0 12px; color: var(--brass); font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .18em; } 267.exhibit-title { max-width: 630px; font: 500 clamp(46px, 6vw, 82px)/.9 var(--font-display), serif; letter-spacing: -.035em; } 268.byline { margin: 20px 0 36px; color: #8f877b; font: 9px/1.4 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .12em; } 269.personal-history { max-width: 600px; margin: -12px 0 32px; padding: 15px 0 17px; border-top: 1px solid #3b342a; border-bottom: 1px solid #3b342a; } 270.personal-history > p { margin: 0 0 11px; color: #71695e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 271.condition-assessment { max-width: 600px; display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: -10px 0 32px; padding: 16px 0 18px; border-top: 1px solid #3b342a; border-bottom: 1px solid #3b342a; } 272.condition-assessment-grade { min-width: 92px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; } 273.condition-assessment-grade > p { grid-column: 1 / -1; margin: 0 0 7px; color: #71695e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 274.condition-assessment-grade strong { color: var(--brass); font: 500 28px/.9 var(--font-display), serif; letter-spacing: -.04em; } 275.condition-assessment-grade span { color: #d7cdbc; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .08em; text-transform: uppercase; } 276.condition-assessment-detail { align-self: end; } 277.condition-assessment-modifiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } 278.condition-assessment-modifiers span { padding: 5px 7px; border: 1px solid rgb(217 164 65 / 38%); color: #c4a36a; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 279.condition-assessment-detail > p { margin: 0; color: #aaa194; font-size: 12px; line-height: 1.5; } 280.condition-assessment-detail small { display: block; margin-top: 8px; color: #71695e; font: 500 7px/1.4 var(--font-mono-custom), monospace; letter-spacing: .07em; text-transform: uppercase; } 281.tribute { max-width: 600px; margin: 0; color: #d7cdbc; font: 400 clamp(21px, 2.1vw, 30px)/1.35 var(--font-display), serif; } 282/* A tribute long enough to be an essay steps down so the drawer stays reachable. */ 283.tribute--long { font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; } 284.exhibit-divider { width: 42px; height: 1px; margin: 42px 0 32px; background: var(--brass); } 285.archive-drawer { max-width: 590px; display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; } 286.archive-drawer h3 { margin: 0; font: 500 23px/1.1 var(--font-display), serif; } 287.drawer-label { margin-bottom: 8px; } 288.archive-items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } 289.archive-items span, .archive-items a, .archive-items button { display: flex; align-items: center; gap: 6px; height: fit-content; padding: 8px 10px; border: 1px solid #484035; color: #a99f90; font: 8px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .08em; } 290.archive-items a, .archive-items button { color: var(--brass); text-decoration: none; border-color: rgb(217 164 65 / 45%); background: transparent; cursor: pointer; } 291.archive-items button:hover, .archive-items button:focus-visible { background: rgb(217 164 65 / 10%); outline: none; } 292.archive-items a:hover, .archive-items a:focus-visible { background: rgb(217 164 65 / 10%); outline: none; } 293.drawer-note { grid-column: 1 / -1; margin: 0; max-width: 520px; color: #7e766a; font-size: 12px; line-height: 1.65; } 294.hunt-note { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; color: var(--brass); font: 9px/1.4 var(--font-mono-custom), monospace; letter-spacing: .08em; text-transform: uppercase; } 295 296/* ---- A game's own page ---------------------------------------------- */ 297.exhibit-page { min-height: 100vh; background: linear-gradient(180deg, #0d0c0a, #131110 60%, #0d0c0a); } 298.exhibit-back { display: inline-flex; align-items: center; gap: 8px; color: #8f877a; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } 299.exhibit-back:hover, .exhibit-back:focus-visible { color: var(--paper); outline: none; } 300.exhibit-layout { max-width: 1640px; margin: auto; padding: clamp(34px, 4.5vw, 76px) clamp(18px, 4vw, 68px) clamp(28px, 3vw, 52px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(30px, 4vw, 74px); align-items: start; }
18:root { 19 --background: #0d0c0a; --foreground: #f2ead9; --card: #171512; --card-foreground: #f2ead9; 20 --popover: #171512; --popover-foreground: #f2ead9; --primary: #d9a441; --primary-foreground: #0d0c0a; 21 --muted: #242019; --muted-foreground: #aaa08f; --border: #3b3429; --ring: #d9a441; 22 --brass: #d9a441; --paper: #f2ead9; --wall: #181613; --terminal: #a7cb7c; 23} 24 25* { box-sizing: border-box; } 26html { scroll-behavior: smooth; background: var(--background); } 27body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans-custom), sans-serif; -webkit-font-smoothing: antialiased; } 28button, a { -webkit-tap-highlight-color: transparent; } 29a { color: inherit; } 30 31.site-header { height: 78px; padding: 0 clamp(22px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(242 234 217 / 12%); background: rgb(13 12 10 / 88%); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; } 32.wordmark { text-decoration: none; text-transform: uppercase; letter-spacing: .16em; font: 400 clamp(12px, 1.1vw, 15px)/1 var(--font-mono-custom), monospace; } 33.wordmark span, .wordmark i { color: var(--terminal); font-style: normal; } 34.wordmark i { animation: blink 1.05s steps(1) infinite; } 35@keyframes blink { 50% { opacity: 0; } } 36.header-right { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); } 37.header-live-link { display: flex; align-items: center; gap: 8px; color: #b8cfa0; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; } 38.header-live-link span, .live-kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 12px rgb(167 203 124 / 70%); } 39.collection-tally { display: flex; align-items: center; gap: 14px; color: #9c9384; font: 11px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .12em; } 40.collection-tally strong { color: var(--paper); font-weight: 500; } 41.collection-tally b { width: 24px; height: 1px; background: #564e41; } 42 43.wall-intro { min-height: 48vh; padding: clamp(62px, 7vw, 96px) clamp(22px, 5.5vw, 88px) clamp(58px, 6vw, 86px); display: grid; grid-template-columns: 1fr; gap: clamp(48px, 5vw, 76px); align-items: start; background: radial-gradient(circle at 68% 24%, rgb(217 164 65 / 9%), transparent 27%), linear-gradient(180deg, #0d0c0a, #12100d); } 44.eyebrow, .room-number, .drawer-label { margin: 0 0 20px; color: var(--brass); font: 500 10px/1.4 var(--font-mono-custom), monospace; letter-spacing: .19em; text-transform: uppercase; } 45.wall-intro h1 { margin: 0; max-width: 930px; font: 500 clamp(62px, calc(6vw + 28px), 142px)/.9 var(--font-display), serif; letter-spacing: -.045em; } 46.wall-intro h1 em { color: var(--brass); font-weight: 400; } 47.hero-type { position: relative; display: inline-block; white-space: nowrap; } 48.hero-type-text { display: inline-block; clip-path: inset(0 100% 0 0); animation: hero-type 1.55s steps(17, end) .25s forwards; } 49.hero-type-cursor { position: absolute; top: .12em; bottom: .08em; left: 0; width: max(2px, .025em); background: var(--brass); animation: hero-cursor-travel 1.55s steps(17, end) .25s forwards, blink .65s steps(1) 1.8s 3; } 50.hero-unopened { display: inline-block; opacity: 0; transform: translateY(.08em); animation: hero-unopened .42s ease-out 2s forwards; } 51@keyframes hero-type { to { clip-path: inset(0 0 0 0); } } 52@keyframes hero-cursor-travel { to { left: 100%; } } 53@keyframes hero-unopened { to { opacity: 1; transform: translateY(0); } } 54.intro-copy { width: 100%; max-width: 760px; justify-self: end; padding-bottom: 7px; } 55.intro-copy p { margin: 0 0 21px; color: #b8ae9e; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; } 56.intro-copy .intro-orientation { font-size: clamp(15px, 1.2vw, 18px); } 57.intro-copy .intro-collection { color: #aaa194; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; } 58.intro-copy .intro-live-note { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 31px; color: #839d70; font: 500 8px/1.65 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 59.intro-live-note span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 12px rgb(167 203 124 / 70%); } 60.intro-copy > a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--paper); font: 500 10px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid var(--brass); padding-bottom: 8px; } 61.intro-copy .intro-skip-link { margin: 2px 0 30px; } 62.intro-copy .intro-worlds-link { margin-top: 2px; } 63.intro-copy .intro-game-link { color: #d7cdbd; text-decoration-color: rgb(217 164 65 / 58%); text-decoration-thickness: 1px; text-underline-offset: 3px; } 64.intro-copy .intro-game-link:hover, .intro-copy .intro-game-link:focus-visible { color: var(--paper); text-decoration-color: var(--brass); outline: none; } 65 66.work-room { padding: clamp(72px, 9vw, 126px) clamp(18px, 5.5vw, 86px); background: linear-gradient(180deg, #12100d, #0e0d0b); border-top: 1px solid #2b261e; } 67.work-heading { max-width: 1540px; margin: 0 auto 46px; display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(50px, 9vw, 150px); align-items: end; } 68.work-heading h2 { margin: 0; font: 500 clamp(42px, 5vw, 72px)/.96 var(--font-display), serif; letter-spacing: -.035em; } 69.work-heading h2 em { color: var(--terminal); font-weight: 400; } 70.work-heading > p { max-width: 560px; margin: 0 0 4px; color: #aaa194; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; } 71.work-grid { max-width: 1540px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } 72.work-card { min-height: 440px; padding: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #3a342b; background: #15130f; box-shadow: 0 24px 60px rgb(0 0 0 / 24%); } 73.work-card--zork { background: radial-gradient(circle at 92% 8%, rgb(167 203 124 / 8%), transparent 28%), #15130f; } 74.work-card--planetfall { background: radial-gradient(circle at 92% 8%, rgb(217 164 65 / 9%), transparent 28%), #15130f; } 75.work-card-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(116px, 10vw, 150px); gap: clamp(24px, 3vw, 42px); align-items: start; } 76.work-number { margin: 0 0 26px; color: #77866a; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .15em; } 77.work-card--planetfall .work-number { color: #9b8150; } 78.work-card h3 { max-width: 650px; margin: 0; color: #e5ddcf; font: 500 clamp(32px, 3.2vw, 50px)/.98 var(--font-display), serif; letter-spacing: -.025em; } 79.work-card h3 em { color: var(--terminal); font-weight: 400; } 80.work-card--planetfall h3 em { color: var(--brass); } 81.work-copy { max-width: 620px; margin: 27px 0 40px; color: #918a7f; font-size: 12px; line-height: 1.75; } 82.work-thumbnail-frame { box-shadow: 0 18px 34px rgb(0 0 0 / 42%); } 83.work-thumbnail { display: block; width: 100%; height: auto; } 84.work-invitation { padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #38332a; } 85.work-invitation p { max-width: 330px; margin: 0; color: #c1b8a8; font: italic 17px/1.35 var(--font-display), serif; } 86.work-invitation a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #9fbd83; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } 87.work-card--planetfall .work-invitation a { color: var(--brass); } 88.work-invitation a:hover, .work-invitation a:focus-visible { color: var(--paper); outline: none; } 89 90.live-exhibit { border: 1px solid #3c352a; background: #15130f; box-shadow: 0 26px 70px rgb(0 0 0 / 30%); } 91.live-exhibit--zork { min-width: 0; padding: clamp(22px, 3vw, 44px); } 92.live-exhibit--planetfall { min-width: 0; padding: clamp(22px, 3vw, 44px); border-color: #5a4131; background: radial-gradient(circle at 86% 0%, rgb(180 73 54 / 12%), transparent 31%), #17110e; } 93.live-exhibit--planetfall .live-kicker { color: #e6ae64; } 94.live-exhibit--planetfall .live-score { border-color: #654633; } 95.live-exhibit--planetfall .live-score span { color: #ead9bd; } 96.live-exhibit--planetfall .exhibit-explanation, .live-exhibit--planetfall .terminal-frame { border-color: #634634; background: linear-gradient(145deg, #160d0a, #0d0907 62%); box-shadow: inset 0 0 70px rgb(202 111 69 / 5%), 0 24px 50px rgb(0 0 0 / 38%); } 97.live-exhibit--planetfall .explanation-statement, .live-exhibit--planetfall .explanation-points > div + div, .live-exhibit--planetfall .explanation-actions, .live-exhibit--planetfall .terminal-bar, .live-exhibit--planetfall .terminal-input { border-color: #3f2c23; } 98.live-exhibit--planetfall .explanation-statement > p, .live-exhibit--planetfall .explanation-points span, .live-exhibit--planetfall .explanation-actions > div:first-child p { color: #cb8960; } 99.live-exhibit--planetfall .explanation-statement blockquote { color: #ead7bd; } 100.live-exhibit--planetfall .explanation-points p { color: #a39081; } 101.live-exhibit--planetfall .explanation-actions { background: #120c09; } 102.live-exhibit--planetfall .explanation-actions button { border-color: #c48659; background: #d79a68; color: #1a0f09; } 103.live-exhibit--planetfall .explanation-actions a { border-color: #5d4130; color: #d5a476; } 104.live-exhibit--planetfall .explanation-actions button:hover, .live-exhibit--planetfall .explanation-actions button:focus-visible { background: #ebb27a; } 105.live-exhibit--planetfall .terminal-bar { background: #120c09; color: #9b7055; } 106.live-exhibit--planetfall .terminal-status { color: #d2aa7e; } 107.live-exhibit--planetfall .terminal-status i { background: #e4a467; box-shadow: 0 0 9px rgb(228 164 103 / 65%); } 108.live-exhibit--planetfall .terminal-transcript { scrollbar-color: #704631 #0e0907; color: #e4c49d; } 109.live-exhibit--planetfall .terminal-command { color: #f0af6f; } 110.live-exhibit--planetfall .terminal-muted { color: #9c7055; } 111.live-exhibit--planetfall .terminal-input { background: #100a08; } 112.live-exhibit--planetfall .terminal-input label { color: #eca766; } 113.live-exhibit--planetfall .terminal-input input { color: #f2d3af; } 114.live-exhibit--planetfall .terminal-input input::placeholder { color: #795747; } 115.live-exhibit--planetfall .terminal-input button { background: #d79a68; color: #1a0f09; } 116.live-exhibit-heading { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 25px; } 117.live-exhibit-heading h3, .live-exhibit--planetfall h3 { margin: 0; font: 500 clamp(34px, 3.5vw, 54px)/.95 var(--font-display), serif; letter-spacing: -.025em; } 118.live-exhibit-heading > div:first-child > p:last-child { max-width: 520px; margin: 13px 0 0; color: #8f877a; font-size: 12px; line-height: 1.6; } 119.live-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--terminal); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .16em; text-transform: uppercase; } 120.live-score { min-width: 190px; align-self: end; padding: 12px 14px; border-left: 1px solid #554a39; text-align: right; font-family: var(--font-mono-custom), monospace; } 121.live-score span { display: block; color: #d9cfbe; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } 122.live-score b { display: block; margin-top: 6px; color: #766f64; font-size: 8px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; } 123.exhibit-explanation { overflow: hidden; border: 1px solid #3c4633; background: linear-gradient(145deg, #0c0f0b, #080a07 62%); box-shadow: inset 0 0 70px rgb(130 171 91 / 4%), 0 24px 50px rgb(0 0 0 / 38%); } 124.explanation-statement { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid #252d21; } 125.explanation-statement > p { margin: 6px 0 0; color: var(--terminal); font: 500 8px/1.5 var(--font-mono-custom), monospace; letter-spacing: .13em; } 126.explanation-statement blockquote { max-width: 760px; margin: 0; color: #d8dfcd; font: 400 clamp(21px, 2.25vw, 34px)/1.25 var(--font-display), serif; } 127.explanation-points { display: grid; grid-template-columns: 1fr 1fr; } 128.explanation-points > div { padding: clamp(26px, 3vw, 44px); } 129.explanation-points > div + div { border-left: 1px solid #252d21; } 130.explanation-points span, .explanation-actions p { display: block; margin: 0 0 13px; color: #78886b; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .15em; } 131.explanation-points h4 { margin: 0 0 16px; color: #e5dccb; font: 500 clamp(22px, 2vw, 30px)/1.04 var(--font-display), serif; letter-spacing: -.015em; } 132.explanation-points p { max-width: 510px; margin: 0; color: #898f82; font-size: 11px; line-height: 1.7; } 133.explanation-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px clamp(24px, 3vw, 44px); border-top: 1px solid #252d21; background: #0d100c; } 134.explanation-actions > div:first-child p { margin-bottom: 7px; color: var(--brass); } 135.explanation-actions > div:first-child span { color: #747d6c; font-size: 10px; } 136.explanation-actions > div:last-child { display: flex; align-items: center; gap: 9px; } 137.explanation-actions button, .explanation-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid #89aa68; border-radius: 0; background: #9fc579; color: #0a0d09; cursor: pointer; text-decoration: none; font: 600 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 138.explanation-actions a { border-color: #3f4839; background: transparent; color: #89967d; } 139.explanation-actions button:hover, .explanation-actions button:focus-visible { background: #b0d58a; outline: none; } 140.explanation-actions a:hover, .explanation-actions a:focus-visible { border-color: #68765f; color: #bdcab2; outline: none; } 141.terminal-reveal { animation: reveal-terminal .35s cubic-bezier(.2,.75,.25,1); } 142@keyframes reveal-terminal { from { opacity: 0; transform: translateY(-8px); } } 143.terminal-frame { overflow: hidden; border: 1px solid #3c4633; background: #070906; box-shadow: inset 0 0 70px rgb(130 171 91 / 4%), 0 24px 50px rgb(0 0 0 / 38%); } 144.terminal-bar { min-height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #252d21; background: #0d100c; color: #66705e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; text-transform: uppercase; } 145.terminal-status { display: flex; align-items: center; gap: 7px; color: #859b73; } 146.terminal-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--terminal); box-shadow: 0 0 9px rgb(167 203 124 / 65%); } 147.terminal-status svg { animation: spin 1s linear infinite; } 148.terminal-status--error { color: #bd876c; } 149.terminal-bar > div { display: flex; align-items: center; gap: 16px; } 150.terminal-collapse { display: flex; align-items: center; gap: 4px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid #2f382a; background: transparent; color: #68735f; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; } 151.terminal-collapse:hover, .terminal-collapse:focus-visible { color: #aabc99; outline: none; } 152@keyframes spin { to { transform: rotate(360deg); } } 153.terminal-transcript { height: clamp(315px, 34vw, 455px); overflow-y: auto; padding: clamp(20px, 2.4vw, 34px); scrollbar-color: #3d4d32 #0a0c09; color: #b7d294; font: 400 clamp(11px, .92vw, 13px)/1.68 var(--font-mono-custom), monospace; } 154.terminal-turn { margin-bottom: 24px; } 155.terminal-turn p { margin: 0; white-space: pre-wrap; } 156.terminal-command { margin-bottom: 8px !important; color: #e0bd70; font-weight: 500; } 157.terminal-muted { margin: 0; color: #64725a; } 158.terminal-threshold { margin-top: 28px; padding: 18px 20px; border: 1px solid rgb(217 164 65 / 34%); background: rgb(217 164 65 / 6%); color: #d6c6a5; } 159.terminal-threshold p { margin: 0 0 10px; } 160.terminal-threshold a { display: inline-flex; align-items: center; gap: 7px; color: var(--brass); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; } 161.terminal-input { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; padding: 9px 10px 9px 17px; border-top: 1px solid #252d21; background: #0a0d09; } 162.terminal-input label { color: var(--terminal); font: 500 14px/1 var(--font-mono-custom), monospace; } 163.terminal-input input { height: 38px; border: 0; border-radius: 0; background: transparent; color: #d1e5b8; box-shadow: none; font: 400 12px/1 var(--font-mono-custom), monospace; } 164.terminal-input input:focus-visible { border: 0; box-shadow: none; } 165.terminal-input input::placeholder { color: #4f5d47; } 166.terminal-input button { height: 36px; padding: 0 16px; border-radius: 0; background: #9fc579; color: #0a0d09; font: 600 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 167.handoff-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 0; } 168.handoff-strip p { margin: 0 0 6px; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .13em; } 169.handoff-strip span { color: #80796e; font-size: 11px; } 170.handoff-actions { display: flex; align-items: center; gap: 10px; } 171.handoff-actions button, .handoff-actions a, .live-exhibit--planetfall > a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid #4d4539; background: transparent; color: #aaa092; text-decoration: none; cursor: pointer; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 172.handoff-actions a { border-color: var(--brass); background: var(--brass); color: #100e0b; } 173.handoff-actions button:hover, .handoff-actions button:focus-visible { color: var(--paper); border-color: #756a58; outline: none; } 174.handoff-actions a:hover, .handoff-actions a:focus-visible { background: #ecc06c; outline: none; } 175.gallery-room { background: var(--wall); padding: clamp(54px, 7vw, 100px) clamp(14px, 4.2vw, 68px) 46px; border-top: 1px solid #28231c; } 176.room-heading { max-width: 1840px; margin: 0 auto 46px; display: flex; justify-content: space-between; gap: 30px; align-items: end; } 177.room-heading h2 { margin: 0; font: 500 clamp(34px, 4.2vw, 64px)/1 var(--font-display), serif; letter-spacing: -.025em; } 178.room-heading > p { max-width: 330px; margin: 0 0 4px; color: #8f877a; font: 10px/1.6 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .09em; } 179.actual-wall-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; padding-bottom: 6px; border-bottom: 1px solid #67543a; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; } 180.actual-wall-link:hover, .actual-wall-link:focus-visible { color: var(--paper); border-color: var(--paper); outline: none; } 181.room-number { margin-bottom: 12px; } 182.shadowbox-wall { max-width: 1840px; margin: auto; padding: clamp(22px, 2.5vw, 44px); background: radial-gradient(ellipse at 50% -5%, rgb(255 232 183 / 12%), transparent 40%), linear-gradient(115deg, rgb(255 255 255 / 2%), transparent 27%), #12110f; border: 1px solid #2b271f; box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 38px 90px rgb(0 0 0 / 34%); } 183.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: clamp(18px, 1.7vw, 30px) clamp(12px, 1.25vw, 22px); } 184.shadowbox { position: relative; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: zoom-in; opacity: 0; transform: translateY(14px); animation: arrive .65s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--index) * 22ms); } 185@keyframes arrive { to { opacity: 1; transform: translateY(0); } } 186.frame-lip { display: block; padding: clamp(4px, .45vw, 8px); aspect-ratio: .83; background: linear-gradient(135deg, #503a27 0%, #23170f 33%, #61462e 54%, #21170f 100%); box-shadow: 0 12px 22px rgb(0 0 0 / 52%), 0 2px 2px #000, inset 0 0 0 1px rgb(231 195 126 / 13%); transition: transform .28s ease, box-shadow .28s ease; } 187.frame-mat { position: relative; display: grid; place-items: center; height: 100%; padding: clamp(5px, .45vw, 8px); overflow: hidden; background: #080807; box-shadow: inset 0 0 17px #000; } 188.frame-mat img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.9) contrast(1.04); } 189.glass-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(117deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 2%) 15%, transparent 31%, transparent 72%, rgb(255 255 255 / 4%) 100%); mix-blend-mode: screen; } 190.shadowbox:hover .frame-lip, .shadowbox:focus-visible .frame-lip { transform: translateY(-6px) scale(1.018); box-shadow: 0 21px 30px rgb(0 0 0 / 70%), 0 2px 2px #000, 0 0 0 1px rgb(217 164 65 / 45%); } 191.shadowbox:focus-visible { outline: none; } 192.object-label { display: block; padding: 10px 2px 2px; overflow: hidden; } 193.object-label-meta { min-height: 14px; display: flex; align-items: center; justify-content: space-between; gap: 4px; } 194.object-label-meta > span:first-child { flex: none; color: #70695f; font: 8px/1 var(--font-mono-custom), monospace; letter-spacing: .09em; } 195.object-label strong { display: block; margin-top: 5px; overflow: hidden; color: #cfc5b5; font: 500 clamp(9px, .78vw, 12px)/1.2 var(--font-sans-custom), sans-serif; white-space: nowrap; text-overflow: ellipsis; } 196.badge-marks { display: flex; align-items: center; justify-content: flex-end; gap: 1px; } 197.collection-badge { width: 15px; height: 15px; display: inline-grid; flex: none; place-items: center; border: 1px solid #635b4d; background: #1a1814; color: #9f9687; box-shadow: inset 0 1px rgb(255 255 255 / 4%); } 198.collection-badge--played-as-kid { border-color: #596872; color: #91a3ad; } 199.collection-badge--childhood-box { border-color: #79663f; color: #c3a563; } 200.collection-badge--unsealed-copy { border-color: #706c63; color: #b9b2a6; } 201.collection-badge--childhood-favorite { border-color: #79524d; color: #c47c72; } 202.collection-badge--finished-as-kid { border-color: #596b4d; color: #92aa7e; } 203.collection-badge--ai-recreation { border-color: #587146; color: var(--terminal); box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 0 8px rgb(167 203 124 / 14%); } 204.collection-badge--second-sealed-copy { border-color: #625878; color: #a99ac3; } 205.badge-key { max-width: 1840px; margin: 20px auto 0; padding: 16px 18px; display: grid; grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr); align-items: center; gap: 24px; border: 1px solid #302b23; background: #151310; } 206.badge-key-heading p { margin: 0 0 6px; color: var(--brass); font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 207.badge-key-heading span { display: block; color: #6f685e; font: 9px/1.5 var(--font-mono-custom), monospace; } 208.badge-key-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 10px; } 209.badge-marks--expanded { justify-content: flex-start; flex-wrap: wrap; gap: 7px; } 210.badge-marks--expanded .collection-badge { width: auto; min-height: 27px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; } 211.badge-marks--expanded .collection-badge > span { color: #a49b8e; font: 500 7px/1.25 var(--font-mono-custom), monospace; letter-spacing: .05em; text-transform: uppercase; } 212.shadowbox--sought .frame-lip { box-shadow: 0 12px 22px rgb(0 0 0 / 52%), 0 0 0 1px rgb(217 164 65 / 52%); } 213.shadowbox--sought .frame-mat img { filter: saturate(.52) contrast(1.03); } 214.shadowbox--living .frame-lip { transform: translateY(-7px); box-shadow: 0 19px 30px rgb(0 0 0 / 68%), 0 0 0 1px rgb(167 203 124 / 62%), 0 0 24px rgb(127 171 91 / 9%); } 215.shadowbox--living { scroll-margin-top: 120px; } 216.shadowbox--living .object-label strong { color: #e2dbc9; } 217.shadowbox--living:hover .frame-lip, .shadowbox--living:focus-visible .frame-lip { transform: translateY(-12px) scale(1.025); box-shadow: 0 27px 36px rgb(0 0 0 / 78%), 0 0 0 1px rgb(167 203 124 / 92%), 0 0 32px rgb(127 171 91 / 18%); } 218.shadowbox--living:target .frame-lip { animation: signal-pulse 1.1s ease-out; } 219@keyframes signal-pulse { 35% { box-shadow: 0 24px 36px rgb(0 0 0 / 75%), 0 0 0 2px rgb(167 203 124 / 95%), 0 0 40px rgb(127 171 91 / 32%); } } 220.wall-caption { max-width: 1840px; margin: 22px auto 0; display: flex; justify-content: space-between; gap: 20px; color: #80776b; font: 10px/1.5 var(--font-mono-custom), monospace; letter-spacing: .05em; } 221.wall-caption p { margin: 0; } 222.wall-caption p:first-child span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border: 1px solid #5d5548; color: var(--brass); border-radius: 50%; } 223 224.survivors-note { padding: clamp(58px, 7vw, 96px) clamp(22px, 5vw, 76px); border-top: 1px solid #28231c; background: radial-gradient(circle at 75% 45%, rgb(217 164 65 / 6%), transparent 28%), #11100e; } 225.survivors-note-inner { max-width: 1540px; margin: auto; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(44px, 8vw, 128px); align-items: end; } 226.survivors-note .room-number { margin-bottom: 15px; } 227.survivors-note h2 { max-width: 560px; margin: 0; color: #e3dacb; font: 500 clamp(34px, 4vw, 58px)/.98 var(--font-display), serif; letter-spacing: -.025em; } 228.survivors-note-inner > p { max-width: 720px; margin: 0 0 3px; color: #a9a092; font: 400 clamp(17px, 1.6vw, 23px)/1.55 var(--font-display), serif; } 229.survivors-note-inner > p em { color: #d7cbb8; } 230.kept-box-grid { max-width: 1540px; margin: clamp(38px, 5vw, 64px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(13px, 1.35vw, 22px); } 231.kept-box-card { min-width: 0; margin: 0; } 232.kept-box-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: clamp(6px, .65vw, 10px); overflow: hidden; border: 1px solid #393228; background: #0b0a08; box-shadow: 0 16px 28px rgb(0 0 0 / 27%); } 233.kept-box-photo img { display: block; width: 100%; height: 100%; object-fit: contain; } 234.kept-box-card figcaption { padding: 10px 2px 0; } 235.kept-box-card figcaption span { display: block; margin-bottom: 5px; color: #897d68; font: 500 7px/1.3 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 236.kept-box-card figcaption strong { display: block; color: #c9bdac; font: 500 clamp(11px, 1vw, 14px)/1.22 var(--font-display), serif; } 237 238footer { min-height: 150px; padding: 48px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 54px; align-items: center; color: #797164; font-size: 12px; } 239footer p { max-width: 580px; font: italic 17px/1.4 var(--font-display), serif; } 240footer .footer-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2vw, 34px); } 241footer a { display: flex; align-items: center; gap: 7px; font: 9px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .11em; text-underline-offset: 5px; } 242 243.collection-photo-frame { width: 100%; aspect-ratio: 5 / 6; overflow: hidden; border: 1px solid #4e4538; background: #ddd8cf; box-shadow: 0 34px 55px rgb(0 0 0 / 68%); } 244/* Most photographs use the standard 5:6 frame. Only scans with a materially 245 different native shape receive a matching frame of their own. */ 246.collection-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } 247.collection-photo--native { object-fit: contain; } 248.collection-photo--front { box-sizing: border-box; border: 6px solid var(--paper); outline: 3px solid var(--brass); outline-offset: -8px; } 249.collection-photo--leather-goddesses { object-fit: contain; } 250.collection-photo--starcross { object-fit: contain; } 251.collection-photo-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; } 252.collection-photo-controls > p { display: flex; align-items: center; gap: 8px; margin: 0; color: #8e8577; font: 500 8px/1.4 var(--font-mono-custom), monospace; letter-spacing: .09em; text-transform: uppercase; } 253.collection-photo-controls > p svg { color: var(--brass); } 254.collection-photo-controls > div { display: flex; flex-wrap: wrap; border: 1px solid #51483a; } 255.collection-photo-controls button { min-width: 70px; height: 36px; padding: 0 15px; border: 0; background: transparent; color: #898174; cursor: pointer; font: 500 8px/1 var(--font-mono-custom), monospace; letter-spacing: .12em; text-transform: uppercase; } 256.collection-photo-controls button + button { border-left: 1px solid #51483a; } 257.collection-photo-controls button[aria-pressed='true'] { background: var(--brass); color: #100e0b; } 258.collection-photo-controls button:hover, .collection-photo-controls button:focus-visible { color: var(--paper); outline: none; } 259.collection-photo-controls button[aria-pressed='true']:hover, .collection-photo-controls button[aria-pressed='true']:focus-visible { color: #100e0b; } 260.exhibit-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 60px; background: radial-gradient(circle at 50% 38%, #30291f, #13110e 67%); border-right: 1px solid #383127; } 261.exhibit-cover { width: min(310px, 75%); padding: 15px; background: linear-gradient(135deg, #5c422b, #20150e 36%, #65472d 58%, #21160e); box-shadow: 0 35px 46px rgb(0 0 0 / 72%); transform: perspective(900px) rotateY(2deg) rotateX(1deg); } 262.exhibit-cover img { display: block; width: 100%; aspect-ratio: .83; object-fit: cover; background: #000; } 263.photo-status { max-width: 315px; display: flex; align-items: center; gap: 9px; color: #7f776c; font: 8px/1.5 var(--font-mono-custom), monospace; letter-spacing: .05em; text-transform: uppercase; } 264.exhibit-story { padding: clamp(58px, 6vw, 92px); align-self: center; } 265.terminal-line { margin: 0 0 58px; color: var(--terminal); font: 10px/1.5 var(--font-mono-custom), monospace; letter-spacing: .09em; } 266.exhibit-year { margin: 0 0 12px; color: var(--brass); font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .18em; } 267.exhibit-title { max-width: 630px; font: 500 clamp(46px, 6vw, 82px)/.9 var(--font-display), serif; letter-spacing: -.035em; } 268.byline { margin: 20px 0 36px; color: #8f877b; font: 9px/1.4 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .12em; } 269.personal-history { max-width: 600px; margin: -12px 0 32px; padding: 15px 0 17px; border-top: 1px solid #3b342a; border-bottom: 1px solid #3b342a; } 270.personal-history > p { margin: 0 0 11px; color: #71695e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 271.condition-assessment { max-width: 600px; display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: -10px 0 32px; padding: 16px 0 18px; border-top: 1px solid #3b342a; border-bottom: 1px solid #3b342a; } 272.condition-assessment-grade { min-width: 92px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; } 273.condition-assessment-grade > p { grid-column: 1 / -1; margin: 0 0 7px; color: #71695e; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; } 274.condition-assessment-grade strong { color: var(--brass); font: 500 28px/.9 var(--font-display), serif; letter-spacing: -.04em; } 275.condition-assessment-grade span { color: #d7cdbc; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .08em; text-transform: uppercase; } 276.condition-assessment-detail { align-self: end; } 277.condition-assessment-modifiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } 278.condition-assessment-modifiers span { padding: 5px 7px; border: 1px solid rgb(217 164 65 / 38%); color: #c4a36a; font: 500 7px/1 var(--font-mono-custom), monospace; letter-spacing: .1em; text-transform: uppercase; } 279.condition-assessment-detail > p { margin: 0; color: #aaa194; font-size: 12px; line-height: 1.5; } 280.condition-assessment-detail small { display: block; margin-top: 8px; color: #71695e; font: 500 7px/1.4 var(--font-mono-custom), monospace; letter-spacing: .07em; text-transform: uppercase; } 281.tribute { max-width: 600px; margin: 0; color: #d7cdbc; font: 400 clamp(21px, 2.1vw, 30px)/1.35 var(--font-display), serif; } 282/* A tribute long enough to be an essay steps down so the drawer stays reachable. */ 283.tribute--long { font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; } 284.exhibit-divider { width: 42px; height: 1px; margin: 42px 0 32px; background: var(--brass); } 285.archive-drawer { max-width: 590px; display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; } 286.archive-drawer h3 { margin: 0; font: 500 23px/1.1 var(--font-display), serif; } 287.drawer-label { margin-bottom: 8px; } 288.archive-items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } 289.archive-items span, .archive-items a, .archive-items button { display: flex; align-items: center; gap: 6px; height: fit-content; padding: 8px 10px; border: 1px solid #484035; color: #a99f90; font: 8px/1 var(--font-mono-custom), monospace; text-transform: uppercase; letter-spacing: .08em; } 290.archive-items a, .archive-items button { color: var(--brass); text-decoration: none; border-color: rgb(217 164 65 / 45%); background: transparent; cursor: pointer; } 291.archive-items button:hover, .archive-items button:focus-visible { background: rgb(217 164 65 / 10%); outline: none; } 292.archive-items a:hover, .archive-items a:focus-visible { background: rgb(217 164 65 / 10%); outline: none; } 293.drawer-note { grid-column: 1 / -1; margin: 0; max-width: 520px; color: #7e766a; font-size: 12px; line-height: 1.65; } 294.hunt-note { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; color: var(--brass); font: 9px/1.4 var(--font-mono-custom), monospace; letter-spacing: .08em; text-transform: uppercase; } 295 296/* ---- A game's own page ---------------------------------------------- */ 297.exhibit-page { min-height: 100vh; background: linear-gradient(180deg, #0d0c0a, #131110 60%, #0d0c0a); } 298.exhibit-back { display: inline-flex; align-items: center; gap: 8px; color: #8f877a; font: 500 9px/1 var(--font-mono-custom), monospace; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } 299.exhibit-back:hover, .exhibit-back:focus-visible { color: var(--paper); outline: none; } 300.exhibit-layout { max-width: 1640px; margin: auto; padding: clamp(34px, 4.5vw, 76px) clamp(18px, 4vw, 68px) clamp(28px, 3vw, 52px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(30px, 4vw, 74px); align-items: start; }