/* MojoGuild — shared stylesheet.
   Palette is lifted from KRUG's design tokens (src/theme/colors.ts) so the studio
   site and the flagship game read as one family: warm paper, ink text, a single
   bright coral note. Everything is self-hosted — no web fonts, no CDN, no
   third-party requests — which keeps the site's own privacy story trivially
   simple and the page fast. */

:root {
  --paper: #f8f7f3;
  --paper-hi: #fffdf9;
  --surface: #fbf8f1;
  --surface-2: #f4f0e7;
  --ink: #28231b;
  --ink-strong: #17140f;
  --ink-muted: #5a523f;
  --faint: #897f6c;
  --line: #e4ddcd;
  --line-soft: #ece3d2;
  --coral: #f5463a;
  --coral-ink: #b23a2c;
  --coral-soft: #fbeee9;
  --amber: #e8a33e;
  --azure: #4e9bd6;
  --green: #3e8e5a;
  --shadow: rgba(107, 90, 60, 0.13);
  --shadow-lift: rgba(107, 90, 60, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17150f;
    --paper-hi: #1c1913;
    --surface: #221e17;
    --surface-2: #2a251c;
    --ink: #efe9dd;
    --ink-strong: #fbf8f1;
    --ink-muted: #b8ad97;
    --faint: #8d8371;
    --line: #35301f;
    --line-soft: #2c2718;
    --coral: #ff6152;
    --coral-ink: #ff8b7e;
    --coral-soft: #33201c;
    --amber: #f0b25c;
    --azure: #6fb0e2;
    --green: #5aa878;
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-lift: rgba(0, 0, 0, 0.55);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--coral-ink);
  text-decoration-color: color-mix(in srgb, var(--coral-ink) 35%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.brand:hover {
  color: var(--coral-ink);
}

.brand svg {
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.92rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--coral-ink);
}

/* ---------- hero ---------- */

.hero {
  padding: 5rem 0 3.5rem;
  background: linear-gradient(180deg, var(--paper-hi), var(--paper));
  border-bottom: 1px solid var(--line-soft);
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.hero p {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--ink-muted);
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- sections ---------- */

section {
  padding: 4rem 0;
}

section + section {
  border-top: 1px solid var(--line-soft);
}

h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.1rem;
  color: var(--ink-strong);
}

/* ---------- game cards ---------- */

.games {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.game {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.game:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--shadow-lift);
}

.game-art {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.game h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.game h3 a {
  color: var(--ink-strong);
  text-decoration: none;
}

.game h3 a:hover {
  color: var(--coral-ink);
}

.game p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.97rem;
  flex: 1;
}

.pill {
  align-self: flex-start;
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.pill--testing {
  color: var(--coral-ink);
  background: var(--coral-soft);
  border-color: color-mix(in srgb, var(--coral) 30%, transparent);
}

.pill--building {
  color: var(--ink-muted);
  background: var(--surface-2);
  border-color: var(--line);
}

/* ---------- prose (legal / support pages) ---------- */

/* Nested INSIDE .wrap rather than sharing its element: the reading measure is
   capped at 44rem, but the block still starts on the same left edge as the
   header's wordmark and the game cards, instead of centring itself in the wider
   container and floating out of alignment with everything above it. */
.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: 2.75rem;
  font-size: 1.3rem;
}

.prose h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
}

.prose p,
.prose li {
  color: var(--ink-muted);
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  color: var(--ink);
}

.updated {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--faint);
}

.callout {
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 0.7rem;
}

.callout p {
  margin: 0;
}

.banner {
  border-radius: 1rem;
  border: 1px solid var(--line);
  margin-bottom: 2rem;
}

/* ---------- contact form ---------- */

.contact-form {
  max-width: 32rem;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.form-group input,
.form-group textarea {
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--ink);
}

.form-group textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--coral);
}

.form-group.error input,
.form-group.error textarea {
  border-color: var(--coral);
}

.form-group .error-text {
  color: var(--coral-ink);
  font-size: 0.8rem;
}

.contact-form button {
  align-self: flex-start;
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--coral);
  color: #fff;
  cursor: pointer;
}

.contact-form button:hover {
  background: var(--coral-ink);
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-notification {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  display: none;
}

.form-notification.show {
  display: block;
}

.form-notification.success {
  background: color-mix(in srgb, var(--green) 15%, var(--surface));
  color: var(--green);
}

.form-notification.error {
  background: var(--coral-soft);
  color: var(--coral-ink);
}

/* ---------- footer ---------- */

.site-footer {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-hi);
  font-size: 0.9rem;
  color: var(--faint);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer a {
  color: var(--ink-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--coral-ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

@media (max-width: 30rem) {
  .site-nav {
    gap: 1rem;
    font-size: 0.85rem;
  }
}