/* Candleburrow splash page layout. Tokens and components live in brand.css. */

.wrap {
  width: min(100% - var(--s8), 60rem);
  margin-inline: auto;
}

/* ---- Hero: the door in the hill ---- */

.hero {
  position: relative;
  background: var(--night-deep);
  animation: lamp-up 1400ms ease-out both;
}
@keyframes lamp-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-scene {
  position: relative;
  width: min(100%, 60rem);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  overflow: hidden;
}
.hero-scene > img, .hero-scene > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scene > canvas { pointer-events: none; }

/* Soft edge so the scene sits into the page rather than ending at a hard line. */
.hero-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, var(--night-deep));
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  left: 5%;
  bottom: 9%;
  max-width: 40%;
  color: var(--parchment);
  text-shadow: 0 2px 0 var(--night-deep), 0 0 18px rgba(17, 13, 32, 0.9);
}
.hero-copy .brand { margin-bottom: var(--s3); }
.hero-copy .brand .mark { width: 72px; height: 72px; }
.hero-copy .wordmark { font-size: clamp(1.75rem, 4.5vw, 3rem); }
.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  margin: 0;
  max-width: none;
}

/* On narrow screens the words move under the picture, and the scene box grows
   to hold them: the painting keeps its own 16:9 and the canvas sits on it. */
@media (max-width: 720px) {
  .hero-scene { aspect-ratio: auto; min-height: 0; overflow: visible; }
  .hero-scene > img { position: static; height: auto; aspect-ratio: 16 / 9; min-height: 220px; }
  .hero-scene > canvas { inset: 0 0 auto; height: auto; aspect-ratio: 16 / 9; min-height: 220px; }
  .hero-scene::after { display: none; }
  .hero-copy {
    position: static;
    max-width: none;
    padding: var(--s6) var(--s4) 0;
    text-shadow: none;
    text-align: center;
  }
  .hero-copy .brand { justify-content: center; }
  .hero-copy .brand .mark { width: 48px; height: 48px; }
}

/* ---- Welcome ---- */

.welcome {
  padding: var(--s12) 0 var(--s4);
  text-align: center;
}
.welcome h2 { margin-bottom: var(--s4); }
.welcome p { margin-inline: auto; color: var(--parchment-dim); }
.welcome p strong { color: var(--parchment); font-weight: 600; }

/* ---- Games ---- */

.games { padding: var(--s4) 0 var(--s16); }
.games h2 { text-align: center; }
.game-list {
  list-style: none;
  margin: var(--s8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--s6);
}
.card-art {
  display: block;
  background: var(--night-deep);
  padding: var(--s4) var(--s4) 0;
}
.card-art img { width: 100%; height: auto; }
.card p { color: var(--parchment-dim); font-size: 1rem; margin-bottom: var(--s4); }

/* ---- Footer ---- */

.foot {
  background: var(--night-deep);
  border-top: 1px solid var(--dusk);
  padding: var(--s8) 0;
  color: var(--parchment-dim);
  font-size: 0.95rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.foot .brand { color: var(--parchment-dim); }