/* RH BTC brand palette taken straight from the artwork:
   #CCFF00 acid lime background, #050505 brush ink. */

:root {
  --lime: #ccff00;
  --lime-deep: #a8d400;
  --ink: #050505;
  --ink-soft: #1a1a1a;
  --paper: #f4f4ef;
  --muted: rgba(5, 5, 5, 0.62);
  --edge: 3px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --font: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* height:auto is required: the gallery <img> carry width/height attributes for
   layout stability, and max-width alone would keep the 500px attribute height
   while shrinking the width - squashing every machine. */
img { max-width: 100%; height: auto; display: block; }

/* The art is square. State it, so a slow-loading or mis-sized image can never
   reflow the grid or render off-ratio. */
.card img, .hero-art img, .split-art img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; }

/* faint CRT scanlines, nodding to the arcade cabinets */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.045) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

/* ─────────────────────────── nav ─────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: var(--lime);
  border-bottom: var(--edge);
}

.wordmark {
  font-family: var(--font);
  font-size: 26px;
  letter-spacing: -1px;
  font-weight: 900;
}
.wordmark .dot { color: var(--ink); opacity: 0.45; }
.wordmark.small { font-size: 20px; }

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--ink); }

/* ─────────────────────────── buttons ─────────────────────── */
.btn {
  font-family: var(--font);
  border: var(--edge);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;   /* some buttons are anchors now that they leave the site */
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn:active { transform: translate(3px, 3px); }

.btn-ghost {
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--ink); color: var(--lime); }
.btn-ghost:active { box-shadow: 1px 1px 0 var(--ink); }

/* ─────────────────────── mint reveal ─────────────────────── */
.reveal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  animation: revealIn 0.35s ease both;
}
.reveal[hidden] { display: none; }
@keyframes revealIn { from { opacity: 0; } to { opacity: 1; } }

.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.reveal-inner { position: relative; text-align: center; max-width: 1100px; width: 100%; }

.reveal-kicker {
  font-family: var(--font);
  color: var(--lime);
  letter-spacing: 4px;
  font-size: 14px;
  margin: 0 0 6px;
  animation: popIn 0.4s 0.1s ease both;
}
.reveal-title {
  font-family: var(--font);
  color: var(--paper);
  font-size: clamp(38px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 0 0 30px;
  animation: popIn 0.45s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.reveal-title b { color: var(--lime); }

.reveal-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 32px;
}

/* Each card is dealt in turn. The stagger is set inline as --i. */
.pull {
  width: min(260px, 76vw);
  border: 3px solid var(--lime);
  background: #111;
  opacity: 0;
  transform: translateY(28px) scale(0.86) rotate(var(--tilt, 0deg));
  animation: dealIn 0.5s cubic-bezier(0.2, 1.5, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * 0.55s + 0.35s);
}
@keyframes dealIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.86) rotate(var(--tilt, 0deg)); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.04) rotate(var(--tilt, 0deg)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--tilt, 0deg)); }
}

.pull img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-bottom: 3px solid var(--lime);
  background: #222;
}
.pull-meta { padding: 12px 14px; text-align: left; }
.pull-id { font-family: var(--font); font-size: 20px; color: var(--paper); }
.pull-traits {
  font-size: 12px;
  color: rgba(244, 244, 239, 0.6);
  font-weight: 600;
  line-height: 1.45;
  margin-top: 4px;
}
.pull-rare {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 8px;
  margin-bottom: 6px;
}

.reveal-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: popIn 0.4s 0.5s ease both;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* On a phone the point of the reveal is watching them land one after another.
   Stacked square cards push the second and third below the fold, so the whole
   effect happens off screen. Narrow screens get compact strips instead: art on
   the left, details on the right, all of them visible at once. */
