/* Home — Marquee.
   Sits flush below the dark-pine hero and reads as a continuation of
   it. Uses --pine-deep so the bg matches the hero's gradient endpoint
   exactly (the hero fades pine → pine-deep over 78%, so by the time
   it hits the marquee both colors line up).

   A subtle sage-300 hairline at the top gives the band a clean
   "section break" without a heavy border, and a left/right gradient
   mask softens the edges so items appear to glide in/out instead of
   popping at the viewport boundary.

   Fixed pixel height so .hero--home can use calc(100vh - var) to
   exactly fill the viewport on desktop with hero + marquee together. */

.marquee{
  position:relative;
  background:var(--pine-deep);
  color:#cfe2dd;
  height:62px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:none;
  border-bottom:none;
}

/* Thin sage-300 hairline at the top — visual transition out of the hero. */
.marquee::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(
    to right,
    transparent 0,
    rgba(156,196,189,.18) 30%,
    rgba(156,196,189,.18) 70%,
    transparent 100%
  );
  pointer-events:none;
  z-index:2;
}

/* Refine the track items — Fraunces italic in soft sage-tint for an
   elegant section punctuation rather than loud signage. */
.marquee .marquee-track{align-items:center}
.marquee .marquee-track span{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-weight:400;
  font-size:1.05rem;
  color:#cfe2dd;
  padding:0 32px;
  letter-spacing:.005em;
  display:inline-flex;
  align-items:center;
  gap:32px;
}
.marquee .marquee-track span::after{
  content:"✦";
  font-style:normal;
  color:var(--sage-300);
  opacity:.7;
  font-size:.62rem;
  margin-left:4px;
}

@media(max-width:680px){
  .marquee{height:54px}
  .marquee .marquee-track span{
    font-size:.96rem;
    padding:0 24px;
    gap:24px;
  }
}