/* Monochrome greige palette inspired by the salon's reference photography. */
:root {
  --ink: #242424;
  --taupe: #777775;
  --rose: #c9c9c7;
  --sand: #d8d8d6;
  --cream: #f2f2f0;
  --white: #fafaf8;
}

body,
.subpage {
  background: var(--cream);
  color: var(--ink);
}

.site-header,
body:not(.home) .site-header {
  color: var(--ink);
  background: rgba(242, 242, 240, .95);
  border-bottom-color: rgba(36, 36, 36, .12);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .03);
}

.nav-reserve,
.fixed-reserve {
  background: #4b4b49;
  color: #f5f5f3;
  border-color: #4b4b49;
}

.hero-new {
  background: #d8d8d6;
}

.hero-copy-new h1 em,
.vertical-word,
.philosophy-image figcaption,
.philosophy-copy > p:not(.label),
.design-copy > p:not(.label),
.space-panel > p:not(.label),
.menu-lines p,
.menu-note,
.manifesto > div,
.values p,
.menu-category div > p,
.gallery-page figcaption span,
.salon-story > div > p {
  color: #727270;
}

.circle-link,
.menu-lines,
.menu-lines article,
.access-layout dl,
.access-layout dl div,
.values,
.menu-category,
.menu-category li,
.salon-story li,
.access-page dl,
.access-page dl div {
  border-color: #c8c8c5;
}

.signature,
.site-footer,
.page-hero.dark,
.desktop-nav.open {
  background: #4b4b49;
  color: #f2f2f0;
}

@media (min-width: 761px) {
  .hero-new {
    grid-template-columns: 50% 50%;
  }

  .hero-copy-new {
    padding-right: 1.5vw;
  }

  .hero-copy-new h1 {
    font-size: clamp(42px, 4.1vw, 64px);
    letter-spacing: .015em;
  }

  .hero-copy-new h1 span,
  .hero-copy-new h1 em {
    display: inline-block;
    white-space: nowrap;
  }
}

.signature-head h2 i,
.sig-card > span,
.values b,
.salon-story li b,
.cat-no,
.menu-category small {
  color: #bebebb;
}

.label.light,
.sig-card p,
.site-footer p,
.footer-nav a {
  color: #c8c8c5;
}

.signature-cards,
.sig-card,
.footer-action > a,
.footer-bottom {
  border-color: #4d4d4b;
}

.menu-new,
.page-hero,
.page-hero.rose,
.page-hero.salon-hero,
.page-hero.access-hero,
.page-reserve,
.closing {
  background: #d5d5d3;
}

.space-panel,
.guide-intro,
.menu-category,
.salon-story > div {
  background: #fafaf8;
}

.menu-category {
  border-color: #d5d5d2;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .035);
}

.menu-category li strong {
  color: #3d3d3b;
}

.footer-nav p,
.footer-action p,
.footer-bottom a,
.footer-bottom p {
  color: #929290;
}

.footer-nav a:hover {
  color: #ffffff;
}

@media (max-width: 760px) {
  .site-header,
  body:not(.home) .site-header {
    background: rgba(242, 242, 240, .97);
    color: #242424;
  }

  .hero-copy-new {
    background: linear-gradient(0deg, rgba(28, 28, 28, .72), transparent 70%);
  }

  .hero-copy-new h1 em {
    color: #eeeeec;
  }

  .desktop-nav.open .nav-reserve {
    background: #eeeeec;
    color: #242424;
  }
}