@media (max-width: 720px) {
  .reveal { padding: 16px 14px; align-content: start; }
  .reveal-title { font-size: clamp(30px, 9vw, 44px); margin-bottom: 18px; }
  .reveal-cards { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }

  .pull {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: stretch;
    --tilt: 0deg;            /* a tilted strip just looks broken */
  }
  .pull img {
    width: 104px;
    height: 104px;
    flex: none;
    border-bottom: none;
    border-right: 3px solid var(--lime);
  }
  .pull-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    min-width: 0;
  }
  .pull-id { font-size: 18px; }
  .pull-traits { font-size: 11.5px; }
  .reveal-actions { flex-direction: column; }
  .reveal-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-kicker, .reveal-title, .pull, .reveal-actions { animation: none; opacity: 1; transform: none; }
  .confetti { display: none; }
}

/* ─────────────────────── wallet chooser ──────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 5, 5, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal-card {
  background: var(--paper);
  border: var(--edge);
  box-shadow: var(--shadow);
  padding: 24px;
  width: min(420px, 100%);
}
.modal-card h3 {
  font-family: var(--font);
  font-size: 24px;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.wallet-list { display: grid; gap: 10px; margin-bottom: 14px; }

.wallet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: var(--edge);
  background: #fff;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}
.wallet-option:hover { background: var(--lime); }
.wallet-option img { width: 26px; height: 26px; flex: none; }
.wallet-option .rdns {
  margin-left: auto;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
}

.modal-note { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 14px; }

/* ─────────────────────── wallet menu ─────────────────────── */
.wallet-menu { position: relative; }

.wallet-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 230px;
  background: var(--paper);
  border: var(--edge);
  box-shadow: var(--shadow);
  z-index: 30;
  display: grid;
}
.wallet-drop[hidden] { display: none; }

.wallet-addr {
  padding: 12px 14px;
  border-bottom: var(--edge);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  word-break: break-all;
  background: var(--lime);
}

