:root {
  --bg: #08080a;
  --ink: #f4f2ee;
  --ink-dim: #8f8f98;
  --ink-faint: #55555d;
  --accent: #ff5a1f;
  --line: rgba(255, 255, 255, 0.09);
  --live: #3ecf8e;
  --building: #f5a623;
  --paused: #6a6a72;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- background layers ------------------------------------------------ */
#field { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }

.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- stage ---------------------------------------------------------- */
.stage {
  position: relative; z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center; align-items: center;
  gap: clamp(1.4rem, 4vh, 3rem);
  padding: clamp(1rem, 5vh, 3.5rem) clamp(1rem, 5vw, 3.5rem);
  overflow: hidden;
}

/* ---- central title ------------------------------------------------- */
.title {
  align-self: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(3rem, 17vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
.title .ltr {
  display: inline-block;
  will-change: transform, text-shadow, opacity;
}

/* ---- project buttons: single line by design, wrap only if forced --- */
.links {
  --count: 2;
  --btn-min: 120px;                 /* floor: buttons never shrink past this */
  --btn-max: 260px;                 /* ceiling: buttons never grow past this */
  width: min(1080px, 96vw);
  display: flex; flex-flow: row wrap;
  justify-content: center; align-items: stretch;
  gap: clamp(0.4rem, 1vw, 0.7rem);
}
.row {
  --i: 0;
  /* share the line, but stay between --btn-min and --btn-max;
     once the row can't fit them all at --btn-min, flex-wrap drops to a new line */
  flex: 1 1 var(--btn-min);
  min-width: var(--btn-min);
  max-width: var(--btn-max);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  /* padding + type ease down as --count climbs, clamped top and bottom */
  padding: clamp(0.5rem, calc(0.4rem + 2.6rem / var(--count)), 1rem)
           clamp(0.7rem, calc(0.5rem + 4rem / var(--count)), 1.4rem);
  font-family: var(--mono);
  font-size: clamp(0.72rem, calc(0.58rem + 3.4rem / var(--count)), 1rem);
  line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line);
  transition: background 0.16s ease, color 0.16s ease,
              border-color 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  animation: row-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 45ms + 260ms);
}
.row__name { color: inherit; overflow: hidden; text-overflow: ellipsis; }
.row__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--paused); flex: none; }
.row__dot[data-state="live"] { background: var(--live); }
.row__dot[data-state="building"] { background: var(--building); }

.row:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.row.is-active {
  color: var(--bg); background: var(--accent);
  border-color: var(--accent); transform: translateY(-2px);
}
.row.is-active .row__dot { background: var(--bg); }
.row:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.row--empty {
  padding: 0.55rem 0.8rem; font-family: var(--mono); font-size: 0.8rem;
  color: var(--ink-faint); border: 1px solid var(--line);
}

/* ---- hint --------------------------------------------------------- */
.hint {
  align-self: center;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-faint); text-align: center; min-height: 1em;
}
.hint b { color: var(--ink-dim); font-weight: 500; }

@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .row { animation: none; }
}