/* ==========================================================================
   A · Atelier — component skin
   Applies to every page (homepage + design system). Composition lives in
   home.css. Only semantic/component tokens here — no raw values.
   ========================================================================== */

/* Eyebrow: a small gold square instead of italic gold caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
.eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--color-accent-text);
  flex: none;
}

/* Header */
.site-header[data-solid] {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.is-inverse .site-header__brand,
.site-footer .site-header__brand { color: var(--color-text); }

/* Mobile menu */
.mobile-menu__links a {
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}
.a-menu-contact {
  display: grid;
  gap: var(--space-3xs);
  font: var(--type-small);
  color: var(--color-text-muted);
}

/* Mobile booking bar */
.mobile-cta {
  padding: var(--space-3xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.mobile-cta .btn--secondary { --_bd: var(--color-border); }

/* Testimonial tabs */
.quotes__tab {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-in-out);
}
.quotes__tab[aria-selected="true"] { color: var(--color-text); }
.quotes__tab .label { color: inherit; }
@media (hover: hover) { .quotes__tab:hover { color: var(--color-text); } }

/* Segmented control: hard-edged, ink thumb */
.segmented__btn { min-width: 112px; }

/* Fields: labels sit tight above an underline */
.field__control { padding-block: var(--space-2xs); }
textarea.field__control { min-height: 104px; }

/* Footer */
.site-footer {
  overflow: hidden;
}
.site-footer a:not(.btn):not(.link):not(.site-footer__wordmark) {
  transition: color var(--dur-fast) var(--ease-hover);
}
@media (hover: hover) {
  .site-footer a:not(.btn):not(.link):not(.site-footer__wordmark):hover { color: var(--color-accent-text); }
}