/* ===== Landing page — index.html ===== */

main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 2rem 1.5rem 0;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.4rem;
}

h1{
  font-family:'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--paper);
}

h1 em{
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

.tagline{
  margin: 1.6rem 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--slate);
  max-width: 34ch;
  line-height: 1.6;
}

.skyline-wrap{
  width:100%;
  max-width: 1100px;
  margin: 3.2rem auto 0;
  padding: 0 1rem;
}

.skyline-wrap svg{ width:100%; height:auto; display:block; }

.skyline-path{
  fill:none;
  stroke: var(--brass-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
  opacity: 0.9;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1) 0.3s;
}

/* JS adds .is-ready to <body> once the page has loaded; see js/index.js */
body.is-ready .skyline-path{
  stroke-dashoffset: 0;
}

.ground-line{
  stroke: rgba(184,138,78,0.35);
  stroke-width: 1;
}

@media (prefers-reduced-motion: reduce){
  .skyline-path{ transition: none; stroke-dashoffset: 0; }
}