/* Hero — #home section.
   Ported from design/kos-hp/project/styles.css lines 46-62 + Hero.jsx. */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  padding: 40px 0 80px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 8.4vw, 138px);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: var(--kos-coal);
  margin: 0;
}

/* Signature brick-red square stop after the headline */
.hero h1 .dot {
  display: inline-block;
  width: 0.28em; height: 0.28em;
  background: var(--kos-brick);
  border-radius: 2px;
  vertical-align: baseline;
  margin-left: 0.06em;
}

.hero .squiggle { width: 140px; height: 14px; margin: 22px 0 18px; display: block; }

.hero .lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--kos-coal);
  max-width: 380px;
  margin: 0 0 30px;
}

.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Vertical "Real Songs · Real Feeling" rail at the left edge */
.hero-rail {
  position: absolute;
  left: -40px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  transform-origin: center;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kos-coal);
  display: flex; align-items: center; gap: 14px;
}
.hero-rail .tick { width: 24px; height: 1px; background: var(--kos-coal); }

/* Right-side visual — sun + cobalt chip + photo + circular stamp */
.hero-visual { position: relative; aspect-ratio: 1 / 1.02; }

.hero-visual .sun {
  position: absolute;
  width: 58%; aspect-ratio: 1;
  left: -10%; top: -4%;
  background: var(--kos-brick);
  border-radius: 50%;
  filter: url(#rough-heavy);
  z-index: 1;
}

.hero-visual .bluechip {
  position: absolute;
  right: -8px; bottom: -6%;
  width: 38%; aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%);
  background: var(--kos-cobalt);
  z-index: 1;
}

.hero-visual .band {
  position: absolute;
  inset: 6% 4% 4% 6%;
  background: url('../assets/radek-hero.jpg') no-repeat;
  background-size: cover;
  background-position: center 18%;
  filter: grayscale(1) contrast(1.18);
  z-index: 3;
  box-shadow: 4px 4px 0 0 var(--kos-coal);
}

.hero-visual .stamp {
  position: absolute;
  right: 4%; bottom: 6%;
  width: 112px; height: 112px;
  z-index: 4;
  color: var(--kos-bone);
}
.hero-visual .stamp svg { position: absolute; inset: 0; }

/* Subtle pulse on the red sun (skipped if user prefers reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .sun { animation: kos-sun-pulse 8s ease-in-out infinite; }
}
@keyframes kos-sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}