.wallet-item {
  padding: 12px 14px;
  border: none;
  border-bottom: 2px solid rgba(5, 5, 5, 0.12);
  background: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: block;
  width: 100%;
}
.wallet-item:last-child { border-bottom: none; }
.wallet-item:hover { background: var(--lime); }
.wallet-item.danger { color: #a01010; }
.wallet-item.danger:hover { background: #a01010; color: var(--paper); }

.btn-ghost.connected { background: var(--ink); color: var(--lime); }

.btn-mint {
  width: 100%;
  padding: 22px 20px 18px;
  background: var(--ink);
  color: var(--lime);
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.btn-mint:hover { background: #000; box-shadow: 11px 11px 0 rgba(5, 5, 5, 0.85); }
.btn-mint:active { box-shadow: 4px 4px 0 var(--ink); }
.btn-mint[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow);
}
.btn-main {
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.5px;
}
.btn-sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  opacity: 0.72;
  letter-spacing: 0.2px;
}

/* ─────────────────────────── hero ────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}

/* Grid children default to min-width:auto, so the oversized h1 would force the
   text column wide and squash the art. Let them shrink to their fr share. */
.hero > *, .split > * { min-width: 0; }

.eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  display: inline-block;
  padding: 7px 12px;
  border: var(--edge);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

h1 {
  font-family: var(--font);
  margin: 0 0 18px;
  line-height: 0.86;
  letter-spacing: -3px;
}
/* Sized so the longest word (MACHINES, the widest glyph run) fits its grid
   column at every width instead of running under the artwork. */
h1 .line { display: block; font-size: clamp(52px, 8.2vw, 120px); }
h1 .outline {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

.lede {
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 46ch;
  margin: 0 0 28px;
  font-weight: 500;
}

.hero-art { position: relative; }
.hero-art img {
  border: var(--edge);
  box-shadow: var(--shadow);
  width: 100%;
}
.hero-badge {
  position: absolute;
  top: -14px;
  right: -10px;
  background: var(--paper);
  border: var(--edge);
  box-shadow: var(--shadow-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  transform: rotate(4deg);
}

/* ───────────────────────── mint card ─────────────────────── */
.mint-card {
  background: var(--paper);
  border: var(--edge);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  max-width: 620px;
}

/* ───────────────────────── sold out ──────────────────────── */
/* The mint is over, so the card that used to drive it now just states the
   fact and points at the secondary market. #mintUi stays in the DOM, hidden,
   so app.js can still bind to it and reveal it if the chain ever disagrees. */
.sold-card { display: grid; gap: 18px; }

.sold-stamp {
  justify-self: start;
  font-family: var(--font);
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: 0.02em;
  background: var(--ink);
  color: var(--lime);
  padding: 6px 14px 8px;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 rgba(5, 5, 5, 0.2);
}

.progress.done .progress-fill { animation: none; }

.sold-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--edge);
  padding-top: 16px;
  gap: 10px;
}
.sold-stats div { min-width: 0; text-align: center; }
.sold-stats b {
  display: block;
  font-family: var(--font);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
}
.sold-stats span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* OpenSea gets the lime treatment in the nav so it reads as the live action */
.nav-links a.nav-os {
  background: var(--lime);
  border: var(--edge);
  border-bottom: var(--edge);
  padding: 4px 10px;
}
.nav-links a.nav-os:hover { background: var(--ink); color: var(--lime); }

.gallery-cta { margin-top: clamp(24px, 4vw, 40px); text-align: center; }

/* ───────────────── allowlist countdown ───────────────────── */
.phase-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  background: var(--ink);
  color: var(--lime);
  border: var(--edge);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.phase-banner[hidden] { display: none; }

.phase-label {
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 1.6px;
}
.phase-note {
  font-size: 12px;
  font-weight: 600;
  color: rgba(204, 255, 0, 0.62);
}
.phase-timer {
  grid-row: 1 / 3;
  grid-column: 2;
  font-family: var(--font);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
/* Under a minute, make it obvious. */
.phase-banner.urgent { background: #a01010; color: #fff; border-color: #a01010; }
.phase-banner.urgent .phase-note { color: rgba(255, 255, 255, 0.7); }
.phase-banner.urgent .phase-timer { animation: pulse 1s steps(2, end) infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .phase-banner.urgent .phase-timer { animation: none; }
}

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.progress-label {
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 1.5px;
}
.progress-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-count b { font-size: 22px; }

.progress {
  position: relative;
  height: 34px;
  border: var(--edge);
  background: #fff;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    45deg,
    var(--lime) 0 12px,
    var(--lime-deep) 12px 24px
  );
  border-right: 3px solid var(--ink);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 2px),
    rgba(5, 5, 5, 0.28) calc(10% - 2px) 10%
  );
  pointer-events: none;
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 8px;
  gap: 16px;
}
.qty-label { font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.qty { display: flex; border: var(--edge); background: #fff; }
.qty-btn {
  width: 44px;
  border: none;
  background: var(--paper);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.qty-btn:hover { background: var(--lime); }
#qty {
  width: 76px;
  border: none;
  border-left: var(--edge);
  border-right: var(--edge);
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--body);
  background: #fff;
  -moz-appearance: textfield;
}
#qty::-webkit-outer-spin-button, #qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  min-height: 1.5em;
  word-break: break-word;
}
.btn-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 0 0;
  border: none;
  border-top: 2px solid rgba(5, 5, 5, 0.12);
  background: none;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link:hover { color: var(--ink); }

.status.err { color: #a01010; }
.status.ok { color: #146b14; }
.status a { color: inherit; }

/* ───────────────────────── ticker ────────────────────────── */
.ticker {
  border-top: var(--edge);
  border-bottom: var(--edge);
  background: var(--ink);
  color: var(--lime);
  overflow: hidden;
  padding: 12px 0;
}
.ticker-track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 20px;
  letter-spacing: 1px;
  animation: slide 26s linear infinite;
  width: max-content;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .progress-fill { transition: none; }
}

/* ───────────────────────── gallery ───────────────────────── */
.gallery { padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px); max-width: 1400px; margin: 0 auto; }

.section-head { margin-bottom: 32px; }
h2 {
  font-family: var(--font);
  font-size: clamp(36px, 6vw, 68px);
  margin: 0 0 8px;
  letter-spacing: -2px;
  line-height: 0.95;
}
.section-head p { margin: 0; font-weight: 600; max-width: 52ch; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.card {
  border: var(--edge);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.card img { border-bottom: var(--edge); }
.card-meta { padding: 10px 12px; }
.card-id { font-family: var(--font); font-size: 16px; }
.card-traits { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.card.rare { box-shadow: 4px 4px 0 var(--ink), 0 0 0 6px var(--ink); }
.card .flag {
  display: inline-block;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 7px;
  margin-bottom: 4px;
}
/* trait callouts sit lighter than the 1 of 1 flag so they do not compete */
.card .flag.tag { background: var(--lime); color: var(--ink); border: 1px solid var(--ink); }

/* ───────────────────────── origin ────────────────────────── */
/* Inverted to ink so the Bitcoin origin story reads as its own chapter
   rather than more of the lime mint page. */
.origin {
  background: var(--ink);
  color: var(--paper);
  border-top: var(--edge);
  border-bottom: var(--edge);
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 48px);
}
.origin-inner { max-width: 1100px; margin: 0 auto; }

.eyebrow.dark {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 4px 4px 0 var(--lime-deep);
  color: var(--ink);
}

.origin-title {
  color: var(--lime);
  font-size: clamp(34px, 5.4vw, 76px);
  margin: 0 0 28px;
}

.origin-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 40px;
  margin-bottom: 44px;
}
.origin-body p { margin: 0; font-weight: 500; color: rgba(244, 244, 239, 0.86); }
.origin-body strong { color: var(--lime); font-weight: 800; }
.origin-lede { font-size: 18px; color: var(--paper) !important; font-weight: 600 !important; }

.timeline {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  counter-reset: step;
}
.timeline li {
  border: 3px solid rgba(244, 244, 239, 0.28);
  padding: 18px;
  display: grid;
  gap: 6px;
  position: relative;
}
.timeline li.t-live {
  border-color: var(--lime);
  background: rgba(204, 255, 0, 0.07);
}
.t-when {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--lime);
}
.t-what { font-weight: 700; font-size: 16px; line-height: 1.3; }
.t-where { font-size: 13px; color: rgba(244, 244, 239, 0.55); font-weight: 600; }

/* Real inscription art from Bitcoin. It is pixel art at 400px, so it must be
   nearest-neighbour scaled - smoothing turns it to mush. */
.origin-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.origin-icon {
  width: 104px;
  height: 104px;
  border: 3px solid var(--lime);
  image-rendering: pixelated;
  flex: none;
}

/* The payoff line of the origin story. Sized like a headline because it is one. */
.origin-punch {
  font-family: var(--font);
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--paper);
  margin: 0 0 44px;
  padding-left: 20px;
  border-left: 8px solid var(--lime);
}
.origin-punch span { color: var(--lime); }

