/* ============================================================
   GumbiGames — gumbigames.net
   Palette pulled from the game's own art: candlelit parchment,
   tarnished gold, and the slime green of the studio logo.
   ============================================================ */

@font-face {
  font-family: 'Almendra';
  src: url('assets/fonts/Almendra-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Almendra';
  src: url('assets/fonts/Almendra-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --ink:        #0d0b09;
  --ink-2:      #141110;
  --ink-3:      #1b1715;
  --parchment:  #ece3cd;
  --muted:      #b3a68c;
  --gold:       #d9ab3f;
  --gold-soft:  #f0cf82;
  --slime:      #4fae5b;
  --slime-soft: #8ed69a;
  --rule:       rgba(217,171,63,.22);

  --display: 'Almendra', 'Iowan Old Style', Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  font-size: clamp(1rem, .4vw + .95rem, 1.09rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gold-soft); text-decoration-color: rgba(240,207,130,.35); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--slime-soft); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--gold); color: #1a1408; padding: .7rem 1.1rem; font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--pad); }
.wrap.narrow { width: min(760px, 100%); }
.center { text-align: center; }

/* ---------------- Nav ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(13,11,9,.86);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--parchment); }
.brand-mark {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 5px;
  background: linear-gradient(150deg, var(--slime-soft), var(--slime) 55%, #1d5a26);
  box-shadow: 0 0 14px rgba(79,174,91,.45), inset 0 0 6px rgba(255,255,255,.35);
}
.brand-text { font-family: var(--display); font-size: 1.35rem; letter-spacing: .02em; }
.brand-text em { font-style: normal; color: var(--gold); }

.nav-links { display: flex; gap: clamp(.7rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: .93rem;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.nav-links a:hover { color: var(--gold-soft); }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.bars, .bars::before, .bars::after {
  display: block; width: 22px; height: 2px; background: var(--parchment); content: '';
  transition: transform .25s ease;
}
.bars::before { transform: translateY(-7px); }
.bars::after { transform: translateY(5px); }

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(13,11,9,.97); border-bottom: 1px solid var(--rule);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 24rem; }
  .nav-links li { border-top: 1px solid rgba(217,171,63,.12); }
  .nav-links a { display: block; padding: .95rem var(--pad); }
}

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: clamp(560px, 92svh, 900px); display: grid; align-items: end; isolation: isolate; }
.hero-art {
  position: absolute; inset: 0; z-index: -2;
  background: #0d0b09 url('assets/hero.jpg') center 38% / cover no-repeat;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 25%, transparent 20%, rgba(13,11,9,.55) 70%, rgba(13,11,9,.92) 100%),
    linear-gradient(to top, var(--ink) 4%, rgba(13,11,9,.72) 32%, rgba(13,11,9,.15) 62%, rgba(13,11,9,.5) 100%);
}
.hero-inner { padding-block: clamp(3rem, 9vh, 6rem) clamp(3.5rem, 11vh, 7rem); max-width: 46rem; }

.eyebrow {
  margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.hero-title {
  font-family: var(--display); font-weight: 700; margin: 0 0 1rem; line-height: .92;
  font-size: clamp(3.6rem, 13vw, 8rem); color: var(--gold-soft);
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 44px rgba(217,171,63,.28);
}
.hero-title .sub {
  display: block; font-size: clamp(1.05rem, 3.2vw, 1.9rem); letter-spacing: .2em;
  text-transform: uppercase; color: var(--parchment); text-shadow: 0 2px 10px rgba(0,0,0,.8);
  margin-top: .5rem; font-weight: 400;
}
.lede { font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem); color: #ded3ba; max-width: 34rem; margin: 0 0 1.9rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.btn {
  display: inline-block; padding: .82rem 1.7rem; border-radius: 3px; text-decoration: none;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #241a05; border-color: #8a6a1c;
  box-shadow: 0 6px 20px rgba(217,171,63,.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(217,171,63,.42); color: #241a05; }
.btn-ghost { border-color: rgba(236,227,205,.4); color: var(--parchment); background: rgba(13,11,9,.35); }
.btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: translateY(-2px); }

.status { margin: 0; font-size: .87rem; color: var(--muted); letter-spacing: .03em; }
.dot {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem;
  background: var(--slime-soft); box-shadow: 0 0 10px var(--slime);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* ---------------- Bands ---------------- */
.band { padding-block: clamp(3.5rem, 9vw, 6.5rem); position: relative; }
.band.alt { background: var(--ink-2); border-block: 1px solid var(--rule); }
.band.world { background:
  linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 45%, var(--ink) 100%); }

