/* rig — tokens first. every value below comes from these scales. */
:root {
  --void: #000000;
  --panel: #090a09;
  --line: #23261f;
  --line-lit: #3a4034;
  --bone: #d8d4c6;
  --dim: #a3a196;
  --dimmer: #76756a;
  --amber: #ff8a3c;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px;
  --t-xl: 24px; --t-2xl: 32px;
  --t-hero: clamp(34px, 5.6vw, 60px);
  --t-title: clamp(30px, 4vw, 42px);

  --display: "Instrument Serif", Georgia, serif;
  --pixel: "Silkscreen", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  margin: 0;
  padding: 0 var(--s5);
  background: var(--void);
  color: var(--bone);
  font-family: var(--mono);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1100px; margin: 0 auto; }

/* ---- rules ---- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- header ---- */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0 var(--s3);
}

.mark {
  font-family: var(--pixel);
  font-size: var(--t-2xl);
  letter-spacing: 1px;
  color: var(--bone);
  text-decoration: none;
}

.mark span { color: var(--dimmer); }

.state {
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.led {
  width: 8px; height: 8px;
  background: var(--amber);
  display: inline-block;
}

/* ---- index body ---- */
.body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s9);
  padding: var(--s8) 0 var(--s7);
  align-items: start;
}

h1 {
  font-family: var(--display);
  font-size: var(--t-hero);
  line-height: 1.04;
  font-weight: 400;
  margin: 0 0 var(--s5);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede { max-width: 58ch; color: var(--bone); }

.lede:last-of-type { margin-bottom: var(--s7); }

p { margin: 0 0 var(--s4); }

.muted { color: var(--dim); }

/* ---- the rig sprite ---- */
.stage {
  margin: var(--s5) 0 var(--s8);
  display: flex;
  justify-content: flex-start;
}

/* Width and height are set in px by rig.js so the scale stays a whole number.
   Any CSS sizing here re-stretches the art off-grid. */
#rig-canvas {
  display: block;
  image-rendering: pixelated;
}

/* ---- waitlist ---- */
form { max-width: 440px; }

label {
  display: block;
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--dim);
  margin: 0 0 var(--s2);
}

.field { display: flex; gap: var(--s2); }

input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--void);
  border: 1px solid var(--line-lit);
  color: var(--bone);
  font-family: var(--mono);
  font-size: var(--t-md);
  border-radius: 0;
}

input[type="email"]::placeholder { color: var(--dimmer); }
input[type="email"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

button {
  min-height: 44px;
  padding: 0 var(--s4);
  background: var(--amber);
  color: var(--void);
  border: 1px solid var(--amber);
  font-family: var(--pixel);
  font-size: var(--t-xs);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
}

button:hover { background: var(--bone); border-color: var(--bone); }
button:active { background: var(--dim); border-color: var(--dim); }
button:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
button[disabled] { background: var(--dimmer); border-color: var(--dimmer); color: var(--void); cursor: default; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note {
  font-size: var(--t-sm);
  color: var(--dim);
  margin: var(--s3) 0 0;
  min-height: 22px;
}

.note[data-tone="bad"] { color: var(--bone); }
.note[data-tone="good"] { color: var(--amber); }

/* ---- entries ---- */
.side h2, .sheet h2 {
  font-family: var(--pixel);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--dim);
  margin: 0 0 var(--s3);
  letter-spacing: 0.5px;
}

.side + .side, .entries + h2 { margin-top: var(--s8); }

.entries { margin: 0 calc(var(--s3) * -1); }

.entry {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3);
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--bone);
  text-decoration: none;
}

a.entry:hover { color: var(--amber); background: var(--panel); }
a.entry:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.entry .n { color: var(--dimmer); }
.entry .name { flex: 1; }
.entry .tag { color: var(--dim); }
a.entry .tag { color: var(--amber); }

.entry.locked { color: var(--dimmer); }
.entry.locked .n { color: var(--dimmer); }

/* ---- network status ---- */
.stat {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--dim);
}

.stat b { font-weight: 400; color: var(--dimmer); }
.stat b.on { color: var(--amber); }

/* ---- footer ---- */
.foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s6);
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--dimmer);
}

.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--bone); }

/* ---- sub pages ---- */
.sheet { padding: var(--s8) 0 var(--s7); max-width: 720px; }

.sheet h1 { font-size: var(--t-title); margin-bottom: var(--s7); }

.sheet section { margin: 0 0 var(--s7); }

.sheet h3 {
  font-family: var(--pixel);
  font-size: var(--t-md);
  font-weight: 400;
  margin: 0 0 var(--s3);
  color: var(--bone);
}

.sheet p { max-width: 66ch; }

.spec { border-top: 1px solid var(--line); }

.spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--dim);
}

.spec div span:last-child { color: var(--bone); text-align: right; }
.spec .cls span:last-child { color: var(--dimmer); }

.fine {
  font-size: var(--t-sm);
  color: var(--dim);
  border-left: 1px solid var(--line-lit);
  padding-left: var(--s4);
  max-width: 66ch;
}

.back {
  font-family: var(--pixel);
  font-size: var(--t-xs);
  color: var(--dim);
  text-decoration: none;
}

.back:hover { color: var(--amber); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  body { padding: 0 var(--s4); }
  .body { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s6) 0 var(--s7); }
  .mark { font-size: var(--t-xl); }
  .stage { padding: var(--s4); }
  .field { flex-direction: column; }
  button { width: 100%; }
}