/* =====================================================
   style.css — the visual design
   Palette taken straight from the creatures themselves:
   toy red, cobalt blue, sunshine yellow, porcelain white.
   ===================================================== */

/* Reusable colour names — define once, use everywhere */
:root {
  --red:    #e63329;
  --blue:   #1e63d0;
  --yellow: #f5b800;
  --ink:    #1c1c1c;   /* near-black text */
  --paper:  #f6f5f2;   /* warm gallery-wall white */
  --muted:  #8a877f;   /* quiet grey for small text */
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

/* ===== HERO ===== */
.hero {
  text-align: center;
  padding: 5rem 2rem 3.5rem;
  /* A thick playful stripe along the very top of the page */
  border-top: 8px solid var(--red);
}

.hero-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.25em;   /* spaced-out caps = museum label feel */
  font-size: 0.75rem;
  color: var(--muted);
}

.hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(2.2rem, 6vw, 3.6rem);  /* scales with window size */
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-tagline {
  max-width: 520px;
  margin: 0 auto;
  color: var(--muted);
}

/* The three colour dots under the title */
.hero-dots { margin-top: 2rem; }
.dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;       /* a square with fully round corners = a circle */
  margin: 0 5px;
}
.dot-red    { background: var(--red); }
.dot-blue   { background: var(--blue); }
.dot-yellow { background: var(--yellow); }

/* ===== GALLERY GRID ===== */
.gallery {
  display: grid;
  /* As many 300px-minimum columns as fit — the grid reflows by itself */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
}

/* One creature card */
.card {
  background: #ffffff;
  border-radius: 18px;              /* soft toy-like corners */
  overflow: hidden;                 /* keeps the image inside the corners */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Cards lift slightly when you hover over them */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;    /* keeps every image a perfect square */
  object-fit: cover;      /* crop to fill rather than squash */
}

.card-body { padding: 1.2rem 1.4rem 1.5rem; }

.card-number {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.card h2 {
  margin: 0.3rem 0 0.5rem;
  font-size: 1.25rem;
}

.card-lore {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ===== ABOUT ===== */
.about {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  text-align: center;
}

.about h2 { font-size: 1.2rem; }
.about p  { color: var(--muted); }

/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid #e4e2dc;
}