.kicker {
  margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--slime-soft); font-weight: 700;
}
.band h2 {
  font-family: var(--display); font-weight: 700; color: var(--gold-soft);
  font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.12; margin: 0 0 1.8rem; max-width: 22ch;
}
.band.follow h2, .center h2 { max-width: none; }

.two-col { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1.1fr; }
  .two-col.reverse > .prose { order: 2; }
}
.prose p { margin: 0 0 1.05rem; color: #d6cab0; }
.prose strong { color: var(--parchment); }
.pull {
  border-left: 2px solid var(--gold); padding-left: 1.1rem; margin-top: 1.6rem;
  font-family: var(--display); font-size: 1.2rem; color: var(--gold-soft); font-style: italic;
}

.shot { margin: 0; }
.shot img {
  width: 100%; border-radius: 4px; border: 1px solid var(--rule);
  box-shadow: 0 22px 50px rgba(0,0,0,.6);
}
.shot.wide { margin-top: clamp(2rem, 5vw, 3.5rem); }
figcaption {
  margin-top: .7rem; font-size: .85rem; color: var(--muted); text-align: center; letter-spacing: .02em;
}

.center-lede { max-width: 54ch; color: #d6cab0; margin: 0 0 2.2rem; }
.center .center-lede, .band.follow .center-lede { margin-inline: auto; text-align: center; }

/* ---------------- Feature grid ---------------- */
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 700px)  { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-grid li {
  background: linear-gradient(180deg, rgba(236,227,205,.05), rgba(236,227,205,.015));
  border: 1px solid var(--rule); border-radius: 5px; padding: 1.5rem 1.35rem;
  transition: transform .22s ease, border-color .22s ease;
}
.feature-grid li:hover { transform: translateY(-4px); border-color: rgba(217,171,63,.5); }
.feature-grid h3 {
  font-family: var(--display); font-size: 1.3rem; color: var(--gold-soft); margin: 0 0 .55rem;
}
.feature-grid p { margin: 0; font-size: .95rem; color: #cabfa6; }

/* ---------------- Cast ---------------- */
.cast-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.card-person {
  margin: 0; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  background: linear-gradient(180deg, #17130f, #0f0c0a);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card-person:hover {
  transform: translateY(-5px); border-color: rgba(217,171,63,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}
.card-person img { width: 100%; aspect-ratio: 52/64; object-fit: cover; object-position: 50% 12%; }
.card-person figcaption { text-align: left; padding: .8rem .9rem 1rem; margin: 0; }
.card-person strong { display: block; font-family: var(--display); font-size: 1.06rem; color: var(--gold-soft); }
.card-person span { display: block; font-size: .82rem; color: var(--muted); margin-top: .2rem; line-height: 1.45; }
.card-person.villain { border-color: rgba(190,60,50,.35); }
.card-person.villain:hover { border-color: rgba(220,80,64,.7); }
.card-person.villain strong { color: #e8846f; }

/* ---------------- Rarity row ---------------- */
.rarity-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  max-width: 900px;
}
.rarity-row li { text-align: center; }
.rarity-row img { width: 100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); transition: transform .22s ease; }
.rarity-row li:hover img { transform: translateY(-6px) scale(1.03); }
.rarity-row span {
  display: block; margin-top: .55rem; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------------- Signup ---------------- */
.band.follow { background: var(--ink-3); border-block: 1px solid var(--rule); text-align: center; }
.band.follow .kicker, .band.follow h2 { text-align: center; }
.band.follow h2 { margin-inline: auto; }
.signup { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: .9rem; }
.signup input {
  flex: 1 1 16rem; max-width: 22rem; padding: .82rem 1rem; border-radius: 3px;
  border: 1px solid rgba(236,227,205,.28); background: rgba(0,0,0,.35); color: var(--parchment);
  font: inherit; font-size: .95rem;
}
.signup input::placeholder { color: #7d7361; }
.signup input:focus { border-color: var(--gold); }
.signup button { cursor: pointer; font-family: inherit; }
.fineprint { font-size: .8rem; color: #7d7361; margin: 0; }

/* ---------------- Studio ---------------- */
.studio-logo {
  width: min(560px, 100%); margin: 0 auto 1.6rem; border-radius: 4px;
  border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; padding: 0; margin: 2rem 0 0; }
.social a {
  text-decoration: none; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: .2rem;
}
.social a:hover { color: var(--gold-soft); border-bottom-color: var(--gold); }

/* ---------------- Footer ---------------- */
.foot { background: #080706; border-top: 1px solid var(--rule); padding-block: 2.4rem; text-align: center; }
.credits { margin: 0 0 .5rem; font-size: .87rem; color: var(--muted); }
.credits strong { color: var(--gold-soft); font-family: var(--display); font-size: 1rem; }
.legal { margin: 0; font-size: .78rem; color: #5f584c; }

/* ---------------- Reveal ---------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }