/* ============================================================
   NextByte — long-horizon gyms
   Full-screen voxel world with a minimal text overlay.
   Source Serif 4 (display) · Figtree (text)
   ============================================================ */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #F2F0E9;
  --ink: #211F1A;
  --ink-2: #5E5A50;
  --line: #DBD7C9;
  --clay: #C15F3C;
  --clay-dark: #A84E2E;

  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Figtree", system-ui, sans-serif;
}

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

html, body { height: 100%; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

#world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* ---------- overlay ---------- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 40px 26px;
  pointer-events: none;
}
.overlay a, .overlay button { pointer-events: auto; }

.top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.top-left { max-width: min(46vw, 600px); }
.tagline {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 520;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 9vh 0 0;
}
.wordmark { display: block; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.contact-btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: #FFF; background: var(--clay);
  border: 0; border-radius: 100px;
  padding: 10px 22px; cursor: pointer;
}
.contact-btn:hover { background: var(--clay-dark); }

/* ---------- contact dialog ---------- */

.contact {
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #FAF9F4;
  color: var(--ink);
  padding: 36px 36px 32px;
  width: min(92vw, 440px);
}
.contact::backdrop { background: rgba(33, 31, 26, 0.35); }
.contact h2 {
  font-family: var(--font-serif); font-weight: 520;
  font-size: 28px; margin-bottom: 6px;
}
.contact-sub { font-size: 15px; color: var(--ink-2); margin-bottom: 22px; }
.contact label {
  display: block; font-size: 13.5px; font-weight: 600;
  margin-bottom: 16px;
}
.contact input, .contact textarea {
  display: block; width: 100%;
  margin-top: 6px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: #FFF;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}
.contact input:focus, .contact textarea:focus {
  outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay);
}
.contact-actions { display: flex; gap: 12px; margin-top: 22px; }
.send-btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: #FFF; background: var(--clay);
  border: 0; border-radius: 100px;
  padding: 11px 26px; cursor: pointer;
}
.send-btn:hover { background: var(--clay-dark); }
.send-btn[disabled] { opacity: 0.6; cursor: default; }
.cancel-btn {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  color: var(--ink-2); background: none;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 11px 22px; cursor: pointer;
}
.cancel-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.contact-done { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--clay-dark); }



/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .overlay { padding: 20px 22px; }
  .top-left { max-width: 90vw; }
  .tagline { font-size: 22px; }
}