/* krupis.com: page layout and components. Values follow design/reference.html from the handoff;
   tokens come from brand.css. No inline styles anywhere: the CSP allows styles from 'self' only. */

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 480px) { .wrap { padding-left: var(--space-4); padding-right: var(--space-4); } }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 10;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--carmine); color: var(--on-carmine); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--on-carmine); }

.display, .h2, .h3 { margin: 0; font-family: var(--font-display); }
.display { font-weight: 700; font-size: 64px; line-height: 64px; letter-spacing: -0.01em; }
.h2 { font-weight: 700; font-size: 40px; line-height: 44px; }
.h3 { font-weight: 600; font-size: 28px; line-height: 32px; }
@media (max-width: 480px) { .display { font-size: 44px; line-height: 48px; } }
.muted { color: var(--ink-muted); }
.lead { margin: 0; font-size: 18px; line-height: 28px; }
p { margin: 0; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-md); background: var(--carmine); color: var(--on-carmine);
  text-decoration: none; font-weight: 700;
}
.button:hover { background: var(--carmine-deep); color: var(--on-carmine); }
.button--big { min-height: 52px; padding: 0 var(--space-6); }

/* Header */
.site-header { padding-top: var(--space-6); padding-bottom: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-header .logo { display: block; line-height: 0; }
.site-header .logo img { height: 44px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 500;
}
.site-nav a:hover { color: var(--carmine); }

/* Hero */
.hero { padding-top: 48px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.hero-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-6); }
.eyebrow { margin: 0; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--carmine); }
.hero-intro { max-width: 520px; font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-2); }
.hero-tile {
  flex: 1 1 360px; max-width: 520px; aspect-ratio: 1 / 1; border-radius: var(--radius-lg);
  background: var(--flax); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
.hero-tile-mark { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-8); }
.hero-tile-mark img { width: 64%; height: auto; }

/* The fir-branch ornament: chevrons growing outward from a centre diamond. The left run is the
   right one mirrored, so the chevrons always start cleanly at the middle. Decorative only. */
.fir { display: flex; align-items: center; }
.fir-run { display: block; flex: 1 1 0; min-width: 0; }
.fir-run--left { transform: scaleX(-1); }
.fir-centre { display: block; flex: 0 0 auto; }
.band { background: var(--flax); }

/* Games */
.games { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.section-head .lead b { color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
@media (max-width: 400px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.card-art { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; background: var(--flax); }
.card-body { padding: var(--space-6); display: flex; flex-direction: column; gap: 12px; }
.tag {
  align-self: flex-start; padding: var(--space-1) 10px; border-radius: var(--radius-sm);
  background: var(--carmine-soft); color: var(--carmine);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: var(--space-2); }
.card--soon {
  background: none; border: 2px dashed var(--line-strong); padding: var(--space-8);
  align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: 360px;
}
.card--soon img { width: 72px; height: auto; opacity: 0.35; }

/* About */
.about { background: var(--surface-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 64px; }
.about-text { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-4); }
.toad { flex: 1 1 420px; display: flex; gap: var(--space-6); align-items: flex-start; }
.toad-tile {
  flex: 0 0 auto; width: 112px; height: 112px; border-radius: var(--radius-lg); background: var(--carmine);
  display: flex; align-items: center; justify-content: center;
}
.toad-tile img { width: 72px; height: auto; }
.toad-text { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 480px) { .toad { flex-direction: column; } }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-carmine); }
.footer-inner { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.footer-inner img { height: 36px; width: auto; }
.footer-notes { display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--on-ink-muted); }

/* 404 */
.lost { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); text-align: center; padding: var(--space-8); }
.lost img { width: 120px; height: auto; }