/* Slow Horizons mint page.
   North star: a small gallery with the artist in the room. The Game Boy is the artist; the studio window
   shows its real output; every piece gets a wall label. Neutral walls so each piece's palette carries the colour.
   One accent (ink) fills buttons; amber/green/red are state only. Two motions: a phase lands, a palette is applied. */

@font-face { font-family: "Archivo"; src: url(fonts/Archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --wall: #f5eede;          /* gallery wall = Game Boy Labs drafting paper */
  --wall-2: #ede5d2;
  --ink: #17181b;
  --ink-2: #4a4c52;
  --muted: #74726b;
  --rule: #d8cfbb;
  --studio: #121315;        /* the studio window */
  --studio-2: #1c1d20;
  --studio-ink: #e8e6e0;
  --studio-muted: #8e9096;
  --live: #e3a03a;          /* state only */
  --ok: #3e8a57;
  --bad: #c0463b;
  --lcd-0: #d5d8cb; --lcd-1: #9aa08e; --lcd-2: #5a5f51; --lcd-3: #1f221c;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pixel: "Silkscreen", "Courier New", monospace;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 16px/1.55 var(--sans); font-stretch: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code { font: 13px var(--mono); word-break: break-all; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.testnet { background: var(--ink); color: var(--wall); text-align: center; font: 500 13px/1.4 var(--sans); padding: 7px var(--gutter); }

/* header */
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; padding: 18px var(--gutter); max-width: 1320px; margin: 0 auto; }
.crumbs { margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.crumbs span { color: var(--muted); }
.lab { font: 400 13px var(--pixel); letter-spacing: .05em; text-decoration: none; color: var(--ink-2); }
.lab:hover { color: var(--ink); text-decoration: underline; }
.mark { font: 750 22px/1 var(--sans); font-stretch: 84%; letter-spacing: -0.01em; text-decoration: none; }
.status { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--sans); color: var(--ink-2); min-width: 0; }
.status span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lamp { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rule); box-shadow: inset 0 -1px 1px rgba(0,0,0,.25); }
.lamp[data-state="live"] { background: var(--live); }
.lamp[data-state="ok"] { background: var(--ok); }
.lamp[data-state="bad"] { background: var(--bad); }
.lamp[data-state="idle"] { background: #a9aaa4; }

.btn { border: 0; cursor: pointer; border-radius: 0; font-weight: 600; font-stretch: 95%; transition: background-color .15s, color .15s; }
.btn-quiet { background: transparent; border: 1px solid var(--ink); padding: 9px 14px; font-size: 14px; }
.btn-quiet:hover { background: var(--ink); color: var(--wall); }
.btn-main { width: 100%; background: var(--ink); color: var(--wall); padding: 16px 18px; font-size: 17px; }
.btn-main:hover:not(:disabled) { background: #000; }
.btn-main:disabled { background: var(--wall-2); color: var(--muted); cursor: default; }

main { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) 80px; }

/* studio + label */
.studio-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 0; margin-top: 8px; border: 1px solid var(--ink); }
.studio { background: var(--studio); color: var(--studio-ink); padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.studio-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.channels { display: inline-flex; border: 1px solid #3a3c41; border-radius: 0; overflow: hidden; }
.channels button { background: transparent; border: 0; padding: 7px 12px; font: 500 13px var(--sans); color: var(--studio-muted); cursor: pointer; }
.channels button[aria-selected="true"] { background: var(--studio-ink); color: var(--studio); }
.stamp { font: 400 12px/1 var(--pixel); letter-spacing: 0; color: var(--studio-muted); text-transform: uppercase; }
.screen-wrap { position: relative; background: var(--studio-2); display: grid; place-items: center; padding: clamp(12px, 2vw, 26px); border-radius: 2px; }
#screen { display: block; width: min(100%, 640px, max(220px, calc((100svh - 540px) * 160 / 144)));   /* screen, phases and both machine panels fit in one viewport */ aspect-ratio: 160 / 144; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--lcd-0); }
.camera { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; background: var(--studio-2); }
.camera p { max-width: 42ch; margin: 0; color: var(--studio-muted); font-size: 15px; text-align: center; }

.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.phases li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phases li::before { content: ""; height: 3px; background: #2f3135; border-radius: 1px; }
.phases li[data-done]::before { background: var(--studio-ink); }
.phases li[data-now]::before { background: var(--live); }
.phases span { font: 500 11px/1.2 var(--sans); color: var(--studio-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phases li[data-done] span, .phases li[data-now] span { color: var(--studio-ink); }
.heartbeat { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 400 13px/1.4 var(--sans); color: var(--studio-muted); }
.heartbeat .lamp { align-self: center; transition: background-color .25s; }
.heartbeat .lamp[data-state="beat"] { background: var(--studio-ink); transition: none; }
.heartbeat b { font: 600 15px/1 var(--mono); color: var(--studio-ink); font-variant-numeric: tabular-nums; }
.machine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mpanel { background: #0b0c0d; border: 1px solid #26282c; border-radius: 2px; padding: 9px 11px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mhead { margin: 0; display: flex; justify-content: space-between; gap: 8px; font: 500 11px/1.2 var(--sans); color: var(--studio-muted); }
.mhead b { font: 500 11px var(--mono); color: var(--studio-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code, .bus { margin: 0; height: 9.6em; overflow: hidden; font: 400 11px/1.2 var(--mono); color: #9fa3a9; white-space: pre; }
.bus { color: #c7cbb8; font-variant-numeric: tabular-nums; }
.code .now { color: var(--studio-ink); }
.studio-foot { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--studio-muted); font-variant-numeric: tabular-nums; }

.label { background: var(--wall); padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 22px; border-left: 1px solid var(--ink); min-width: 0; }
.label-no { margin: 0; font: 800 clamp(40px, 5vw, 64px)/0.95 var(--sans); font-stretch: 84%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.label-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; font-size: 15px; }
.label-list dt { color: var(--muted); }
.label-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.label-list .mono { font: 14px var(--mono); }
.label-list .later { color: var(--muted); }
.watching { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.swatch { display: inline-flex; vertical-align: -2px; margin-right: 7px; outline: 1px solid rgba(0,0,0,.15); }
.swatch i { width: 11px; height: 13px; }

.commission { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rule); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price { font: 700 26px/1 var(--sans); font-stretch: 90%; font-variant-numeric: tabular-nums; }
.wait { font-size: 14px; color: var(--ink-2); }
.meter { height: 2px; background: var(--rule); margin: -4px 0 14px; }   /* pieces taken of the edition (after 21st 'usage' meters) */
.meter > span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s ease; }
@media (prefers-reduced-motion: reduce) { .meter > span { transition: none; } }
.fine { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 60ch; }

/* sections */
.block { margin-top: 80px; border-top: 1px solid var(--ink); padding-top: 18px; }
.kicker { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; }
.block h2 { margin: 0 0 22px; font: 750 clamp(26px, 3.2vw, 36px)/1.08 var(--sans); font-stretch: 86%; letter-spacing: -0.01em; text-wrap: balance; }
.empty { color: var(--muted); margin: 14px 0 0; }

.board { width: 100%; border-collapse: collapse; font-size: 15px; }
.board th { text-align: left; font: 500 13px var(--sans); color: var(--muted); padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink); }
.board td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; font-variant-numeric: tabular-nums; }
.board .r { text-align: right; padding-right: 0; }
.board .no { font: 700 15px var(--mono); }
.board .who { font: 14px var(--mono); }
.board .st { display: inline-flex; align-items: center; gap: 8px; }
.board tr.more td { color: var(--muted); padding-top: 14px; border-bottom: 0; }
.board tr.me td { background: var(--wall-2); }

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 28px; }
.piece { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.piece img { display: block; width: 100%; height: auto; aspect-ratio: 160 / 144; image-rendering: pixelated; background: var(--wall-2); }
.piece .cap { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
.piece .cap b { font: 700 15px var(--sans); font-stretch: 90%; }
.piece .cap .t { color: var(--ink-2); grid-column: 1 / -1; }
.piece .cap .d { font: 13px var(--mono); color: var(--muted); text-align: right; }
.piece .acts { display: flex; gap: 16px; font-size: 14px; }
.piece .acts button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.mine { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.mine-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mine-row img, .mine-row .ph { width: 96px; aspect-ratio: 160 / 144; image-rendering: pixelated; background: var(--wall-2); display: block; }
.mine-row p { margin: 0; }
.mine-row .when { font: 13px var(--mono); color: var(--muted); }
.mine-row .acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 14px; }
.mine-row .acts button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.proof { max-width: 820px; }
.proof-lead { margin: 0 0 20px; font-size: 17px; color: var(--ink-2); max-width: 66ch; }
.evidence { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: ev; display: grid; gap: 14px; }
.evidence li { counter-increment: ev; position: relative; padding-left: 38px; max-width: 70ch; }
.evidence li::before { content: counter(ev); position: absolute; left: 0; top: 0; font: 600 14px/1.6 var(--mono); color: var(--muted); }

.foot { max-width: 1320px; margin: 0 auto; padding: 28px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); display: grid; gap: 6px; }
.foot p { margin: 0; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--wall); padding: 12px 16px; border-radius: 0; font-size: 14px; max-width: min(92vw, 520px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }

/* gallery sheet */
.piece img { cursor: zoom-in; }
.sheet { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--wall); color: var(--ink); overflow: auto; }
.sheet::backdrop { background: rgba(18, 19, 21, .72); }
.sh-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--wall); border-bottom: 1px solid var(--rule); }
.sh-top h2 { margin: 0; font: 800 30px/1 var(--sans); font-stretch: 84%; letter-spacing: -0.01em; }
.sh-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 22px; }
.sh-art { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#shScreen { width: 100%; aspect-ratio: 160 / 144; image-rendering: pixelated; background: var(--wall-2); }
#shBanner { width: 100%; aspect-ratio: 432 / 144; image-rendering: pixelated; background: var(--wall-2); }
.sh-acts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.sh-acts button, .sh-acts a { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sh-cap { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.sh-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sh-info h3 { margin: 8px 0 0; font: 700 15px var(--sans); font-stretch: 90%; }
.sh-desc { margin: 0; font-size: 17px; line-height: 1.5; }

@media (max-width: 900px) {
  #screen { width: 100%; max-width: 640px; }   /* phones: the screen fills its column; no viewport-height sizing */
  .top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding-top: 14px; padding-bottom: 12px; }
  .status { grid-column: 1 / -1; grid-row: 2; }
  .studio-row { grid-template-columns: minmax(0, 1fr); }
  .label { border-left: 0; border-top: 1px solid var(--ink); padding: 22px 20px; }
  .studio { padding: 14px 14px 16px; }
  .screen-wrap { padding: 10px; }
  /* on a phone the commission sits right under the screen */
  .label { display: flex; flex-direction: column; }
  .commission { order: -1; margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
  .phases span { display: none; }
  .board th:nth-child(4), .board td:nth-child(4) { display: none; }
  .block { margin-top: 56px; }
  .crumbs { flex-direction: column; gap: 4px; }
  .crumbs span { display: none; }
  .lab { font-size: 11px; }
  .mine-row { grid-template-columns: 72px minmax(0, 1fr); }
  .mine-row img, .mine-row .ph { width: 72px; }
  .mine-row .acts { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 16px; }
  .machine { grid-template-columns: minmax(0, 1fr); }
  .sh-body { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 20px; }
  .sh-top { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* queue tools: search and pages */
.qtools { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.qfind { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.qfind input { width: min(420px, 82vw); font: 14px var(--mono); padding: 10px 12px; border: 1px solid var(--ink); background: var(--wall); color: var(--ink); border-radius: 0; }
.qfind input::placeholder { color: var(--muted); }
.qcount { margin: 0; font-size: 14px; color: var(--ink-2); }
.qpages { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 14px; }
.qpages button { font: inherit; padding: 8px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0; }
.qpages button:disabled { opacity: .35; cursor: default; }
.qpages span { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* the collector's place in line, under the price */
.myplace { border: 1px solid var(--ink); padding: 16px 18px; display: grid; gap: 4px; }
.mp-head { margin: 0; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.mp-no { margin: 0; font: 750 40px/1 var(--sans); font-stretch: 84%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mp-line { margin: 4px 0 10px; color: var(--ink-2); font-size: 15px; }
.myplace .btn { justify-self: start; padding: 8px 14px; border: 1px solid var(--ink); }
#queue tr.me td { background: var(--wall-2); font-weight: 600; }

/* wallet picker */
.wpick { border: 1px solid var(--ink); padding: 18px; background: var(--wall); color: var(--ink); width: min(360px, calc(100vw - 32px)); border-radius: 0; }
.wpick::backdrop { background: rgba(20, 20, 24, .35); }
.wp-head { margin: 0 0 12px; font-weight: 700; font-size: 18px; }
.wpick button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin: 0 0 8px; font: 500 16px var(--sans); background: transparent; color: var(--ink); border: 1px solid var(--rule); cursor: pointer; text-align: left; border-radius: 0; }
.wpick button:hover { border-color: var(--ink); }
.wpick img { width: 24px; height: 24px; }
.wp-dot { width: 24px; height: 24px; background: var(--wall-2); display: inline-block; }
.wpick .wp-cancel { justify-content: center; border: 0; color: var(--muted); margin: 4px 0 0; }

/* header nav: Gallery next to the wallet button */
.topnav { display: flex; gap: 22px; }
.topnav a { font-weight: 600; text-decoration: none; padding: 8px 2px; border-bottom: 1px solid transparent; }
.topnav a:hover { border-color: var(--ink); }

/* the full gallery */
.gview { max-width: 1320px; margin: 0 auto; padding: 24px var(--gutter) 40px; }
.g-head h1 { margin: 0; font: 750 clamp(40px, 6vw, 76px)/1 var(--sans); font-stretch: 84%; letter-spacing: -0.02em; }
.g-sub { margin: 12px 0 28px; color: var(--ink-2); font-size: 17px; }
.g-tools { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.g-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; flex: 1 1 auto; }
.g-filter, .g-sort { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.g-filter select, .g-sort select { font: 14px var(--sans); padding: 9px 10px; border: 1px solid var(--rule); background: var(--wall); color: var(--ink); border-radius: 0; max-width: 190px; }
.g-filter.on select { border-color: var(--ink); font-weight: 600; }
.g-clear { font: 600 14px var(--sans); background: none; border: 0; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 9px 0; }
.g-count { color: var(--muted); font-size: 14px; margin: 14px 0; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 22px; }
.g-piece { margin: 0; }
.g-piece button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-piece img { display: block; width: 100%; height: auto; aspect-ratio: 160 / 144; image-rendering: pixelated; background: var(--wall-2); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.g-piece button:hover img { transform: translateY(-3px); }
.g-piece figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.g-piece figcaption span { color: var(--ink-2); }
.g-ftoggle { display: none; }
.g-more { display: flex; justify-content: center; margin-top: 30px; }
@media (max-width: 900px) {
  .top { grid-template-columns: minmax(0, 1fr) auto auto; }
  .topnav { gap: 14px; }
  .g-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .g-tools { gap: 12px; }
  .g-ftoggle { display: block; font: 600 15px var(--sans); padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; }
  .g-tools:not(.open) .g-filters, .g-tools:not(.open) .g-sort { display: none; }
  .g-filter select, .g-sort select { max-width: 44vw; }
  .qfind input { width: 100%; }
}

.pending { margin: 0; padding: 12px 14px; border: 1px solid var(--ink); background: var(--wall-2); font-size: 15px; }