/*
  Hermes editorial layer
  A shared, intentionally restrained layer that gives the existing site a
  stronger campaign rhythm while leaving its page-specific interactions intact.
*/

:root {
  --editorial-dark: var(--ink);
  --editorial-light: var(--cream);
  --editorial-accent: var(--hermes-brown);
  --editorial-rule: rgba(246, 240, 228, .24);
}

body {
  text-rendering: optimizeLegibility;
}

.eyebrow {
  letter-spacing: 1.45px;
}

.title,
.page-hero h1,
.services-intro h1,
.socials-intro h1,
.reviews-hero h1 {
  text-wrap: balance;
}

.nav {
  mix-blend-mode: normal;
}

.nav.on {
  background: color-mix(in srgb, var(--cream) 91%, transparent);
}

/* Homepage: a campaign-like sequence rather than a run of boxed sections. */
.brand-stage .stage-copy {
  gap: 7px;
}

.brand-stage .stage-copy span {
  opacity: .68;
}

.brand-stage .stage-copy strong {
  color: var(--editorial-accent);
}

.about-hermes {
  position: relative;
  overflow: hidden;
}

.about-hermes::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(40vw, 550px);
  height: 1px;
  background: var(--editorial-accent);
}

.about-copy .title {
  max-width: 10ch;
}

.about-prose {
  max-width: 38rem;
}

.offerings {
  margin-top: clamp(4rem, 9vw, 9rem);
}

.offering {
  padding-block: clamp(1.8rem, 3vw, 3.2rem);
}

.offering:hover {
  padding-left: clamp(.4rem, 1.2vw, 1.2rem);
}

.treatments {
  position: relative;
}

.treatment-menu-aside .title {
  max-width: 8ch;
  line-height: .8;
}

.treatment-menu-item {
  padding-block: clamp(2rem, 3.5vw, 3.4rem);
}

.treatment-menu-item:hover {
  background: transparent;
}

.treatment-menu-item h3,
.treatment-product h3 {
  text-wrap: balance;
}

.experience-home {
  background: var(--editorial-dark);
  color: var(--editorial-light);
}

.experience-home .experience-intro .title,
.experience-home .experience-row h3,
.experience-home .athlete-range-track span {
  color: var(--editorial-light);
}

.experience-home .experience-intro p,
.experience-home .experience-row p,
.experience-home .experience-kicker,
.experience-home .athlete-range-track span:not(:last-child)::after {
  color: color-mix(in srgb, var(--editorial-light) 61%, transparent);
}

.experience-home .experience-timeline,
.experience-home .experience-row,
.experience-home .athlete-range {
  border-color: var(--editorial-rule);
}

.experience-home .experience-row > span {
  background: var(--editorial-accent);
}

.experience-home .link {
  border-color: var(--editorial-light);
}

.about-tease {
  padding-block: clamp(8rem, 15vw, 15rem);
}

.about-tease figure {
  height: clamp(480px, 54vw, 760px);
}

.about-tease .title {
  max-width: 9ch;
}

.booking {
  min-height: clamp(38rem, 78vh, 52rem);
}

.booking .title {
  max-width: 8ch;
}

.booking-action > a {
  color: var(--editorial-light);
}

/* Editorial hierarchy for the information pages; layout-specific CSS remains local. */
.page-hero,
.services-page > .services-intro,
.socials-page > .shell:first-child,
.reviews-page .reviews-hero {
  padding-bottom: clamp(3.5rem, 8vw, 8rem);
}

.services-intro h1,
.socials-intro h1,
.reviews-hero h1,
.page-hero .title {
  max-width: 10ch;
}

.services-page .service-card,
.about-conditions .condition-item,
.about-faq details {
  background: transparent;
}

.services-page .service-card:hover {
  background: color-mix(in srgb, var(--editorial-accent) 7%, transparent);
}

.socials-keepup {
  background: var(--editorial-dark);
}

.socials-channels a:hover,
.socials-channels a:focus-visible {
  background: var(--editorial-light);
  color: var(--editorial-accent);
}

footer {
  background: var(--editorial-dark);
  color: var(--editorial-light);
}

footer .brand,
footer small {
  color: inherit;
}

