/* landing.css - Holmstead's own few rules on top of the kit's landing layer (public/static/kit/).
   Only its own classes (hs-*): the frame classes are the kit's, and the live design (/design.css)
   sets the fonts, the accent and the sea behind the page. */

.hs-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--mx-font-logo, var(--font-sans));
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hs-brand:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 6px; }
/* In rem, so the mark follows the interface size like the name beside it (Chris, 2026-10-26). */
.hs-brand__mark { display: inline-flex; width: 1.625rem; height: 1.625rem; color: var(--c-accent); }
.hs-brand__mark svg { width: 100%; height: 100%; }

/* The game's own screenshots. */
.hs-shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--lp-hair-strong, rgba(255, 255, 255, 0.12));
  background: #0b1015;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.hs-shot img { display: block; width: 100%; height: auto; }
.hs-shot figcaption {
  padding: 0.75rem 1rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-ink-muted);
  background: var(--c-surface);
}
.hs-shot--hero { border-radius: 20px; }

.hs-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.hs-gallery .hs-shot { display: flex; flex-direction: column; }
.hs-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.hs-gallery figcaption { flex: 1; }
@media (max-width: 767.98px) {
  .hs-gallery { grid-template-columns: minmax(0, 1fr); }
  .hs-shot, .hs-shot--hero { border-radius: 14px; }
}

/* The kinds to build, running past in two rows (the kit's marquee): the chips' look, and the run kept
   left to right in a right-to-left page, where it would start off the tile. */
.hs-kinds { flex-direction: column; gap: 0.5rem; justify-content: center; align-items: flex-start; direction: ltr; }
.hs-kinds .lp-viz-marquee, .hs-kinds__copy { display: flex; gap: 0.375rem; }
.hs-kinds .lp-viz-marquee { padding-inline-end: 0.375rem; }
.hs-kind {
  flex: 0 0 auto;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.7188rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-ink-subtle);
  background: color-mix(in srgb, var(--c-ink) 6%, transparent);
}
.hs-kind:nth-child(3n + 1) { color: var(--c-accent); background: var(--c-accent-soft); }