/* Eugene Music — home page only (hero + home-specific blocks) */

/* The hero is the one dark band on a light site. Rather than override every
   component inside it, the design tokens are re-declared here — so buttons,
   chips, stars and the proof strip all pick up their dark variants for free. */
.hero{
  --ink:#140A02;
  --ink-2:#1E1006;
  --ink-3:#2B1A0C;
  --line:#402A14;
  --brass:#E3B457;
  --brass-lo:#A97C29;
  --brass-hi:#FBE6A6;
  --gold-1:#FBE6A6;
  --gold-2:#E3B457;
  --gold-3:#A97C29;
  --gold-graphic:#E3B457;
  --cream:#F5EBDA;
  --cream-dim:#C6B49A;
  --focus:#FBE6A6;

  position:relative;
  /* the header is transparent over this section, so the hero has to sit BEHIND
     it — otherwise the light nav text lands on the light page background */
  margin-top:calc(-1 * var(--head-h));
  min-height:clamp(600px,92svh,900px);
  display:flex;align-items:center;
  overflow:hidden;
  color:var(--cream);
  border-bottom:1px solid #3A2610;

  background:
    radial-gradient(66% 74% at 76% 38%,rgba(227,180,87,.20),transparent 64%),
    radial-gradient(52% 60% at 14% 100%,rgba(169,124,41,.14),transparent 72%),
    linear-gradient(178deg,#22130A,var(--ink) 74%);
}
.hero h1{color:var(--cream)}
.hero .btn--ghost{border-color:#5A4020;color:var(--cream);background:rgba(245,235,218,.04)}
.hero .btn--ghost:hover{border-color:var(--brass);color:var(--brass-hi);background:rgba(227,180,87,.10)}
.hero .chip{background:rgba(245,235,218,.05);border-color:#4A3116}
.hero .proof b{color:var(--cream)}

/* faint engraved rules — texture without an object, fading out behind the copy */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.75;
  background-image:repeating-linear-gradient(115deg,rgba(227,180,87,.055) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(78% 96% at 82% 34%,#000,transparent 70%);
  mask-image:radial-gradient(78% 96% at 82% 34%,#000,transparent 70%);
}

.hero__inner{
  position:relative;z-index:2;width:100%;
  padding-block:calc(var(--head-h) + clamp(2.5rem,8vh,5rem)) clamp(3rem,7vh,5rem);
}
.hero__copy{max-width:44rem}
.hero h1{margin-bottom:var(--s3)}
.hero .lead{max-width:36rem}
.hero .btn-row{margin-top:var(--s5)}
.hero .proof{margin-top:var(--s4)}

.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s5);
}

@media(max-width:480px){
  .hero{min-height:0}
  .hero h1{font-size:2.15rem}
  .hero__inner{padding-block:calc(var(--head-h) + var(--s3)) var(--s5)}
  .hero .btn-row{margin-top:var(--s4)}
  .hero .btn{width:100%}
  .hero__meta{margin-top:var(--s4)}
}

/* scroll hint */
.hero__hint{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font:600 .7rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);opacity:.6;
}
.hero__hint span{width:1px;height:2.2rem;background:linear-gradient(var(--brass),transparent);
  animation:hintPulse 2.4s var(--ease) infinite}
@keyframes hintPulse{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:900px){.hero__hint{display:none}}

/* value row */
.values{display:grid;gap:var(--s4)}
@media(min-width:760px){.values{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6)}}
.value h3{margin-bottom:.6rem}
.value p{color:var(--cream-dim)}

/* visit block */
.visit{display:grid;gap:var(--s5)}
@media(min-width:900px){.visit{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}

/* subtle engraved rule used between home sections */
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}