/* GlyphArt: one stylesheet for every page. Terminal readout on a dark grid. */
:root {
  --bg: #070807;
  --panel: #0e110e;
  --line: #233024;
  --fg: #d7e6d5;
  --dim: #7d8f7b;
  --accent: #39ff6a;
  --amber: #ffb547;
  --blue: #6ab8ff;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.6 var(--mono); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

header.site, main, footer.site {
  max-width: 1160px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* header */
header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 16px 14px; border-bottom: 1px solid var(--line); }
.logo { color: var(--fg); text-decoration: none; font-size: 16px; letter-spacing: 0.2em; display: inline-flex; gap: 8px; align-items: center; }
.logo .cursor { color: var(--accent); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .logo .cursor, .dot { animation: none; } }
header.site nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
header.site nav a { color: var(--dim); text-decoration: none; padding: 2px 0; }
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--accent); }

main { display: grid; gap: 40px; padding-block: 28px 56px; }
footer.site { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 18px 32px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }

h1, h2, h3 { font-weight: normal; margin: 0; }
.label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.label::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.small { color: var(--dim); font-size: 12px; margin: 0; }

.btn {
  display: inline-block; background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  font: inherit; font-size: 13px; padding: 8px 12px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }

/* status badges */
.badge { display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 6px; border: 1px solid currentColor; }
.badge.live { color: var(--accent); }
.badge.upcoming { color: var(--amber); }
.badge.dev { color: var(--blue); }
.badge.secondary { color: var(--dim); }

/* home: hero */
.hero { display: grid; gap: 22px; }
.ascii { margin: 0; color: var(--accent); font-size: clamp(6px, 2vw, 16px); line-height: 1.05; overflow: hidden; }
.ascii span { color: var(--line); }
.bio { max-width: 68ch; }
.bio p { margin: 0 0 10px; }
.bio p:first-child { font-size: 16px; }

/* home: now minting */
.nowbox { border: 1px solid var(--accent); background: var(--panel); padding: 18px; }
.nowbox .label { color: var(--accent); }
.nowbox .label + .label, .nowbox ul + .label { margin-top: 22px; }
.dot { width: 8px; height: 8px; background: var(--accent); display: inline-block; animation: blink 1.2s steps(1) infinite; }
.now, .soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.now { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.now-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 480px) { .now-item { grid-template-columns: 88px minmax(0, 1fr); } }
.now-item h3 { font-size: 18px; letter-spacing: 0.06em; }
.now-item h3 a { color: var(--fg); text-decoration: none; }
.now-item h3 a:hover { color: var(--accent); }
.now-item p { margin: 2px 0 8px; }
.now-item .small { margin: 0 0 4px; }
.now-item .btn { margin-top: 6px; }
.now-thumb { display: block; aspect-ratio: 1; border: 1px solid var(--line); background: #000; overflow: hidden; }
.now-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soon { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.soon a { display: grid; gap: 6px; color: var(--fg); text-decoration: none; }
.soon img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); background: #000; display: block; }
.soon a:hover img { border-color: var(--amber); }
.soon .soon-name { letter-spacing: 0.08em; }
.soon .badge { justify-self: start; }

/* home: collection cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.card { display: grid; grid-template-rows: auto 1fr; color: var(--fg); text-decoration: none; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.card:hover { border-color: var(--accent); }
.card .thumb { aspect-ratio: 1; background: #000; overflow: hidden; border-bottom: 1px solid var(--line); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardtext { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.cardtext p { margin: 0; color: var(--dim); font-size: 13px; }
.cardtext .badge { justify-self: start; margin-top: 4px; }
.cardhead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cardhead h3 { font-size: 15px; letter-spacing: 0.06em; }

/* collection page */
.crumbs { margin: 0; font-size: 12px; color: var(--dim); letter-spacing: 0.06em; }
.crumbs a { color: var(--dim); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 820px) { .intro { grid-template-columns: minmax(0, 1fr); } }
.feature { position: sticky; top: 16px; border: 1px solid var(--line); background: #000; }
@media (max-width: 820px) { .feature { position: static; } }
.feature img { display: block; width: 100%; height: auto; }
.about h1 { font-size: clamp(24px, 5vw, 36px); letter-spacing: 0.08em; line-height: 1.2; }
.about .tagline { color: var(--accent); margin: 6px 0 18px; }
.about > p { max-width: 64ch; margin: 0 0 12px; }

.mint { margin-top: 24px; border: 1px solid var(--line); background: var(--panel); padding: 16px; display: grid; gap: 14px; }
.mint h2 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.meta dt { color: var(--dim); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; padding-top: 2px; }
.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.meta code { font: inherit; }
.tba { color: var(--dim); }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px; border: 1px solid var(--accent); background: var(--bg); }
.cta p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.cta strong { font-size: 16px; letter-spacing: 0.06em; color: var(--accent); font-weight: normal; }
.cta span { color: var(--dim); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.cta a { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); padding: 10px 18px; letter-spacing: 0.08em; text-decoration: none; white-space: nowrap; }
.cta a:hover { background: transparent; color: var(--accent); }
.cta.muted { border-color: var(--amber); }
.cta.muted strong { color: var(--amber); }
.cta.muted a { background: transparent; color: var(--amber); border-color: var(--amber); }
.cta.muted a:hover { background: var(--amber); color: var(--bg); }
@media (max-width: 420px) { .cta a { width: 100%; text-align: center; } }
.links { display: flex; flex-wrap: wrap; gap: 8px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
@media (max-width: 520px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.piece { display: block; padding: 0; border: 1px solid var(--line); background: #000; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.piece:hover { border-color: var(--accent); }
.piece img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* lightbox */
.box { border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 12px; max-width: min(96vw, 900px); max-height: 96vh; }
.box::backdrop { background: rgba(0, 0, 0, 0.85); }
.box img { display: block; max-width: 100%; max-height: calc(96vh - 90px); margin: 0 auto; }
.boxbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--dim); }
.boxbar span { flex: 1; text-align: center; min-width: 120px; }

/* live gallery: iframes running the token code */
.stage { position: relative; aspect-ratio: 1; background: #000; border: 1px solid var(--line); overflow: hidden; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.stage.big { width: min(88vw, calc(96vh - 90px), 860px); }
.live { margin: 0; display: grid; gap: 6px; min-width: 0; }
.live:hover .stage { border-color: var(--accent); }
.live figcaption { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.live figcaption .traits { flex: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live figcaption .btn { padding: 3px 8px; font-size: 11px; }
.hint { margin: -6px 0 14px; }
@media (max-width: 520px) { .live figcaption .traits { display: none; } }

/* on-chain gallery: placeholders until a token's metadata arrives, token info in the lightbox */
.piece .wait { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dim); font-size: 12px; }
.tokeninfo { display: grid; gap: 8px; margin-top: 10px; max-width: min(88vw, 860px); }
.tokeninfo .links { display: flex; flex-wrap: wrap; gap: 8px; }
.stage.big .wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }

/* GIF download: progress bar and the hidden frame that renders the piece */
.progress { height: 4px; background: var(--panel); border: 1px solid var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.btn:disabled { opacity: 0.7; cursor: progress; }
.capture { position: fixed; left: -10000px; top: 0; width: 400px; height: 400px; border: 0; visibility: hidden; }