/* Moonbase: system fonts, a night-sky blue and a moon's cream, light and dark */
:root {
  --bg: #fbf9f4; --surface: #ffffff; --ink: #1b2233; --muted: #5d6475; --line: #e4dfd3;
  --accent: #1d2a4a; --accent-ink: #f3e3b5; --link: #2a4f9e; --gold: #a8801f;
  --owner: #9b3d2e; --collaborator: #2f7a55; --public: #8a8f9c;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151f; --surface: #181d2a; --ink: #e9e6dd; --muted: #a3a8b4; --line: #2a3142;
    --accent: #f3e3b5; --accent-ink: #1d2a4a; --link: #9fbcf5; --gold: #e0bd61;
    --owner: #e48a77; --collaborator: #6fcf9c; --public: #8a8f9c;
  }
}
:root[data-theme="dark"] {
  --bg: #11151f; --surface: #181d2a; --ink: #e9e6dd; --muted: #a3a8b4; --line: #2a3142;
  --accent: #f3e3b5; --accent-ink: #1d2a4a; --link: #9fbcf5; --gold: #e0bd61;
  --owner: #e48a77; --collaborator: #6fcf9c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: var(--link); text-underline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 4.2vw, 44px); margin: 0.3em 0 0.4em; }
/* (the name wraps in its own column; the year stays on the right, level with the name's last line) */
h1.titled { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 0.5em; }
h1.titled > span:first-child { text-wrap: balance; }
h1.titled .year { color: var(--muted); font-weight: 400; }
h2 { font-size: 26px; margin: 1.6em 0 0.5em; }
h3 { font-size: 20px; margin: 0 0 0.2em; }
code { font-size: 0.88em; background: color-mix(in srgb, var(--line) 60%, transparent); padding: 0.05em 0.3em; border-radius: 4px; }
blockquote { margin: 1.2em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--gold); color: var(--ink); font-family: var(--serif); font-size: 18.5px; }
figure { margin: 1.5em 0; }
figure img { border-radius: 6px; }
figcaption, .aside, small, .then, .crumbs { color: var(--muted); }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1em 0; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }

.mock { background: var(--accent); color: var(--accent-ink); font-size: 13.5px; padding: 6px 16px; text-align: center; }
.mock a { color: inherit; font-weight: 600; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 21px; font-weight: 600; }
.brand a { color: inherit; text-decoration: none; }
.brand img { width: 46px; height: 46px; display: block; }
.brand .mark { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 9px; }
.mark-large { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 10; }
.mark-large[hidden] { display: none; }
.mark-large svg { display: block; width: min(90vw, 90vh); height: auto; }
.brand small { display: block; font: 12px var(--sans); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); border-color: var(--gold); }
.account { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.who { display: inline-flex; align-items: center; gap: 6px; }
.who small { color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--public); display: inline-block; }
.dot.owner { background: var(--owner); } .dot.collaborator { background: var(--collaborator); }
.view-as select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.view-as label { color: var(--muted); }

.button { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--accent); }
/* the home page's sections' buttons, one width, so they line up down the page */
.button.wide { min-width: 24rem; text-align: center; }
@media (max-width: 520px) { .button.wide { min-width: 0; width: 100%; } }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; vertical-align: middle; margin-left: 6px; border: 1px solid; }
.tag.owner { color: var(--owner); } .tag.collaborator { color: var(--collaborator); }

main { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
main.wide { max-width: 1120px; }
.lede, .lede p { font-size: 19px; color: var(--ink); }
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--gold); font-weight: 600; margin: 2em 0 0; }
.pull { max-width: 34em; font-size: 22px; }
.pull cite { display: block; font: 14px var(--sans); color: var(--muted); margin-top: 0.4em; font-style: normal; }
h2.section { font-size: 15px; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cards a { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 100%; }
.cards a:hover { border-color: var(--gold); }
.cards img, .cards .noimg { display: block; width: 100%; aspect-ratio: 560 / 384; object-fit: cover; image-rendering: pixelated; background: #000; }
.cards b { display: block; padding: 10px 14px 0; font-family: var(--serif); font-size: 19px; }
.cards small { display: block; padding: 0 14px 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } .top { padding: 12px 16px; } main { padding: 16px 16px 48px; } }
.years, .eras, .list { list-style: none; padding: 0; }
.years li, .list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.years b { font-family: var(--serif); font-size: 22px; margin-right: 10px; color: var(--gold); }
.eras li { margin: 0 0 12px; }
.eras a, .eras span { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.eras b { display: block; font-family: var(--serif); font-size: 20px; }
.eras span { color: var(--muted); }

.timeline .year { display: grid; grid-template-columns: 90px 1fr; gap: 0 20px; border-top: 1px solid var(--line); }
.timeline .year h2 { margin: 14px 0; font-size: 28px; color: var(--gold); }
.timeline ul { list-style: none; padding: 0; margin: 10px 0 18px; }
.timeline li { padding: 6px 0; }
.timeline .when { display: inline-block; min-width: 9em; color: var(--muted); font-size: 14px; }
.timeline li small { display: block; font-size: 13px; margin-left: 9em; }
.timeline .title a { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.timeline .title small { display: inline; margin: 0 0 0 6px; }
@media (max-width: 560px) { .timeline .year { grid-template-columns: 1fr; } .timeline .when { display: block; } .timeline li small { margin-left: 0; } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0 0 1.2em; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts dd { margin: 0; font-size: 15px; }
.screen img { display: block; width: 100%; image-rendering: pixelated; background: #000; }
section.play { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px 16px; margin: 2em 0; }
section.play h2 { font-size: 22px; margin-top: 0.8em; }
section.play.locked { border-style: dashed; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 3em; padding-top: 12px; border-top: 1px solid var(--line); }
.people, .works, .archive { list-style: none; padding: 0; }
.people li, .works li, .archive li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.people h2, .works h2 { font-size: 22px; margin: 0; }
.then { margin: 2px 0 6px; font-size: 14.5px; }
.links { font-size: 14.5px; }
.kept { color: var(--muted); font-style: italic; }
.withheld { color: var(--muted); font-style: italic; }
.notes, .more { color: var(--muted); font-size: 15.5px; }
.signin { max-width: 32em; margin: 3em auto; }
.accounts { list-style: none; padding: 0; }
.accounts a { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 2px 10px; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface); }
.accounts a:hover { border-color: var(--gold); }
.accounts small { grid-column: 2; }
.provider { min-width: 14em; text-align: center; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; padding: 18px 24px 40px; text-align: center; }
footer p { max-width: 46em; margin: 0 auto; }

[hidden] { display: none !important; }
.theme { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--gold); }
kbd { font: 600 0.88em var(--sans); padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }

/* playing: the site's tabs over moonbase's players */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--ink); background: var(--surface); border-color: var(--line); font-weight: 600; }
.game .stage { position: relative; width: min(100%, 960px, calc((var(--vvh, 100vh) - 260px) * 560 / 384)); margin: 0 auto; aspect-ratio: 560 / 384; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px -12px #0006; }
.game .stage canvas, .game .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.game .stage canvas { image-rendering: pixelated; }
.remake .stage { background: #fff; }
.remake .stage svg .key { cursor: pointer; }
.remake .stage svg .key:hover rect { stroke: var(--gold); }
.options { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; font-size: 15px; color: var(--muted); margin: 14px 0; }
#status.error { color: var(--owner); }
.help { max-width: 46em; margin: 8px auto; color: var(--muted); font-size: 15px; text-align: center; }
#paper { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 2px 8px #0005; }
#paper-box { max-width: 960px; margin: 0 auto; }
@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: #fff; }
  body *:not(:has(#paper)):not(#paper) { display: none; }
  main, section, #paper-box { margin: 0; padding: 0; max-width: none; }
  #paper { width: 100%; box-shadow: none; }
}

/* a replay: the picture beside the game's words, or the game's screen as it was */
.replay .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.replay .controls button, .replay .controls select { font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.replay .controls button:hover { border-color: var(--gold); }
.replay .controls label { color: var(--muted); font-size: 14px; }
#scrub { flex: 1 1 200px; accent-color: var(--gold); }
#where { color: var(--muted); font-size: 14px; min-width: 7em; }
.replay .play { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
@media (max-width: 820px) { .replay .play { grid-template-columns: minmax(0, 1fr); } }
.replay .stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.replay .stage svg, .replay .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s ease; }
.replay .stage canvas { object-fit: contain; image-rendering: pixelated; background: #000; }
.replay .stage .off { opacity: 0; }
.replay #status { margin: 8px 0 0; color: var(--muted); font-size: 14px; min-height: 1.5em; }
.replay #status b { color: var(--ink); font-weight: 600; }
.replay .pane { position: relative; min-height: 40vh; }
.replay #text { position: absolute; inset: 0; container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; overflow-y: auto; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.replay #text > div { font-size: calc(100cqi / 24.6); line-height: 1.35; font-weight: 500; }
.replay #text .input { color: var(--gold); margin-top: .4em; font-weight: 700; }
.replay #text .input::before { content: '* '; color: var(--muted); }
.replay #text .heading { font-weight: 700; text-align: center; margin: 0 0 .4em; letter-spacing: .05em; font-family: var(--serif); }
.replay #text .banner { display: table; margin: .6em auto; color: var(--gold); white-space: pre; }
.replay #text .cursor { display: inline-block; width: .6em; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.replay .play.as-it-was { grid-template-columns: minmax(0, 1fr); }
.replay .play.as-it-was .pane, .replay .play.as-it-was #status { display: none; }
.replay .play.as-it-was .stage { aspect-ratio: 560 / 384; width: min(100%, 960px, calc((100vh - 240px) * 560 / 384)); margin: 0 auto; }

/* a title not yet found, among those that survive */
.cards .placeholder a, .cards .placeholder .card { display: block; height: 100%; border: 1px dashed var(--line); border-radius: 10px; background: transparent; color: var(--ink); text-decoration: none; }
.cards .placeholder .noimg { display: grid; place-items: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--line) 50%, transparent) 0 10px, transparent 10px 20px); }
.cards .placeholder .noimg span { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.feature { display: block; margin: 2em 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.feature:hover { border-color: var(--gold); }
.feature b { display: block; font-family: var(--serif); font-size: 21px; }
.feature span { color: var(--muted); }

/* review */
.review-bar { position: sticky; top: 64px; background: var(--bg); padding: 8px 0; z-index: 1; color: var(--muted); }
.claims { list-style: none; padding: 0; }
.claim { padding: 14px 16px; margin: 10px 0; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; background: var(--surface); }
.claim p { margin: 0 0 4px; }
.claim.right { border-left-color: var(--collaborator); } .claim.wrong { border-left-color: var(--owner); } .claim.unsure { border-left-color: var(--gold); }
.claim.failed { outline: 2px solid var(--owner); }
.verdict { display: flex; gap: 16px; margin: 8px 0; font-size: 15px; }
.claim textarea { width: 100%; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); resize: vertical; }
body.todo .claim.right, body.todo .claim.wrong, body.todo .claim.unsure { display: none; }

/* Crayon, made again, in the site's colours */
.crayon .work { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; }
@media (max-width: 820px) { .crayon .work { grid-template-columns: minmax(0, 1fr); } }
.crayon .stage canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; aspect-ratio: 384 / 272; image-rendering: pixelated; border-radius: 10px; cursor: crosshair; touch-action: none; box-shadow: 0 10px 30px -12px #0006; }
.crayon .side { display: flex; flex-direction: column; gap: 12px; }
.crayon .box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.crayon .box h2 { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; }
.crayon .palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.crayon .palette button { aspect-ratio: 1; border-radius: 6px; border: 2px solid var(--line); cursor: pointer; padding: 0; position: relative; }
.crayon .palette button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.crayon .palette button span { position: absolute; right: 3px; bottom: 1px; font-size: 10px; mix-blend-mode: difference; color: #fff; }
.crayon .chosen { margin-top: 8px; font-size: 13px; color: var(--muted); }
.crayon button, .crayon select, .crayon input[type=number] { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.crayon button:hover:not(:disabled) { border-color: var(--gold); }
.crayon button:disabled { opacity: .4; }
.crayon .tools, .crayon .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.crayon .tools { margin-top: 0; }
.crayon .tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.crayon label { color: var(--muted); font-size: 14px; }
.crayon input[type=number] { width: 5.5em; }
.crayon .strip { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 6px; margin-top: 14px; }
.crayon .strip button { flex: none; padding: 3px; background: var(--surface); position: relative; }
.crayon .strip button[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.crayon .strip button.chosen { background: var(--line); }
.crayon .strip canvas { display: block; height: 50px; image-rendering: pixelated; }
.crayon .strip small { position: absolute; left: 6px; top: 4px; font-size: 11px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.crayon .count { color: var(--muted); font-size: 14px; }
.crayon .chars canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; border-radius: 4px; }
.crayon .chars .recent { margin-bottom: 6px; }
.crayon .zoombox .chosen { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; min-height: 3.2em; overflow: hidden; }
.crayon .zoombox canvas { display: block; width: 128px; height: 128px; image-rendering: pixelated; border-radius: 4px; }
.crayon .sprites canvas { display: block; width: 192px; height: 168px; image-rendering: pixelated; cursor: crosshair; border-radius: 4px; margin: 6px 0; touch-action: none; }
.crayon #sprite-list button { min-width: 28px; padding: 3px 6px; }
.crayon #sprite-list button.on { border-color: var(--gold); }
.crayon #sprite-list button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.crayon .script { margin-top: 14px; }
.crayon .script textarea { width: 100%; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; white-space: pre; }
.crayon .errors { margin: 8px 0 0; padding-left: 18px; color: var(--gold); font-size: 13px; }
.crayon .assets { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.crayon .assets button { padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.crayon .assets button[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.crayon .assets canvas { display: block; height: auto; image-rendering: pixelated; }
.crayon .assets small { font-size: 11px; color: var(--muted); }
.crayon select { max-width: 100%; }
.crayon .note { margin: 8px 0 0; font-size: 13px; color: var(--gold); }
.crayon .viewbox { margin-top: 8px; }
.crayon .viewbox input { width: 100%; }
.crayon .help { color: var(--muted); font-size: 14.5px; margin-top: 12px; }
.kiosk { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 10; }
.kiosk canvas { width: min(100vw, calc(100vh * 384 / 272)); height: auto; aspect-ratio: 384 / 272; image-rendering: pixelated; }

/* photographs on the About page */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.5em 0 1em; }
@media (max-width: 640px) { .photos { grid-template-columns: 1fr; } }
.photos figure { margin: 0; }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--line); }
.photos figcaption { font-size: 14.5px; margin-top: 6px; }
.photos figcaption b { color: var(--ink); font-weight: 600; }

/* the cards all one size, as the game's are: a picture, a line for the name, a line for the rest */
.cards b, .cards small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards li { min-width: 0; }

/* the title page's sections */
.viewing { color: var(--muted); font-size: 14px; }
.viewing select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.source { color: var(--muted); font-size: 14px; font-style: italic; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 1em 0; }
.gallery.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #000; image-rendering: auto; }
.gallery figcaption { font-size: 14.5px; margin-top: 6px; color: var(--muted); }
.gallery figcaption b { color: var(--ink); }
.dates { list-style: none; padding: 0; }
.dates li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dates .when { display: inline-block; min-width: 11em; color: var(--muted); font-size: 14px; }
.notes > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.notes h3 { font-size: 18px; margin: 0 0 4px; }
.notes p { margin: 0; }
.people h3 { font-size: 19px; margin: 0; }
.people p { margin: 4px 0 0; }
.people .did { list-style: none; padding: 0; margin: 4px 0 0; }
.people .did li { padding: 2px 0; border: 0; }
.people h3 a { color: inherit; text-decoration: none; }
.people h3 a:hover { text-decoration: underline; }

/* the title page's large screen framed in black, as a monitor's bezel, so a light one keeps its edge */
.screen img { box-sizing: border-box; border: 5px solid #000; }
/* the game's pictures, the scenes of its endings, a light frame */
.gallery:not(.wide) img { box-sizing: border-box; border: 1px solid var(--line); }
/* the timeline as two columns, the date and what happened, a long line wrapping in its own column */
.dates li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 0 12px; align-items: baseline; }
.dates .when { min-width: 0; }
@media (max-width: 560px) { .dates li { grid-template-columns: minmax(0, 1fr); } }
/* a document in the archive that is not a picture, a PDF */
.gallery .document { display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--serif); font-size: 22px; text-decoration: none; }
.gallery .document small { font: 600 12px var(--sans); letter-spacing: .12em; color: var(--muted); }

/* the home page's releases since the first, each its headline and month */
#since h3 { font-size: 20px; margin: 18px 0 10px; }
#since h3 small { font: 14px var(--sans); color: var(--muted); margin-left: 8px; }

/* source code, on printout paper as Goldfields' certificate is printed (web/c64/printer.js): cream
   continuous paper, feed holes down both sides, and each line its own (tools/site.mjs `listing`),
   three barred green and three not; paper in the dark too */
.code { margin: 18px 0; }
.code pre { margin: 0; overflow-x: auto; border: 1px solid #dcd8c9; border-radius: 2px; box-shadow: 0 1px 4px #0002; background: #fbfaf3; }
.code pre > code {
  display: inline-block; min-width: 100%; box-sizing: border-box; vertical-align: top; border-radius: 0;
  padding: 10px 32px; color: #26241f; font: 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace;
  /* (the paper's top and bottom margins plain over the holes, so none shows cut in half) */
  background-color: #fbfaf3;
  background-image: linear-gradient(#fbfaf3, #fbfaf3), linear-gradient(#fbfaf3, #fbfaf3),
    radial-gradient(circle at 50% 50%, #d9d6c8 0, #d9d6c8 4px, transparent 5px), radial-gradient(circle at 50% 50%, #d9d6c8 0, #d9d6c8 4px, transparent 5px);
  background-size: 100% 10px, 100% 10px, 16px 20px, 16px 20px;
  background-position: left top, left bottom, left 8px top 10px, right 8px top 10px;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
}
.code pre > code > span { display: block; height: 20px; padding: 0 8px; white-space: pre; }
.code pre > code > span:nth-child(6n+1), .code pre > code > span:nth-child(6n+2), .code pre > code > span:nth-child(6n+3) { background: #e6f0e2; }
/* a table drawn in characters, not code: plain */
.grid { margin: 18px 0; }
.grid pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font: clamp(13px, 2.6vw, 20px)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
/* (its text as large as the card holds: the table is some 54 characters across) */
.grid figcaption, .code figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* a book, its cover from where it is read, linked there */
.book { display: flex; gap: 14px; align-items: center; margin: 16px 0 24px; }
.book img { width: 96px; height: auto; display: block; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.book > a { flex: none; }
/* the styles of a picture (site/README.md): beside, right, under (.photo), and book (.book) */
.beside { display: flex; gap: 14px; align-items: center; margin: 16px 0 24px; }
.beside img { flex: none; width: 210px; height: auto; display: block; border-radius: 6px; }
.beside figcaption { font-size: 15px; color: var(--muted); }
.beside.right { flex-direction: row-reverse; justify-content: space-between; }
@media (max-width: 520px) { .beside { flex-wrap: wrap; } }
.book figcaption { font-size: 15px; color: var(--muted); }
/* a list of names and what each is (the BASIC page's functions): each name in monospace, its line beside */
dl.functions { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0; }
dl.functions dt { font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
dl.functions dd { margin: 0; }
@media (max-width: 520px) { dl.functions { grid-template-columns: 1fr; gap: 0; } dl.functions dd { margin-bottom: 8px; } }
/* bits and bytes to press (/bits-and-bytes/, /assets/bits.js): steps, switches, a character's
   dots, and a ladder of how big things are */
h3.step { font-size: 19px; margin: 28px 0 6px; }
.show { margin: 14px 0 22px; }
.switches { display: flex; flex-wrap: wrap; gap: 8px; }
.switch { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 52px; height: 74px; padding: 6px 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.switch .worth { font-size: 12px; color: var(--muted); }
.switch .state { font: 600 24px ui-monospace, SFMono-Regular, Menlo, monospace; }
.switch[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.switch[aria-pressed="true"] .worth { color: var(--accent-ink); opacity: .75; }
.reads { font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 10px 0 0; }
.reads b { font-size: 19px; }
canvas.glyph { width: 32px; height: 32px; vertical-align: middle; image-rendering: pixelated; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 3px; }
.dots .row { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.dot { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); cursor: pointer; }
.dot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.dots .byte { margin-left: 12px; font-size: 15px; white-space: pre; background: none; padding: 0; }
dl.ladder { display: grid; grid-template-columns: minmax(0, max-content) max-content; gap: 6px 32px; margin: 14px 0 22px; }
@media (max-width: 560px) { dl.ladder { column-gap: 16px; } }
dl.ladder dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) {
  .switches { gap: 5px; } .switch { width: 37px; height: 62px; } .switch .state { font-size: 20px; } .switch .worth { font-size: 11px; }
  .dot { width: 21px; height: 21px; } .dots .row { gap: 2px; margin-bottom: 2px; } .dots .byte { margin-left: 8px; font-size: 13px; }
}
/* a line that is one link, to where something is kept */
p.link { font-size: 15px; }
.book .about { display: block; margin-top: 6px; font-size: 14px; }

/* a photograph in the home page's story */
.photo { margin: 18px 0 24px; max-width: 210px; }
.photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.photo figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* the text of a wide page at a width for reading, as the opening paragraph is */
main.wide .prose { max-width: 42em; }
main.wide .full-width .prose { max-width: none; }

/* the header on a phone: the name and the light or dark button on one row, the four links on the
   next, all of it smaller, and scrolling away with the page rather than covering it */
@media (max-width: 600px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "nav nav"; gap: 8px 12px; padding: 10px 16px; position: static; }
  .top .brand { grid-area: brand; font-size: 18px; }
  .top .brand img { width: 36px; height: 36px; }
  .top .brand small { font-size: 10px; }
  .top nav { grid-area: nav; flex-wrap: nowrap; gap: 18px; }
  .top nav a { font-size: 15px; }
  .top .account { grid-area: account; }
}

/* a game page on a phone on its side: only the game, as high as the screen leaves room for (the
   keyboard's room too, --vvh), nothing else: a tap on the game opens the keyboard */
@media (orientation: landscape) and (max-height: 520px) {
  .game-page .top, .game-page footer, .game-page .crumbs, .game-page h1, .game-page .tabs, .game-page .help, .game-page .options { display: none; }
  .game-page main { padding: 4px 8px 0; max-width: none; }
  .game-page .game .stage { width: min(100%, calc((var(--vvh, 100vh) - 8px) * 560 / 384)); border-radius: 4px; box-shadow: none; }
  body.game-page, .game-page main { background: #000; }
}
.full { font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.full:hover { color: var(--ink); border-color: var(--gold); }
/* a page's title smaller on a phone held upright */
@media (max-width: 600px) { h1 { font-size: 28px; } }
.keys-box { position: absolute; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }

/* a title's card (/T/<code>/, /cards/), drawn at 300 dpi by /assets/card.js, shown at a size to see */
.title-card { margin: 18px 0; }
.title-card canvas { display: block; width: 100%; max-width: 560px; height: auto; box-shadow: 0 6px 20px #0003; }
.title-card figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.print-cards, .print-sheets, .print-squares, .print-singles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.print-sheets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.print-sheets canvas { max-width: none; border-radius: 2px; }
.print-squares { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.print-singles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* (the titles of which no copy is found, Aztlan and Crayon, set apart from the rest by a dashed line) */
.cards li.apart { grid-column: 1 / -1; border-top: 1px dashed var(--line); height: 0; margin: 2px 0; }
.people .did li.apart { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 6px; }
/* (the titles with no screen, a table under the cards: the year narrow, the rest as they fall) */
/* (MOO's square cards: the trim, dashed, and the safe area, dotted, drawn over the artwork, which
   runs 22 and 46 of its 813 past them) */
.title-card.moo > div { position: relative; max-width: 560px; }
.title-card.moo .trim, .title-card.moo .safe { position: absolute; pointer-events: none; }
.title-card.moo .trim { inset: 2.706%; border: 1px dashed #e05555; }
.title-card.moo .safe { inset: 5.658%; border: 1px dotted #55a0e0; }
/* (the two parts, on the Titles page and the home page's Part II: the kicker over the name, as the
   home page's hero has it) */
h2.part { font-size: 34px; margin: 4px 0 6px; }
section.part { margin-top: 56px; padding-top: 8px; border-top: 2px solid var(--line); }
section.part:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.part h3.section { font: 600 14px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 28px 0 0; }
.part .close { margin-top: 18px; }
/* (and a person's list in both parts, each part's name over its own) */
.people .did li.era { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-top: 8px; }
/* (the tables of work, on the Titles page and Part II's: fixed columns, the title in ink and the rest
   quiet, small capitals over them; on a phone each row a block, its year beside it) */
table.works { table-layout: fixed; width: 100%; margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; }
table.works th { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding: 0 14px 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
table.works td { padding: 11px 14px 11px 0; color: var(--muted); overflow-wrap: anywhere; }
table.works .c-title { color: var(--ink); font-weight: 500; }
table.works .c-title small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
table.works .c-year { width: 56px; font-variant-numeric: tabular-nums; }
table.works th.c-for { width: 30%; }
table.works th.c-title { width: 34%; }
table.works.record th.c-for { width: 17%; }
table.works.record th.c-title { width: 22%; }
table.works.record th.c-made { width: 15%; }
table.works.record td.c-did { font-size: 13.5px; }
main.wide .part .lede { max-width: 42em; }
table.works.who td.c-title { width: 180px; }
@media (max-width: 700px) {
  table.works, table.works tbody { display: block; }
  table.works thead { display: none; }
  table.works tr { display: grid; grid-template-columns: 52px 1fr; column-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.works td { display: block; padding: 0; border: 0; width: auto !important; }
  table.works td.c-year { grid-row: 1 / span 4; }
  table.works td:not(.c-year) { grid-column: 2; }
  table.works td.c-title { order: -1; }
  table.works.who tr { grid-template-columns: 1fr; }
  table.works.who td { grid-column: 1; }
}
.part .note { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
/* (the Concept Keyboard's overlay as the grid it is: square cells, lined, its numbers outside) */
/* (20% larger than first drawn, Mark, 12 October 2026) */
.grid table.cells { width: auto; border-collapse: collapse; margin: 0; font: 15.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.grid table.cells th { font-weight: 400; color: var(--muted); padding: 0 0 6px; text-align: center; border: 0; }
.grid table.cells tbody th { padding: 0 8px 0 0; text-align: right; vertical-align: middle; }
.grid table.cells td { width: 31px; height: 31px; padding: 0; text-align: center; vertical-align: middle; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.grid table.cells td.empty { background: transparent; }
@media (max-width: 520px) { .grid table.cells td { width: 19px; height: 19px; } .grid table.cells { font-size: 12px; } }
/* (a person's companies under their name, an organisation's people under its own) */
.people p.of { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
/* (the overlay's row and column lit under the pointer, the cell itself the brightest) */
.grid table.cells tbody tr:hover :is(td, th),
.grid table.cells:has(tbody td:nth-child(2):hover) :is(td, th):nth-child(2),
.grid table.cells:has(tbody td:nth-child(3):hover) :is(td, th):nth-child(3),
.grid table.cells:has(tbody td:nth-child(4):hover) :is(td, th):nth-child(4),
.grid table.cells:has(tbody td:nth-child(5):hover) :is(td, th):nth-child(5),
.grid table.cells:has(tbody td:nth-child(6):hover) :is(td, th):nth-child(6),
.grid table.cells:has(tbody td:nth-child(7):hover) :is(td, th):nth-child(7),
.grid table.cells:has(tbody td:nth-child(8):hover) :is(td, th):nth-child(8),
.grid table.cells:has(tbody td:nth-child(9):hover) :is(td, th):nth-child(9),
.grid table.cells:has(tbody td:nth-child(10):hover) :is(td, th):nth-child(10),
.grid table.cells:has(tbody td:nth-child(11):hover) :is(td, th):nth-child(11),
.grid table.cells:has(tbody td:nth-child(12):hover) :is(td, th):nth-child(12),
.grid table.cells:has(tbody td:nth-child(13):hover) :is(td, th):nth-child(13),
.grid table.cells:has(tbody td:nth-child(14):hover) :is(td, th):nth-child(14),
.grid table.cells:has(tbody td:nth-child(15):hover) :is(td, th):nth-child(15),
.grid table.cells:has(tbody td:nth-child(16):hover) :is(td, th):nth-child(16),
.grid table.cells:has(tbody td:nth-child(17):hover) :is(td, th):nth-child(17) { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--ink); }
.grid table.cells tbody td:hover { background: color-mix(in srgb, var(--gold) 34%, var(--surface)); }