.ord-strip { margin-bottom: 40px; }
.ord-strip-head { margin-bottom: 16px; }
.ord-label {
  display: block;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 1.2px;
  color: var(--lime);
}
.ord-sub { font-size: 13.5px; color: rgba(244, 244, 239, 0.55); font-weight: 600; }

.ord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.ord-card {
  margin: 0;
  border: 3px solid rgba(244, 244, 239, 0.22);
  background: #111;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.ord-card:hover { border-color: var(--lime); transform: translateY(-3px); }
.ord-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-bottom: 3px solid rgba(244, 244, 239, 0.22);
}
.ord-card figcaption { padding: 9px 10px; display: grid; gap: 2px; }
.ord-name { font-family: var(--font); font-size: 13px; color: var(--paper); }
.ord-num { font-size: 11.5px; color: var(--lime); font-weight: 700; }
.ord-traits {
  font-size: 11px;
  color: rgba(244, 244, 239, 0.45);
  font-weight: 600;
  line-height: 1.3;
}

.ord-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px;
  margin: 0 0 36px;
  background: rgba(244, 244, 239, 0.22);
  border: 3px solid rgba(244, 244, 239, 0.22);
}
.ord-stats > div { background: var(--ink); padding: 16px 18px; }
.ord-stats dt {
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244, 244, 239, 0.55);
  font-weight: 700;
}
.ord-stats dd {
  margin: 4px 0 0;
  font-family: var(--font);
  font-size: 21px;
  color: var(--lime);
}

