/* Impasto. A black terminal screen, white double-line frames (rasters, public/img/ui), the IBM VGA
   face at whole multiples of its 16 px cell, and the paintings as the only colour that matters. */

@font-face {
  font-family: "VGA";
  src: url("/font/vga.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --ink: #f2efe6;
  --dim: #a29e93;
  --faint: #6c6960;
  --hot: #c6ff1a;          /* the lime of the house tube */
  --pink: #ff2fb4;         /* the paint coming out of it */
  --ok: #c6ff1a;
  --bad: #ff6b5e;
  --cell: 16px;
  --gap: 24px;
  --edge: 12px;           /* the frame rasters' border width */
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 "VGA", ui-monospace, "Courier New", monospace;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  cursor: url("/img/cursor.png") 2 30, auto;
}
a, button, input, select, label[for], summary { cursor: url("/img/cursor.png") 2 30, pointer; }
img { image-rendering: pixelated; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 12px; }

/* ---- surfaces ------------------------------------------------------------------------------- */
.panel {
  position: relative;
  border: var(--edge) solid transparent;
  border-image: url("/img/ui/panel.png") 12 fill / var(--edge) / 0 stretch;
  padding: 12px 16px;
}
.panel-tabs { border-image-source: url("/img/ui/panel-tabs.png"); }
.titled { padding-top: 18px; }
.titled > .title, .easel > .title {
  position: absolute;
  top: calc(var(--edge) * -1 - 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 12px;
  white-space: nowrap;
  line-height: 20px;
  z-index: 2;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.well {
  border: 8px solid transparent;
  border-image: url("/img/ui/well.png") 12 fill / 8px / 0 stretch;
  padding: 6px 10px;
  overflow-wrap: anywhere;
  user-select: all;
}
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 16px;
  border: 6px solid transparent;
  border-image: url("/img/ui/key.png") 6 fill / 6px / 0 stretch;
  background: none;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.key:hover:not([aria-disabled="true"]):not(:disabled), .key.on {
  border-image-source: url("/img/ui/key-hot.png");
  color: var(--bg);
}
.key:active:not([aria-disabled="true"]):not(:disabled) { transform: translateY(2px); }
.key:disabled, .key[aria-disabled="true"] { border-image-source: url("/img/ui/key-off.png"); color: var(--faint); cursor: not-allowed; }
.key:disabled img, .key[aria-disabled="true"] img { opacity: 0.35; }
.key img { image-rendering: auto; }
.key:hover:not([aria-disabled="true"]) .mark-x, .key-x:hover:not([aria-disabled="true"]) img { filter: invert(1); }
.key-x { padding: 4px 14px; }

/* ---- the first screen ---------------------------------------------------------------------------- */
.screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px var(--gap);
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px var(--gap) 20px;
  min-height: 100vh;
  align-items: start;
}
.left, .right { display: grid; gap: 22px; min-width: 0; }
.right > .easel { justify-self: center; width: max-content; max-width: 100%; }
.wordmark { padding: 10px 14px; line-height: 0; }
.wordmark img { width: 100%; height: auto; display: block; image-rendering: auto; }
.premise { font-size: 32px; line-height: 40px; text-transform: uppercase; letter-spacing: 0.01em; }

.inventory ul { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.inventory a { display: grid; justify-items: center; gap: 6px; text-decoration: none; text-align: center; }
.slot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border: 6px solid transparent; border-image: url("/img/ui/slot.png") 6 fill / 6px / 0 stretch;
}
.slot img { width: 78%; height: auto; }
.inventory .slot { max-width: 84px; }
.inventory a:hover .slot, .inventory a[aria-current="page"] .slot { border-image-source: url("/img/ui/slot-on.png"); }
.inventory a:hover .slot img { transform: translateY(-2px); }
.inventory .label { text-transform: uppercase; line-height: 18px; min-height: 18px; }
.inventory a[aria-current="page"] .label { color: var(--hot); }
.inventory a:hover .label { color: var(--pink); }
a:hover { color: var(--pink); }
.lot .row b, .split td:first-child { color: var(--pink) !important; }

.command { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
.command .prompt { font-size: 32px; line-height: 40px; }
.command input {
  background: none; border: 0; outline: none; font-size: 32px; line-height: 40px; text-transform: uppercase;
  caret-color: var(--ink); min-width: 0; width: 100%;
}
.command input::placeholder { color: var(--faint); }
.command:focus-within { outline: 2px solid var(--hot); outline-offset: 4px; }
.cmd-out { grid-column: 1 / -1; color: var(--dim); min-height: 24px; }

.house { display: grid; gap: 10px; }
.house-name { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.house .ticker { font-size: 32px; line-height: 40px; }
.house-what { color: var(--dim); }
.house .keys { display: flex; flex-wrap: wrap; gap: 10px; }
.key-note { color: var(--dim); min-height: 24px; }

.easel {
  position: relative; margin: 0;
  border: 14px solid transparent;
  border-image: url("/img/ui/easel.png") 14 fill / 14px / 0 stretch;
  padding: 10px;
}
.easel > .title { top: -24px; }
.canvas-box { position: relative; width: 100%; aspect-ratio: 4 / 5; background: #111; overflow: hidden; }
.canvas-box canvas { display: block; width: 100%; height: 100%; image-rendering: auto; touch-action: pan-y; }
.canvas-box .brush { position: absolute; width: 56px; height: 56px; pointer-events: none; transform: translate(-6px, -50px); image-rendering: pixelated; transition: opacity .3s; }
.right .easel .canvas-box { width: auto; margin: 0 auto; height: calc(100vh - 340px); min-height: 420px; max-height: 900px; }
.dialogue {
  display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center;
  margin: -84px 28px 0; z-index: 3; min-height: 140px;
}
.dialogue .portrait { width: 112px; height: 112px; border: 2px solid var(--ink); }
.speech { font-size: 16px; line-height: 24px; text-transform: uppercase; }
.speech small { display: block; color: var(--dim); text-transform: none; margin-top: 6px; }

.chips { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.chips li { display: grid; gap: 4px; justify-items: center; color: var(--dim); font-size: 16px; }
.chips canvas { width: 100%; aspect-ratio: 1; display: block; border: 2px solid var(--ink); image-rendering: auto; }
.chips li.fresh canvas { border-color: var(--hot); }

/* ---- pages ---------------------------------------------------------------------------------------- */
main { max-width: 1680px; margin: 0 auto; padding: 24px var(--gap) 80px; outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 8px 0 28px; }
.page-head h2 { font-size: 32px; line-height: 40px; text-transform: uppercase; }
.page-head p { color: var(--dim); max-width: 70ch; }
.lead { color: var(--dim); max-width: 72ch; margin-bottom: 20px; }
.empty { color: var(--dim); padding: 8px 0; }
.err { color: var(--bad); }
.ok { color: var(--ok); }
.hot { color: var(--hot); }
.dim { color: var(--dim); }
.up { text-transform: uppercase; }

/* the wall: frames under spotlights, a museum label under each */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 48px 32px; }
.work { display: grid; gap: 14px; text-decoration: none; position: relative; }
.work .spot { position: absolute; inset: -30px 0 auto; height: 120px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 228, 170, 0.18), rgba(255, 228, 170, 0) 70%); pointer-events: none; }
.work .easel { padding: 6px; border-width: 12px; }
.work:hover .easel { border-image-source: url("/img/ui/panel.png"); }
.placard { display: grid; gap: 2px; }
.placard .t { text-transform: uppercase; }
.placard .s { color: var(--dim); }
meter, progress { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 0; background: #222; display: block; }
progress::-webkit-progress-bar, meter::-webkit-meter-bar { background: #222; border: 0; border-radius: 0; height: 10px; }
progress::-webkit-progress-value { background: var(--ink); }
progress::-moz-progress-bar { background: var(--ink); }
meter::-webkit-meter-optimum-value { background: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: -10px 0 28px; }
.filters .key { min-height: 40px; padding: 2px 12px; }

/* a coin's room */
.coin { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px var(--gap); align-items: start; }
.coin .easel .canvas-box { cursor: zoom-in; }
.coin .tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lens { position: absolute; width: 240px; height: 240px; border: 2px solid var(--ink); pointer-events: none; display: none; z-index: 4; background: #000; }
.lens canvas { width: 100%; height: 100%; display: block; }
.side { display: grid; gap: 34px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.facts dt { color: var(--dim); text-transform: uppercase; }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-height: 420px; overflow: auto; }
.log li { display: grid; gap: 2px; }
.log .when { color: var(--dim); }
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.works a { display: grid; gap: 6px; text-decoration: none; }
.works canvas { width: 100%; aspect-ratio: 4/5; border: 2px solid var(--ink); display: block; }
.works a[aria-current="true"] canvas { border-color: var(--hot); }
.verify-out { margin-top: 10px; min-height: 24px; }

/* lots */
.lots { display: grid; gap: 40px; }
.lot { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.lot .easel { padding: 4px; border-width: 10px; }
.lot h3 { font-size: 32px; line-height: 40px; text-transform: uppercase; }
.lot .row { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 10px 0 14px; }
.lot .row b { font-weight: 400; color: var(--hot); }
.bidform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bidform .well { padding: 0; }
.bidform input { background: none; border: 0; outline: none; width: 9ch; padding: 8px 10px; font-size: 16px; }
.lot-note { margin-top: 8px; min-height: 24px; }
.section-title { font-size: 16px; text-transform: lowercase; color: var(--dim); margin: 48px 0 18px; border-bottom: 2px dotted var(--faint); padding-bottom: 6px; }

/* vernissage */
.day { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px var(--gap); align-items: start; }
.reel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 24px; }

/* the studio form */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px var(--gap); align-items: start; }
.studio form { display: grid; gap: 40px; }
.field { display: grid; gap: 8px; }
.field label, .field .lbl { text-transform: uppercase; }
.field .hint { color: var(--dim); }
.field .well input, .field .well select { width: 100%; background: none; border: 0; outline: none; padding: 4px 0; text-transform: uppercase; }
.painters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.painters label { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 8px 4px; border: 6px solid transparent; border-image: url("/img/ui/slot.png") 6 fill / 6px / 0 stretch; }
.painters input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.painters input:checked + label { border-image-source: url("/img/ui/slot-on.png"); }
.painters input:focus-visible + label { outline: 2px solid var(--hot); outline-offset: 2px; }
.painters img { width: 72px; height: 72px; }
.painters .what { color: var(--dim); font-size: 16px; line-height: 20px; }
.corner { display: flex; gap: 10px; flex-wrap: wrap; }
.corner input { position: absolute; opacity: 0; }
.corner input:checked + label { border-image-source: url("/img/ui/key-hot.png"); color: var(--bg); }
.pic { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.pic .key { white-space: normal; text-align: center; }
.studio > *, .coin > *, .day > *, .how > * { min-width: 0; }
.pic img { width: 96px; height: 96px; object-fit: cover; border: 2px solid var(--ink); image-rendering: auto; background: #111; }
.launch-out { min-height: 48px; }
.field .well input[name=twitter], .field .well input[name=telegram], .field .well input[name=website] { text-transform: none; }
.field .well textarea { width: 100%; background: none; border: 0; outline: none; padding: 4px 0; resize: vertical; font: inherit; color: inherit; }
.subject { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin: 16px 0 0; }
.subject img { width: 96px; height: 96px; object-fit: cover; border: 2px solid var(--ink); image-rendering: auto; }
.house .keys .key, .side .keys .key { min-width: 0; }
.file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file:focus-visible + label { outline: 2px solid var(--hot); outline-offset: 3px; }
.work { align-content: start; }

/* how */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px var(--gap); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; }
.steps li::before { counter-increment: s; content: counter(s); font-size: 32px; line-height: 40px; border: 2px solid var(--ink); display: grid; place-items: center; height: 56px; }
.steps h3 { text-transform: uppercase; margin-bottom: 4px; }
.split { width: 100%; border-collapse: collapse; }
.split td { padding: 8px 0; border-bottom: 2px dotted var(--faint); vertical-align: top; }
.split td:first-child { width: 6ch; color: var(--hot); }
.risk { color: var(--faint); margin-top: 40px; font-size: 16px; }

/* ---- smaller screens ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .screen { grid-template-columns: minmax(0, 1fr); }
  .right > .easel { width: 100%; justify-self: stretch; }
  .right .easel .canvas-box { height: auto; max-height: none; width: 100%; min-height: 0; }
  .coin, .day, .studio, .how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --gap: 16px; --edge: 10px; }
  .screen { padding-top: 22px; gap: 26px; }
  .premise { font-size: 16px; line-height: 24px; }
  .inventory ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .command .prompt, .command input { font-size: 16px; line-height: 32px; }
  .house .ticker { font-size: 16px; line-height: 24px; }
  .dialogue { grid-template-columns: 72px 1fr; margin: -48px 10px 0; gap: 12px; min-height: 0; }
  .dialogue .portrait { width: 72px; height: 72px; }
  .chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-head h2, .lot h3 { font-size: 16px; line-height: 24px; }
  .lot { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .painters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pic { grid-template-columns: 64px minmax(0, 1fr); }
  .pic img { width: 64px; height: 64px; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 32px 18px; }
  .steps li { grid-template-columns: 44px 1fr; }
  .steps li::before { font-size: 16px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}