@media (max-width: 760px) {
  .about-hermes::before {
    width: 36vw;
  }

  .about-tease {
    padding-block: 6rem;
  }

  .about-tease figure {
    height: min(126vw, 570px);
  }

  .booking {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/*
  Serif-led editorial typography system
  The inspected reference uses its hosted FT face, which is not licensed with
  this project. Playfair Display is already legally loaded by Hermes and is the
  closest existing serif route for its elegant, uppercase editorial character.
*/
:root {
  --type-editorial: "Playfair Display", Georgia, serif;
  --type-reading: "Manrope", Arial, sans-serif;
  --type-display-weight: 500;
  --type-editorial-tracking: .075em;
  --type-editorial-leading: 1.35;
}

body {
  font-family: var(--type-reading);
}

.title,
.page-hero h1,
.services-intro h1,
.socials-intro h1,
.reviews-hero h1,
.about-intro h1,
.about-conditions h2,
.about-person h2,
.about-location h2,
.about-questions h2,
.portfolio-copy h2,
.experience-item--ota h2,
.experience-cover h1,
.statement-line,
.treatment-menu-item h3,
.treatment-product h3,
.service-card h2,
.condition-name,
.offering h3,
.experience-row h3,
.athlete-entry-content h2 {
  font-family: var(--type-editorial) !important;
  font-weight: var(--type-display-weight) !important;
  font-style: normal !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase;
}

.title em,
.page-hero h1 em,
.services-intro h1 em,
.socials-intro h1 em,
.reviews-hero h1 em,
.about-intro h1 em,
.about-conditions h2 em,
.about-person h2 em,
.about-location h2 em,
.about-questions h2 em,
.portfolio-copy h2 em {
  font-style: normal;
}

.eyebrow,
.brand,
.links,
.menu,
.button,
.stage-link,
.stage-copy,
.link,
.service-card summary,
.service-card summary *,
.about-faq summary,
.condition-item summary,
.qualification-list,
.foot small,
.review-card .stars,
.review-card cite,
.socials-intro p,
.deck-counter {
  font-family: var(--type-editorial) !important;
  font-weight: 400 !important;
  letter-spacing: var(--type-editorial-tracking) !important;
}

.eyebrow,
.links,
.menu,
.button,
.stage-link,
.stage-copy,
.link,
.service-card summary,
.about-faq summary,
.condition-item summary,
.qualification-list,
.foot small,
.review-card .stars,
.review-card cite,
.socials-intro p,
.deck-counter {
  font-size: clamp(.66rem, .76vw, .84rem) !important;
  line-height: var(--type-editorial-leading) !important;
}

.about-prose,
.portfolio-copy > p,
.service-card p,
.about-faq__answer,
.condition-detail,
.legal-page__body,
.review-card p,
.socials-intro p,
.deck-detail p {
  font-family: var(--type-reading) !important;
  font-weight: 400;
  letter-spacing: -.012em;
}

/* Clean, pre-track Experience opening: typography is the entire composition. */
.experience-cover {
  min-height: clamp(560px, 80svh, 850px);
  overflow: clip;
  display: grid;
  align-items: center;
  padding-block: clamp(7.5rem, 13vw, 12rem) clamp(4.5rem, 8vw, 7rem);
}

.experience-cover__inner {
  min-height: 0;
  display: block;
}

.experience-cover h1 {
  width: min(100%, 70rem) !important;
  margin-inline: auto;
  text-align: left;
  font-family: var(--type-editorial) !important;
  font-weight: 400 !important;
  letter-spacing: -.075em !important;
}

.experience-cover__line--experience {
  margin-left: clamp(.25rem, 6vw, 6rem);
  font-size: clamp(3.8rem, 8.7vw, 9.4rem);
  line-height: .82;
}

.experience-cover__line--beyond {
  margin: clamp(.8rem, 1.7vw, 1.5rem) 0 0 clamp(0rem, 2vw, 2rem);
  color: var(--ink) !important;
  background: transparent !important;
  font-size: clamp(2.8rem, 6.4vw, 6.9rem);
  line-height: .85;
}

.experience-cover__line--room {
  margin-top: clamp(.9rem, 1.8vw, 1.6rem);
  font-size: clamp(4rem, 10vw, 10.8rem);
  line-height: .76;
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  .experience-cover {
    min-height: min(680px, 88svh);
    padding: 8.5rem 0 4.5rem;
  }

  .experience-cover h1 {
    width: 100% !important;
    text-align: center;
  }

  .experience-cover__line--experience {
    margin-left: 0;
    font-size: clamp(3.15rem, 14.4vw, 4.9rem);
  }

  .experience-cover__line--beyond {
    margin-left: 0;
    font-size: clamp(2.35rem, 10.8vw, 3.9rem);
  }

  .experience-cover__line--room {
    font-size: clamp(3.25rem, 14.9vw, 5.1rem);
  }
}