.origin-links { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-lime {
  padding: 16px 24px;
  font-size: 15px;
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  box-shadow: 6px 6px 0 var(--lime-deep);
  text-decoration: none;
  display: inline-block;
}
.btn-lime:hover { background: #fff; border-color: #fff; box-shadow: 6px 6px 0 var(--lime); }
.btn-lime:active { box-shadow: 2px 2px 0 var(--lime-deep); }
.btn-outline {
  padding: 16px 24px;
  font-size: 15px;
  background: transparent;
  color: var(--paper);
  border-color: rgba(244, 244, 239, 0.5);
  box-shadow: none;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover { border-color: var(--paper); background: rgba(244, 244, 239, 0.08); }

/* ───────────────────────── split ─────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  border-top: var(--edge);
}
.split-art img { border: var(--edge); box-shadow: var(--shadow); }
.split-copy h2 { margin-bottom: 16px; }
.ticks { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; font-weight: 600; }
.ticks li::before {
  content: "▸";
  position: absolute;
  left: 0;
  font-size: 20px;
  line-height: 1.2;
}
.fineprint { font-size: 13.5px; color: var(--muted); font-weight: 500; }

.statement-lede { font-size: 19px; font-weight: 600; }
.split-copy .eyebrow { margin-bottom: 18px; }

/* The blueberry punchline earns a bit of emphasis - it explains the rarest
   trait in the collection. */
.blueberry-note {
  border-left: 6px solid var(--ink);
  padding: 4px 0 4px 16px;
  margin: 22px 0;
  font-weight: 700;
}

.btn-dark {
  display: inline-block;
  padding: 15px 24px;
  font-size: 15px;
  background: var(--ink);
  color: var(--lime);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.btn-dark:hover { background: #000; box-shadow: 7px 7px 0 rgba(5, 5, 5, 0.8); }
.btn-dark:active { box-shadow: 1px 1px 0 var(--ink); }

/* ───────────────────────── faq ───────────────────────────── */
.faq {
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  border-top: var(--edge);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.faq-item {
  border: var(--edge);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.faq-item h3 { font-family: var(--font); margin: 0 0 8px; font-size: 19px; }
.faq-item p { margin: 0; font-size: 15px; font-weight: 500; }

/* ───────────────────────── footer ────────────────────────── */
.foot {
  border-top: var(--edge);
  background: var(--ink);
  color: var(--lime);
  padding: 36px clamp(16px, 4vw, 48px);
  display: grid;
  gap: 10px;
}
.foot .fineprint { color: rgba(204, 255, 0, 0.62); max-width: 70ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--lime); text-decoration: none; border-bottom: 2px solid rgba(204, 255, 0, 0.4); }
.foot-links a:hover { border-bottom-color: var(--lime); }
.foot p { margin: 0; font-size: 14px; font-weight: 600; word-break: break-all; }

/* ───────────────────────── responsive ────────────────────── */
@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 420px; }
  .split-art { max-width: 420px; }
  .nav-links { display: none; }
  h1 .outline { -webkit-text-stroke-width: 2px; }
}