/* Apply Angel's editorial wordmark typeface throughout the site. */
:root {
  --serif: var(--caslon);
  --sans: var(--caslon);
  --mono: var(--caslon);
}

.eyebrow,
.hero-note,
.service-list span,
.quote-by,
.contact-detail,
footer p {
  font-weight: 400;
  letter-spacing: .08em;
}

/* Angel's supplied hero image. */
.hero-image {
  background-image: url('assets/angel-cohan-hero-clean.jpg');
  background-position: center 57%;
}

.about-image {
  background: center / cover no-repeat url('assets/about-beach-portrait.jpg');
  height: clamp(320px, 45vw, 580px);
  margin-top: 70px;
}

/* Light navigation across the homepage hero. */
body:not(.store-page):not(.contact-page) .site-header .site-nav a {
  color: #fff;
  font-weight: 300;
  opacity: .82;
}

body:not(.store-page):not(.contact-page) .site-header .site-nav .nav-cta {
  border-color: #fff;
}

body:not(.store-page):not(.contact-page) .site-header .wordmark {
  font-size: 76px;
}

@media (min-width: 721px) {
  body:not(.store-page):not(.contact-page) .site-header .site-nav {
    left: 5.5vw;
    position: absolute;
    top: 105px;
  }

  body:not(.store-page):not(.contact-page) .site-header .site-nav a {
    color: var(--ink);
    opacity: 1;
  }

  body:not(.store-page):not(.contact-page) .site-header .site-nav .nav-cta {
    border-color: var(--ink);
  }
}

@media (max-width: 720px) {
  body:not(.store-page):not(.contact-page) .site-header .site-nav.open a {
    color: var(--ink);
  }

  body:not(.store-page):not(.contact-page) .site-header .site-nav.open .nav-cta {
    border-color: var(--ink);
  }

  body:not(.store-page):not(.contact-page) .site-header .wordmark {
    font-size: 42px;
  }
}

/* Homepage navigation sits over the hero image. */
.site-header:not(.page-header):not(.store-header) .site-nav a {
  color: #fff;
}

.site-header:not(.page-header):not(.store-header) .site-nav .nav-cta {
  border-color: #fff;
}

@media (max-width: 720px) {
  .site-header:not(.page-header):not(.store-header) .site-nav.open a {
    color: var(--ink);
  }

  .site-header:not(.page-header):not(.store-header) .site-nav.open .nav-cta {
    border-color: var(--ink);
  }
}


.editorial-image {
  background-image: url('assets/angel-approach-web.jpg');
  background-position: center;
}