:root {
  --ink: #232724;
  --paper: #f8f9f6;
  --line: #c9cec5;
  --muted: #596153;
  --mineral: #f3ead4;
  --control-border: #858b80;
  --alert: #8b3427;
  --ink-pressed: #41493b;
  --media-well: #ffffff;
  --image-bed: #e6e7e3;
  --white: #ffffff;
  /* Gold is the accent: deep enough to carry text on paper (5.67:1), a lighter
     leaf for marks on ink (6.26:1 there), and a hairline weight for rules and
     underlines, which only need 3:1. */
  --gold: #7c5f16;
  --gold-leaf: #c9a227;
  --gold-line: #a67c1f;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  flex-shrink: 0;
}
.salon-header {
  min-height: 90px;
  padding: 16px 40px;
  display: grid;
  grid-template-columns: minmax(54px, 1fr) minmax(0, auto) minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.salon-header > *,
.salon-menu > li,
.salon-footer > * {
  min-width: 0;
}
.seal-link {
  display: block;
  width: 54px;
}
.salon-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.salon-header .salon-menu {
  justify-content: center;
}
.salon-header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.header-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: end;
  min-width: 44px;
  min-height: 44px;
  font-size: 13px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.header-cart-count {
  margin-inline-start: 5px;
  font-variant-numeric: tabular-nums;
}
.header-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  max-width: 100%;
}
.header-account {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: end;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}
.header-search {
  display: flex;
  flex: 1 1 180px;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  min-height: 44px;
}
.header-search input[type="search"] {
  flex: 1 1 10rem;
  width: 160px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.header-search input[type="search"]::placeholder {
  color: var(--muted);
  opacity: 1;
}
.header-search input[type="search"]:focus {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.header-search button {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px;
  overflow-wrap: anywhere;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.header-search button:hover {
  text-decoration: underline;
}
.salon-header a:hover,
.salon-footer a:hover {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
}
/* Where you are now is marked in gold, not merely underlined. */
.salon-header [aria-current],
.salon-footer [aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 5px;
}
.wordmark {
  font-family: Tenor, serif;
  font-weight: 400;
  font-size: clamp(44px, 8.2vw, 124px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  padding: 24px 32px 32px;
}
.home-layout {
  --home-gutter: 40px;
  display: grid;
  grid-template-columns: minmax(0, 2.65fr) minmax(360px, 1fr);
  column-gap: 24px;
  margin: 0 var(--home-gutter);
}
.home-layout > .salon-hero {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.home-layout > .music-aside {
  grid-column: 2;
  grid-row: 1;
}
.campaign-frame {
  min-width: 0;
}
.campaign-frame > img {
  width: 100%;
  height: 510px;
  object-fit: cover;
  object-position: var(--focus, center 10%);
  background: var(--image-bed);
}
.campaign-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 0 8px;
}
.campaign-caption h2 {
  font-family: Tenor, serif;
  font-weight: 400;
  font-size: clamp(25px, 2.7vw, 39px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
/* The accent lives on the act of going somewhere: the rule under a text link,
   its arrow, and the state when a visitor is on it. Body copy stays ink. */
.text-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  font-size: 13px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
}
.text-link svg {
  color: var(--gold);
}
/* The phone-only search link; the field itself serves every wider screen. */
.header-search-link {
  display: none;
}
.text-link:is(:hover, :focus-visible) {
  color: var(--gold);
  border-bottom-color: var(--gold);
  text-decoration: none;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: var(--mineral);
}
.hero-aside h2 {
  font-family: Tenor, serif;
  font-size: clamp(25px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}
.aside-link {
  margin-top: auto;
  padding-top: 24px;
}
.salon-section,
.home-collection.catalog-main {
  margin: 96px 40px 0;
  scroll-margin-top: 28px;
}
/* The home Collection section borrows the catalogue's card grid, not the
   catalogue page's own container, so it keeps the home gutter. */
.home-collection.catalog-main {
  max-width: none;
  padding: 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;
  margin-bottom: 32px;
}
.section-head h2 {
  font-family: Tenor, serif;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.section-head > p {
  font-size: 14px;
  color: var(--muted);
}
.solid-link {
  min-height: 54px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
}
.solid-link:hover {
  background: var(--ink-pressed);
}
.solid-link:focus-visible {
  outline-color: var(--gold-leaf);
}
.lookbook {
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
/* The pair is the authored composition, but the owner can add, remove and
   reorder images in the editor. Each count gets its own arrangement instead of
   inheriting the pair's offset, which would otherwise land on whichever figure
   happens to be last. Heights and the offset are variables so the breakpoints
   below keep owning their values. */
.lookbook-grid {
  --lb-height: 510px;
  --lb-height-offset: 480px;
  --lb-offset: 84px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: start;
}
.lookbook-grid img {
  width: 100%;
  height: var(--lb-height);
  object-fit: cover;
  object-position: var(--focus, center);
}
.lookbook-grid figure:last-child {
  margin-top: var(--lb-offset);
}
.lookbook-grid figure:last-child img {
  height: var(--lb-height-offset);
  object-position: var(--focus, 52% center);
}
@media (min-width: 641px) {
  /* One image: it carries the section alone, full width. */
  .lookbook-grid:not(:has(> :nth-child(2))) {
    --lb-offset: 0px;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Three: equal columns with the centre figure dropped, so the offset still
     reads as a decision rather than a wrapped leftover. */
  .lookbook-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    --lb-height: 420px;
    --lb-height-offset: 420px;
    --lb-offset: 0px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lookbook-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) figure:nth-child(2) {
    margin-top: 84px;
  }
  /* Four or more: a two-up wall, right-hand column dropped. */
  .lookbook-grid:has(> :nth-child(4)) {
    --lb-height: 420px;
    --lb-height-offset: 420px;
    --lb-offset: 0px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lookbook-grid:has(> :nth-child(4)) figure:nth-child(even) {
    margin-top: 56px;
  }
  .lookbook-grid:has(> :nth-child(3)) figure:last-child img {
    object-position: var(--focus, center);
  }
}
/* Crop control for every cover-cropped image the owner can replace: add
   focus-top, focus-bottom, focus-left, focus-right or focus-center to the
   image block's Additional CSS class when a new photograph puts its subject
   somewhere other than where the original sat. The value travels by
   inheritance, so it applies whether the class lands on the figure or the
   image, and never fights another sheet's object-position for specificity. */
.focus-top {
  --focus: center top;
}
.focus-center {
  --focus: center center;
}
.focus-bottom {
  --focus: center bottom;
}
.focus-left {
  --focus: left center;
}
.focus-right {
  --focus: right center;
}
.lookbook-grid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.image-credits {
  max-width: 80ch;
  margin: 64px 40px 28px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.salon-footer {
  min-height: 112px;
  padding: 26px 40px;
  border-top: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.salon-footer a {
  font-size: 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-name {
  font-weight: 600;
  letter-spacing: 0.025em;
}
.salon-footer .salon-menu {
  flex-wrap: wrap;
  gap: 28px;
}
.salon-footer .salon-menu a {
  min-width: 44px;
  justify-content: center;
}
/* Where the label lives when it is not here. Sits with the footer links, in
   the same 12px voice, so it reads as one row rather than a badge cluster. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--gold);
}
.footer-social svg {
  flex-shrink: 0;
}
.footer-top {
  flex-shrink: 0;
}
.music-aside h2 {
  margin-bottom: 8px;
}
.music-title {
  font-size: 14px;
  margin-bottom: 24px;
}
@media (min-width: 1700px) {
  .home-layout,
  .salon-section,
  .home-collection.catalog-main,
  .image-credits {
    width: 1600px;
    margin-inline: auto;
  }
  .campaign-frame > img {
    height: 600px;
  }
}
@media (max-width: 1100px) {
  .salon-header {
    padding-inline: 28px;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 12px;
  }
  .salon-header nav {
    grid-column: 2;
  }
  .salon-header .header-actions {
    grid-column: 1 / -1;
    width: min(100%, 420px);
  }
  .home-layout {
    --home-gutter: 28px;
    display: block;
  }
  .campaign-frame > img {
    height: 490px;
  }
  .campaign-caption {
    display: block;
  }
  .campaign-caption .text-link {
    margin-top: 14px;
  }
  .hero-aside {
    padding: 24px;
  }
  .music-aside {
    display: block;
    margin-top: 48px;
  }
  .salon-section,
  .home-collection.catalog-main {
    margin-inline: 28px;
  }
  .lookbook-grid {
    --lb-height: 420px;
    --lb-height-offset: 400px;
  }
  .salon-footer {
    padding-inline: 28px;
  }
  .image-credits {
    margin-inline: 28px;
  }
}
@media (min-width: 800px) and (max-width: 1100px) and (max-height: 500px) {
  .salon-header {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
    row-gap: 0;
  }
  .salon-header nav {
    grid-column: 2;
    grid-row: 1;
  }
  .salon-header .salon-menu {
    gap: 0 18px;
  }
  .salon-header .header-actions {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    max-width: 300px;
    gap: 12px;
  }
}
@media (max-width: 640px) {
  /* Three primary destinations per row avoid an orphan link on narrow phones;
     secondary destinations remain in the footer instead of shrinking targets. */
  .salon-header {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 78px;
    padding: 12px 18px;
    gap: 12px 16px;
  }
  .seal-link {
    width: 46px;
    flex-shrink: 0;
  }
  .salon-header nav {
    justify-self: end;
  }
  .salon-header .salon-menu {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0 18px;
    justify-content: flex-end;
  }
  .salon-header .salon-menu .is-secondary {
    display: none;
  }
  .salon-header nav a {
    font-size: 13px;
    white-space: nowrap;
  }
  /* The field becomes a link to the catalogue's own search, which is a real
     field on a page with room for it. */
  .salon-header .header-search {
    display: none;
  }
  .header-search-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
  }
  .salon-header .header-actions {
    width: 100%;
    justify-content: space-between;
    gap: 8px 14px;
  }
  .header-links {
    gap: 20px;
  }
  .header-actions :is(.header-cart, .header-account) {
    font-size: 13px;
  }
  .wordmark {
    font-size: 8.2vw;
    padding: 24px 16px;
  }
  .home-layout {
    margin: 0;
  }
  .salon-hero {
    display: block;
    margin-inline: 16px;
  }
  .campaign-frame > img {
    height: 490px;
    object-position: var(--focus, center center);
  }
  .campaign-caption {
    padding: 22px 4px 0;
  }
  .campaign-caption h2 {
    font-size: 30px;
  }
  .campaign-caption .text-link {
    width: 100%;
    font-size: 14px;
  }
  .hero-aside {
    margin-top: 28px;
    padding: 24px;
  }
  .hero-aside h2 {
    margin: 0;
    font-size: 28px;
  }
  .aside-link {
    margin: 0;
    padding-top: 0;
    font-size: 14px;
  }
  .music-aside {
    margin: 48px 16px 0;
  }
  .music-aside h2 {
    margin-bottom: 8px;
  }
  .music-aside .aside-link {
    margin-top: 16px;
  }
  .salon-section,
  .home-collection.catalog-main {
    margin: 64px 20px 0;
  }
  .section-head {
    display: block;
    margin-bottom: 24px;
  }
  .section-head h2 {
    font-size: 36px;
  }
  .section-head > p {
    margin-top: 14px;
    font-size: 14px;
  }
  .lookbook {
    padding-top: 32px;
  }
  .lookbook-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lookbook-grid img {
    height: auto;
    aspect-ratio: 4/3;
  }
  .lookbook-grid figure:last-child {
    margin-top: 0;
  }
  .lookbook-grid figure:last-child img {
    height: auto;
    aspect-ratio: 4/5;
  }
  .lookbook-grid figcaption {
    font-size: 12px;
  }
  .image-credits {
    margin: 44px 20px 24px;
    font-size: 12px;
  }
  /* Phone footer: the places people actually go, two columns, with the legal
     set demoted to one quiet line underneath. */
  .salon-footer {
    display: block;
    padding: 28px 20px 24px;
  }
  .salon-footer .salon-menu {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 0;
    margin-top: 12px;
  }
  .salon-footer .salon-menu a {
    justify-content: flex-start;
  }
  .salon-footer .salon-menu > li:not(.is-legal) {
    flex: 0 0 calc(50% - 10px);
  }
  /* An odd destination count must not pull a legal link into the main set. */
  .salon-footer .salon-menu > li:not(.is-legal):nth-child(odd):has(+ .is-legal) {
    flex-basis: 100%;
  }
  .salon-footer .salon-menu > li.is-legal {
    flex: 0 0 calc(33.333% - 14px);
  }
  .salon-footer .salon-menu > li.is-legal {
    margin-top: 10px;
  }
  .salon-footer .salon-menu .is-legal a {
    min-height: 36px;
    color: var(--muted);
    font-size: 11px;
  }
  .footer-social {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    gap: 24px;
  }
  .footer-top {
    margin-top: 4px;
  }
  .salon-footer a {
    min-height: 40px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  /* The four destinations still hold one row on a small phone; the type and
     the gutters give way before the layout does. */
  .salon-header {
    padding-inline: 14px;
    gap: 10px 12px;
  }
  .salon-header nav {
    min-width: 0;
  }
  .salon-header .salon-menu {
    gap: 0 13px;
  }
  .salon-header nav a {
    font-size: 12px;
  }
  .header-search-link,
  .header-actions :is(.header-cart, .header-account) {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Page shell shared by every route, so commerce CSS can stay on commerce routes. */
body.admin-bar .skip:focus {
  top: 44px;
}
.page-template-page-lookbook,
.page-template-page-about-us,
.page-template-page-contact-us,
.page-template-page-wholesale,
.page-template-default,
.error404 {
  background: #fff;
}
.page-main {
  width: min(100% - 80px, 900px);
  min-height: calc(100svh - 244px);
  margin-inline: auto;
  padding: 64px 0 88px;
}
.page-content > h1,
.page-content article > h1,
.empty-page h1 {
  margin-bottom: 32px;
  font-family: Tenor, serif;
  font-size: clamp(38px, 4.1vw, 58px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.page-content {
  font-size: 17px;
  line-height: 1.8;
}
.page-content > * + *,
.page-content article > * + * {
  margin-top: 24px;
}
.empty-page p {
  margin-bottom: 28px;
  color: var(--muted);
}
.product-card-price {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  top: 12px;
  left: 12px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 12px;
  clip: auto;
  background: #fff;
}
@media (max-width: 640px) {
  .page-main {
    width: calc(100% - 40px);
    padding: 44px 0 64px;
  }
}
.page-content :is(p, ul, ol) {
  max-width: 68ch;
}
.empty-page-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 28ch;
}

.catalog-empty,
.news-empty {
  max-width: 620px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.catalog-empty h2,
.news-empty h2 {
  margin: 0;
  font-family: Tenor, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
}
.catalog-empty p,
.news-empty p {
  margin-top: 12px;
  color: var(--muted);
}