/*
 * Muse: a fashionable, soft and polished theme made with beauty salons, hair studios, nail and brow bars, spas and
 * stylists in mind, and at home with any brand that wants to feel warm and well dressed. Rounded, floating colour bands,
 * pill buttons and fields, arch-framed pictures, italic display type for small labels and accents, little sparkles.
 *
 * This file draws Muse's own frame (header, phone menu, footer, breadcrumbs, the 404 page, the split hero, the article
 * body and the divider). Every other block comes from the Theme Kit, styled by kit-theme.css. Colours come from the
 * palette (palettes/*.css): --background, --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink,
 * --on-accent, --on-primary, --text-primary, --text-secondary, --border. Plain CSS, no build step. Starts at 320px wide.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  --muse-gutter: clamp(1.25rem, 4vw, 3rem);
  --muse-width: 74rem;
  /* The frame (header, footer) spans the width the Theme Kit gives its widest sections, so it lines up with a hero. */
  --muse-width-wide: 90rem;
  /* How far the floating header, footer and colour bands sit in from the window's edges. */
  --muse-inset: clamp(0.5rem, 1.4vw, 1.25rem);
  --muse-header-height: 4.5rem;
  --muse-header-offset: 0.75rem;
  --muse-radius: 1.5rem;
  --muse-radius-large: clamp(1.5rem, 3.5vw, 2.75rem);
  --muse-line: var(--border, color-mix(in srgb, var(--text-primary, #2f1d23) 14%, transparent));
  --muse-line-strong: color-mix(in srgb, var(--text-primary, #2f1d23) 26%, transparent);
  --muse-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, #2f1d23) 5%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--text-primary, #2f1d23) 38%, transparent);
  --muse-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --muse-speed: 320ms;
  /* A four-pointed sparkle, used as a mask so it takes the colour of the text around it. */
  --muse-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Whatever is scrolled into view (an anchor, a field reached with the keyboard) stops clear of the sticky header and of
   the bottom edge instead of sitting under or against them. */
html {
  scroll-padding-top: calc(var(--muse-header-height) + var(--muse-header-offset) + 1.5rem);
  scroll-padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #faf3f0);
  color: var(--text-primary, #2f1d23);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--accent, #a5525f);
  color: var(--on-accent, #fff);
}

:focus-visible {
  outline: 2px solid var(--accent-ink, currentColor);
  outline-offset: 3px;
}

.muse-main {
  display: block;
  min-height: 40vh;
}

.muse-main > :where(h1, h2, h3) {
  font-family: var(--font-heading, serif);
  font-weight: var(--muse-heading-weight, 400);
}

/* An italic word in a heading is the theme's accent: set in the display face's italic, in the accent colour. */
:where(.muse-hero__title, .muse-footer__closing h2, .muse-article__header h1, .muse-not-found h1) em {
  color: var(--accent-ink, #934552);
  font-style: italic;
}

.muse-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 200ms var(--muse-ease);
}

.muse-skip-link:focus {
  top: 1rem;
}

.muse-sparkle {
  display: inline-block;
  flex: none;
  width: 0.8em;
  height: 0.8em;
  background: currentColor;
  -webkit-mask: var(--muse-sparkle) center / contain no-repeat;
  mask: var(--muse-sparkle) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Buttons */

.muse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  max-width: 100%;
  padding: 0.8rem 1.75rem;
  border: 1px solid var(--primary, #2f1d23);
  border-radius: 999px;
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
  font-family: var(--font-body, sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color var(--muse-speed) var(--muse-ease), color var(--muse-speed) var(--muse-ease), border-color var(--muse-speed) var(--muse-ease), transform var(--muse-speed) var(--muse-ease);
}

.muse-button:hover {
  border-color: var(--accent, #a5525f);
  background: var(--accent, #a5525f);
  color: var(--on-accent, #fff);
}

.muse-button:active {
  transform: scale(0.98);
}

.muse-button--outline {
  border-color: var(--muse-line-strong);
  background: transparent;
  color: var(--text-primary, #2f1d23);
}

.muse-button--outline:hover {
  border-color: var(--primary, #2f1d23);
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
}

.muse-button--light {
  border-color: var(--surface, #fff);
  background: var(--surface, #fff);
  color: var(--text-primary, #2f1d23);
}

.muse-button--small {
  min-height: 2.6rem;
  padding: 0.5rem 1.3rem;
  font-size: 0.88rem;
}

.muse-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement and contact line */

.muse-announcement {
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.muse-announcement[hidden] {
  display: none;
}

.muse-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
  max-width: calc(var(--muse-width-wide) + 2 * var(--muse-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--muse-gutter);
  text-align: center;
}

.muse-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.muse-announcement .muse-sparkle {
  width: 0.6rem;
  height: 0.6rem;
  opacity: 0.8;
}

.muse-announcement a {
  font-family: var(--font-heading, serif);
  font-size: 1.05em;
  font-style: italic;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.muse-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.muse-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.muse-topbar {
  color: var(--text-secondary, #6c5359);
  font-size: 0.82rem;
}

.muse-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  max-width: calc(var(--muse-width-wide) + 2 * var(--muse-gutter));
  margin-inline: auto;
  padding: 0.6rem var(--muse-gutter) 0;
}

.muse-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.muse-topbar a {
  text-decoration: none;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-topbar a:hover {
  color: var(--accent-ink, #934552);
}

.muse-topbar__social,
.muse-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.muse-topbar__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ------------------------------------------------------------------ Header */

/* simple and topbar: a floating, frosted pill that stays at the top. centered: an editorial masthead, the wordmark over
   a centred menu, frosted once the page scrolls under it. The header itself lets clicks through around the pill. */
.muse-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--muse-header-offset) var(--muse-inset) 0;
  pointer-events: none;
}

.muse-header > * {
  pointer-events: auto;
}

.muse-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--muse-header-height);
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.5rem 0.5rem 0.5rem clamp(1rem, 2vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--muse-line) 80%, transparent);
  border-radius: 999px;
  background: var(--surface, #fffaf8);
  box-shadow: var(--muse-shadow);
  transition: box-shadow var(--muse-speed) var(--muse-ease), background-color var(--muse-speed) var(--muse-ease);
}

/* The blur sits on the pill, never on the header: a filter there would make the phone menu (position: fixed inside the
   header) measure from the header instead of the window. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .muse-header__bar:not(.muse-header__bar--centered) {
    background: color-mix(in srgb, var(--surface, #fffaf8) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(18px);
    backdrop-filter: saturate(1.5) blur(18px);
  }
}

.muse-header.is-scrolled .muse-header__bar:not(.muse-header__bar--centered) {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary, #2f1d23) 6%, transparent), 0 22px 48px -24px color-mix(in srgb, var(--text-primary, #2f1d23) 45%, transparent);
}

/* The masthead spans the window and is not a pill. */
.muse-header--centered {
  padding: 0;
}

.muse-header--centered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid transparent;
  background: var(--background, #faf3f0);
  transition: border-color var(--muse-speed) var(--muse-ease);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .muse-header--centered::before {
    background: color-mix(in srgb, var(--background, #faf3f0) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }
}

.muse-header--centered.is-scrolled::before {
  border-bottom-color: var(--muse-line);
}

.muse-header__bar--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 5.5rem;
  max-width: calc(var(--muse-width-wide) + 2 * var(--muse-gutter));
  padding: 0.5rem var(--muse-gutter);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.muse-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.muse-header__bar--centered .muse-header__brand {
  justify-self: center;
}

.muse-header__bar--centered .muse-brand__name {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}

.muse-header__rail .muse-nav--desktop {
  justify-content: center;
  max-width: calc(var(--muse-width-wide) + 2 * var(--muse-gutter));
  margin-inline: auto;
  padding: 0 var(--muse-gutter) 0.5rem;
}

.muse-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
}

.muse-header__phone {
  color: var(--text-secondary, #6c5359);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-header__phone:hover {
  color: var(--accent-ink, #934552);
}

.muse-header__slot {
  display: flex;
  align-items: center;
}

/* The wordmark: the website's name in the display face, as it is written. */
.muse-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--text-primary, #2f1d23);
}

.muse-brand__name {
  display: block;
  min-width: 0;
  max-width: min(20rem, 56vw);
  overflow: hidden;
  font-family: var(--font-heading, serif);
  font-size: 1.55rem;
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muse-brand--light {
  color: var(--on-primary, #fff);
}

/* ------------------------------------------------------------------ Navigation */

.muse-nav--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.35rem;
  min-width: 0;
}

.muse-nav__item {
  position: relative;
}

/* Each link is a soft pill that fills on hover. */
.muse-nav--desktop .muse-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  color: var(--text-primary, #2f1d23);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--muse-speed) var(--muse-ease), color var(--muse-speed) var(--muse-ease);
}

.muse-nav--desktop .muse-nav__item > a:is(:hover, :focus-visible),
.muse-nav__item--parent:is(:hover, :focus-within) > a {
  background: var(--surface-alt, #f3e3de);
}

.muse-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform var(--muse-speed) var(--muse-ease);
}

.muse-nav__item--parent:is(:hover, :focus-within) .muse-nav__caret {
  transform: rotate(180deg);
}

/* A parent's pages hang under it. The padding on top belongs to the list, so the pointer never crosses a gap. */
.muse-nav__children {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.4rem);
  transition: opacity var(--muse-speed) var(--muse-ease), transform var(--muse-speed) var(--muse-ease), visibility var(--muse-speed);
}

.muse-nav__item--parent:is(:hover, :focus-within) > .muse-nav__children {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.muse-nav__panel {
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--muse-line);
  border-radius: 1.25rem;
  background: var(--surface, #fffaf8);
  box-shadow: var(--muse-shadow);
}

.muse-nav__panel a {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 0.85rem;
  color: var(--text-primary, #2f1d23);
  font-size: 0.93rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color var(--muse-speed) var(--muse-ease), color var(--muse-speed) var(--muse-ease);
}

.muse-nav__panel a:is(:hover, :focus-visible) {
  background: var(--surface-alt, #f3e3de);
  color: var(--accent-ink, #934552);
}

/* The menu button: a round button with two lines that turn into a cross. */
.muse-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
  cursor: pointer;
  transition: background-color var(--muse-speed) var(--muse-ease);
}

/* Only where a pointer really hovers: a phone keeps the hover look after a tap. */
@media (hover: hover) {
  .muse-menu-button:hover {
    background: var(--accent, #a5525f);
    color: var(--on-accent, #fff);
  }
}

.muse-menu-button__lines {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 0.45rem;
}

.muse-menu-button__lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--muse-speed) var(--muse-ease), top var(--muse-speed) var(--muse-ease);
}

.muse-menu-button__lines i:first-child {
  top: 0;
}

.muse-menu-button__lines i:last-child {
  top: 100%;
}

.muse-menu-button[aria-expanded="true"] .muse-menu-button__lines i:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.muse-menu-button[aria-expanded="true"] .muse-menu-button__lines i:last-child {
  top: 50%;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A rounded card that drops under the pill (or under the masthead), across the phone or at the right on a tablet. */
.muse-drawer {
  position: fixed;
  top: calc(var(--muse-drawer-top, calc(var(--muse-header-height) + var(--muse-header-offset))) + 0.5rem);
  right: var(--muse-inset);
  left: var(--muse-inset);
  z-index: 49;
  max-height: calc(100dvh - var(--muse-drawer-top, calc(var(--muse-header-height) + var(--muse-header-offset))) - 0.5rem - var(--muse-inset));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--muse-line);
  border-radius: var(--muse-radius-large);
  background: var(--surface, #fffaf8);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--text-primary, #2f1d23) 45%, transparent);
  opacity: 1;
  transform: none;
  transition: opacity var(--muse-speed) var(--muse-ease), transform var(--muse-speed) var(--muse-ease);
}

.muse-drawer[hidden] {
  display: none;
}

@starting-style {
  .muse-drawer:not([hidden]) {
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.985);
  }
}

@media (min-width: 640px) {
  .muse-drawer {
    left: auto;
    width: min(26rem, calc(100vw - 2 * var(--muse-inset)));
  }
}

.muse-drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1.25rem, 5vw, 2rem) 1.75rem;
}

.muse-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
}

.muse-nav--drawer {
  display: block;
}

.muse-drawer__item + .muse-drawer__item {
  border-top: 1px solid var(--muse-line);
}

.muse-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  color: var(--text-primary, #2f1d23);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-drawer__link:hover {
  color: var(--accent-ink, #934552);
  font-style: italic;
}

.muse-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.9rem;
}

.muse-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #6c5359);
  font-size: 1rem;
  text-decoration: none;
}

.muse-drawer__footer {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--muse-radius);
  background: var(--surface-alt, #f3e3de);
}

.muse-drawer__contact {
  color: var(--text-primary, #2f1d23);
  font-size: 0.98rem;
  text-decoration: none;
}

.muse-drawer__footer .muse-button {
  margin-top: 0.75rem;
}

html.muse-menu-open {
  overflow: hidden;
}

/* Below the desktop width the menu moves into the phone menu. */
@media (max-width: 1023.98px) {
  :root {
    --muse-header-height: 4rem;
  }

  .muse-nav--desktop,
  .muse-header__rail,
  .muse-header__cta,
  .muse-header__phone,
  .muse-header__slot {
    display: none;
  }

  .muse-menu-button {
    display: inline-flex;
  }

  .muse-header__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--muse-header-height);
    gap: 1rem;
  }

  .muse-header__bar--centered {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    min-height: 4.5rem;
  }

  .muse-header__bar--centered .muse-header__actions {
    gap: 0;
  }

  .muse-header__bar--centered .muse-brand__name {
    font-size: 1.6rem;
  }
}

@media (min-width: 1024px) {
  .muse-drawer:not(#site-header.theme-nav-compact .muse-drawer) {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .muse-header__phone {
    display: none;
  }
}

/* A crowded desktop menu moves into the phone menu (the shared resilience script marks the header). */
#site-header.theme-nav-compact .muse-header__rail,
#site-header.theme-nav-compact .muse-header__cta,
#site-header.theme-nav-compact .muse-header__phone {
  display: none;
}

#site-header.theme-nav-compact .muse-header__bar:not(.muse-header__bar--centered) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ------------------------------------------------------------------ Breadcrumbs */

.muse-breadcrumbs {
  max-width: calc(var(--muse-width) + 2 * var(--muse-gutter));
  margin-inline: auto;
  padding: 1.75rem var(--muse-gutter) 0;
}

.muse-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #6c5359);
  font-size: 0.85rem;
  list-style: none;
}

.muse-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.muse-breadcrumbs li + li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent-ink, currentColor);
  -webkit-mask: var(--muse-sparkle) center / contain no-repeat;
  mask: var(--muse-sparkle) center / contain no-repeat;
  opacity: 0.7;
}

.muse-breadcrumbs a {
  text-decoration: none;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-breadcrumbs a:hover {
  color: var(--accent-ink, #934552);
}

.muse-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #2f1d23);
}

/* ------------------------------------------------------------------ Footer */

/* A rounded panel in the soft band colour, floating like the colour bands above it, closing with the name. */
.muse-footer {
  margin: clamp(1.5rem, 3vw, 2.5rem) var(--muse-inset) var(--muse-inset);
  overflow: hidden;
  border-radius: var(--muse-radius-large);
  background: var(--surface-alt, #f3e3de);
  color: var(--text-primary, #2f1d23);
}

.muse-footer__inner {
  max-width: calc(var(--muse-width-wide) + 2 * var(--muse-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--muse-gutter) 1.75rem;
}

.muse-footer--minimal .muse-footer__inner {
  padding-block: 2rem;
}

.muse-footer__brand {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.muse-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--muse-line-strong);
}

.muse-footer__closing h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.3rem, 5.5vw, 4.25rem);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.muse-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.5rem 3rem;
}

.muse-footer__about {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

.muse-footer__about p {
  max-width: 24rem;
  margin: 0;
  color: var(--text-primary, #2f1d23);
  font-size: 0.95rem;
}

.muse-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--muse-line-strong);
  border-radius: 50%;
  color: var(--text-primary, #2f1d23);
  transition: background-color var(--muse-speed) var(--muse-ease), color var(--muse-speed) var(--muse-ease), border-color var(--muse-speed) var(--muse-ease);
}

.muse-footer__social a:hover {
  border-color: var(--primary, #2f1d23);
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
}

.muse-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.muse-footer__title {
  margin: 0 0 1rem;
  color: var(--text-primary, #2f1d23);
  font-family: var(--font-heading, serif);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: var(--muse-heading-weight, 400);
  line-height: 1.2;
}

.muse-footer__links {
  display: grid;
  gap: 0.55rem;
}

.muse-footer__links a,
.muse-footer__contact a {
  width: fit-content;
  color: var(--text-primary, #2f1d23);
  font-size: 0.95rem;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--muse-speed) var(--muse-ease);
}

.muse-footer__links a:hover,
.muse-footer__contact a:hover {
  background-size: 100% 1px;
}

.muse-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  font-style: normal;
}

.muse-footer__contact p:not(.muse-footer__title) {
  margin: 0 0 0.35rem;
  color: var(--text-primary, #2f1d23);
  font-size: 0.95rem;
}

.muse-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--muse-line-strong);
}

.muse-footer__copyright {
  margin: 0;
  color: var(--text-primary, #2f1d23);
  font-size: 0.85rem;
}

.muse-footer__legal,
.muse-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.muse-footer__legal a {
  color: var(--text-primary, #2f1d23);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-footer__legal a:hover {
  color: var(--accent-ink, #934552);
}

.muse-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}

.muse-footer__inline a {
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-footer__inline a:hover {
  color: var(--accent-ink, #934552);
}

.muse-footer--minimal .muse-footer__legal {
  margin-top: 1rem;
}

/* The name, very large and in italics, along the bottom of the footer. Its size follows its length (the layout puts it in
   one of five classes), so it fills the width on one line and never breaks a word. */
.muse-footer__wordmark {
  margin: clamp(1.5rem, 4vw, 3rem) 0 -0.12em;
  overflow: hidden;
  color: var(--text-primary, #2f1d23);
  font-family: var(--font-heading, serif);
  font-size: min(14.5rem, 20vw);
  font-style: italic;
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.muse-footer__wordmark--m { font-size: min(12rem, 14vw); }
.muse-footer__wordmark--l { font-size: min(9.25rem, 9.6vw); }
.muse-footer__wordmark--xl { font-size: min(6.5rem, 6.6vw); }
.muse-footer__wordmark--xxl { font-size: min(4.75rem, 4.9vw); }

/* ------------------------------------------------------------------ 404 */

.muse-not-found {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 8rem) var(--muse-gutter);
  text-align: center;
}

.muse-not-found__number {
  margin: 0;
  color: var(--accent-ink, #934552);
  font-family: var(--font-heading, serif);
  font-size: clamp(6rem, 20vw, 11rem);
  font-style: italic;
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.04em;
  line-height: 1;
}

.muse-rule {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  margin: 1.75rem auto;
  background: var(--accent-ink, #934552);
  -webkit-mask: var(--muse-sparkle) center / contain no-repeat;
  mask: var(--muse-sparkle) center / contain no-repeat;
}

.muse-not-found h1 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.muse-not-found p:not(.muse-not-found__number) {
  margin: 0 auto 2.25rem;
  max-width: 32rem;
  color: var(--text-secondary, #6c5359);
}

/* ------------------------------------------------------------------ Divider block */

.muse-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: calc(var(--muse-width) + 2 * var(--muse-gutter));
  min-height: clamp(3.5rem, 8vw, 6rem);
  margin-inline: auto;
  padding-inline: var(--muse-gutter);
  color: var(--accent-ink, #934552);
}

.muse-divider__rule {
  display: block;
  width: min(7rem, 24vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--muse-line-strong));
}

.muse-divider__rule + .muse-sparkle + .muse-divider__rule {
  background: linear-gradient(90deg, var(--muse-line-strong), transparent);
}

.muse-divider__rule--wide {
  width: 100%;
  background: var(--muse-line);
}

.muse-divider .muse-sparkle {
  width: 0.85rem;
  height: 0.85rem;
}

.muse-divider--dotted {
  gap: 0.85rem;
}

.muse-divider--dotted .muse-sparkle {
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0.75;
}

.muse-divider--dotted .muse-sparkle:nth-child(2) {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 1;
}

/* ------------------------------------------------------------------ Split hero */

/* The heading beside a picture in an arch, with a soft shape behind it and a round badge that slowly turns. Without a
   picture, words alone, centred under a sparkle. */
.muse-hero {
  overflow-x: clip;
  padding: clamp(2.5rem, 6vw, 5rem) var(--muse-gutter) clamp(3.5rem, 7vw, 6.5rem);
}

.muse-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--muse-width-wide);
  margin-inline: auto;
}

.muse-hero--words .muse-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
  text-align: center;
}

.muse-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.6rem;
  min-width: 0;
}

.muse-hero--words .muse-hero__copy {
  justify-items: center;
}

.muse-hero__sparkle {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-ink, #934552);
}

.muse-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(3rem, 1.6rem + 5vw, 6.25rem);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

.muse-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #6c5359);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
}

.muse-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.muse-hero--words .muse-hero__points {
  justify-content: center;
}

.muse-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border: 1px solid var(--muse-line);
  border-radius: 999px;
  background: var(--surface, #fffaf8);
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: left;
}

.muse-hero__points .muse-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent-ink, #934552);
  stroke-width: 1.75;
}

.muse-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.muse-hero--words .muse-hero__actions {
  justify-content: center;
}

.muse-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  color: var(--text-secondary, #6c5359);
  font-size: 0.88rem;
}

.muse-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.muse-stars {
  display: inline-flex;
  gap: 0.15rem;
}

.muse-stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: var(--accent-ink, #934552);
  stroke-width: 1.4;
}

.muse-stars svg.is-full {
  fill: var(--accent, #a5525f);
  stroke: var(--accent, #a5525f);
}

.muse-hero__trustpilot {
  font-family: var(--font-heading, serif);
  font-size: 1.05rem;
  font-style: italic;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.muse-hero__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 34rem);
  margin: 0;
  min-width: 0;
}

/* The soft shape behind the arch, turned a little. */
.muse-hero__media::before {
  content: "";
  position: absolute;
  inset: 7% -4% -4% 9%;
  z-index: -1;
  border-radius: 999px 999px var(--muse-radius-large) var(--muse-radius-large);
  background: var(--surface-alt, #f3e3de);
  transform: rotate(4deg);
}

.muse-hero__frame {
  display: block;
  overflow: hidden;
  border-radius: 999px 999px var(--muse-radius-large) var(--muse-radius-large);
  background: var(--surface-alt, #f3e3de);
}

.muse-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: min(80vh, 44rem);
  object-fit: cover;
}

/* The badge: the website's name around a sparkle. */
.muse-hero__badge {
  position: absolute;
  bottom: 9%;
  left: -2.25rem;
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 9vw, 8.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary, #2f1d23);
  color: var(--on-primary, #fff);
  box-shadow: var(--muse-shadow);
}

.muse-hero__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.muse-hero__badge text {
  font-family: var(--font-body, sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.muse-hero__badge .muse-sparkle {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--on-primary, #fff);
}

@media (prefers-reduced-motion: no-preference) {
  .muse-hero__badge svg {
    animation: muse-turn 26s linear infinite;
  }
}

@keyframes muse-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  .muse-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .muse-hero--split .muse-hero__media {
    order: -1;
    width: min(100%, 26rem);
  }

  .muse-hero__image {
    aspect-ratio: 5 / 6;
  }

  .muse-hero__badge {
    left: 0.25rem;
    bottom: 0.75rem;
    width: 6rem;
  }
}

/* ------------------------------------------------------------------ Article body */

.muse-article {
  padding: clamp(3.5rem, 7vw, 6rem) var(--muse-gutter);
}

.muse-article--post {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.muse-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.muse-article__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.muse-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1.25rem;
  color: var(--accent-ink, #934552);
  font-family: var(--font-heading, serif);
  font-size: 1.15rem;
  font-style: italic;
}

.muse-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.muse-article__header .muse-rule {
  margin: 2rem auto 0;
}

.muse-prose {
  color: var(--text-primary, #2f1d23);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.muse-prose > :first-child {
  margin-top: 0;
}

.muse-prose > :last-child {
  margin-bottom: 0;
}

.muse-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.5em;
}

.muse-prose :where(h2, h3, h4) {
  margin: 2.1em 0 0.65em;
  font-family: var(--font-heading, serif);
  font-weight: var(--muse-heading-weight, 400);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.muse-prose h2 {
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem);
}

.muse-prose h3 {
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem);
}

.muse-prose h4 {
  font-size: 1.25rem;
}

.muse-prose a {
  color: var(--accent-ink, #934552);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--muse-speed) var(--muse-ease);
}

.muse-prose a:hover {
  color: var(--text-primary, #2f1d23);
}

.muse-prose :where(ul, ol) {
  padding-left: 1.25em;
}

.muse-prose li + li {
  margin-top: 0.4em;
}

.muse-prose li::marker {
  color: var(--accent-ink, #934552);
}

.muse-prose blockquote {
  margin-inline: 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--muse-radius);
  background: var(--surface-alt, #f3e3de);
  font-family: var(--font-heading, serif);
  font-size: 1.35em;
  font-style: italic;
  line-height: 1.45;
}

.muse-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--muse-radius);
}

.muse-prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-secondary, #6c5359);
  font-size: 0.88rem;
  text-align: center;
}

.muse-prose hr {
  width: 0.9rem;
  height: 0.9rem;
  margin: 3em auto;
  border: 0;
  background: var(--accent-ink, #934552);
  -webkit-mask: var(--muse-sparkle) center / contain no-repeat;
  mask: var(--muse-sparkle) center / contain no-repeat;
}

.muse-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.muse-prose :where(th, td) {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--muse-line);
  text-align: left;
  vertical-align: top;
}

.muse-prose th {
  color: var(--text-secondary, #6c5359);
  font-size: 0.85rem;
  font-weight: 600;
}

.muse-prose :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.muse-prose pre {
  overflow-x: auto;
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--surface-alt, #f3e3de);
}

/* ------------------------------------------------------------------ Form thanks */

.muse-form-success {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: 2rem 0;
}

.muse-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 2rem;
  font-weight: var(--muse-heading-weight, 400);
  line-height: 1.12;
}

.muse-form-success p {
  margin: 0;
  color: var(--text-secondary, #6c5359);
}

.muse-form-success .muse-rule {
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------ Without JavaScript, and calm motion */

@media (scripting: none) {
  .muse-menu-button {
    display: none !important;
  }

  .muse-drawer[hidden] {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    margin-top: 0.5rem;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 1024px) {
  .muse-drawer[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .muse-hero__badge svg {
    animation: none !important;
  }
}

/* The icon a site may set on its announcement. */
.muse-announcement__icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; margin-inline-end: 0.4em; }