/* ==========================================================================
   Blanky Beauty — Theme Styles
   WordPress Block Theme: blanky-beauty
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS Custom Properties

   --lum-* variables are no longer hardcoded colors. They resolve from the
   active style variation's theme.json palette (styles/primary.json,
   sub.json, emerald.json), so switching a style variation now re-colors
   the entire theme. Mid-tone grays are derived with color-mix() instead
   of being separately hand-picked hex values.

   Panels that must stay dark in every variation (CTA, footer, hero
   overlay) resolve from the dedicated "ink" palette slot instead of
   foreground, which inverts to near-white on the Dark variation. Text
   sitting on accent-colored surfaces resolves from "on-primary", and
   accent-colored text sitting on dark panels uses --lum-accent-soft
   (accent lifted toward white) so dark accents like Emerald green stay
   readable on near-black backgrounds. Body text placed on these
   always-dark panels (CTA, footer, gallery overlay) must resolve from
   --lum-white-pure ("white" palette slot), NOT --lum-bg/--wp--preset--
   color--background — the latter turns near-black on the Dark
   variation and would make the text invisible on the equally dark panel.
   -------------------------------------------------------------------------- */
:root {
  --lum-accent: var(--wp--preset--color--primary);
  --lum-bg: var(--wp--preset--color--background);
  --lum-bg-alt: var(--wp--preset--color--surface);
  --lum-text: var(--wp--preset--color--foreground);
  --lum-text-secondary: color-mix(in srgb, var(--wp--preset--color--foreground) 55%, var(--wp--preset--color--muted) 45%);
  --lum-text-muted: color-mix(in srgb, var(--wp--preset--color--foreground) 35%, var(--wp--preset--color--muted) 65%);
  --lum-text-light: var(--wp--preset--color--muted);
  --lum-text-faint: color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--background) 30%);
  --lum-cta-bg: var(--wp--preset--color--ink);
  --lum-footer-bg: color-mix(in srgb, var(--wp--preset--color--ink) 90%, var(--wp--preset--color--black) 10%);
  --lum-on-accent: var(--wp--preset--color--on-primary);
  --lum-accent-soft: color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--white) 30%);
  --lum-border: color-mix(in srgb, var(--wp--preset--color--border) 80%, transparent);
  --lum-border-light: var(--wp--preset--color--border);
  --lum-border-header: color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
  --lum-white-pure: var(--wp--preset--color--white);

  --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-ui: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', 'Hiragino Kaku Gothic ProN', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--lum-text);
  background: var(--lum-bg);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: color-mix(in srgb, var(--lum-accent) 35%, var(--lum-bg) 65%);
  color: var(--lum-text);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.wp-site-blocks {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks main {
  width: 100%;
  flex: 1;
}

/* --------------------------------------------------------------------------
   2. Layout Utilities
   -------------------------------------------------------------------------- */
.l-container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 40px;
}

.l-container--narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 40px;
}

.l-container--mid {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 40px;
}

.l-container--small {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 40px;
}

.l-container--xs {
  max-width: 740px;
  margin-inline: auto;
  padding-inline: 40px;
}

.l-container--cta {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 40px;
  position: relative;
  z-index: 1;
}

.l-container--menu {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* --------------------------------------------------------------------------
   3. Section
   -------------------------------------------------------------------------- */
.section {
  padding: 120px 40px;
}

.section--alt {
  background: var(--lum-bg-alt);
}

.section--cta {
  position: relative;
  padding: 140px 40px;
  background: var(--lum-cta-bg);
  text-align: center;
  overflow: hidden;
}

/* Shared section base — mockup naming convention (beauty-section__*) */
.beauty-section {
  padding: 120px 40px;
}

.beauty-section--surface {
  background: var(--lum-bg-alt);
}

.beauty-section__inner {
  max-width: 1240px;
  margin-inline: auto;
  text-align: center;
}

.beauty-section--wide {
  max-width: 1400px;
}

/* --------------------------------------------------------------------------
   4. Section Header
   -------------------------------------------------------------------------- */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header--wide {
  margin-bottom: 72px;
}

.section-header__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 18px;
}

.section-header__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--lum-text);
}

.section-header__title em {
  font-style: italic;
  font-weight: inherit;
}

.section-header__divider {
  width: 48px;
  height: 1px;
  background: var(--lum-accent);
  margin-inline: auto;
}

.section-header__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 2;
  color: var(--lum-text-light);
  margin: 28px 0 0;
}

/* Shared section header — mockup naming (beauty-section__*) */
.beauty-section__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 18px;
}

.beauty-section__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--lum-text);
}

.beauty-section__heading em {
  font-style: italic;
  font-weight: inherit;
}

.beauty-section__line {
  width: 48px;
  height: 1px;
  background: var(--lum-accent);
  margin: 0 auto 64px;
}

.beauty-section__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 2;
  color: var(--lum-text-light);
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   5. Site Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.2s ease;
}

/* WordPress admin bar is shown while logged in, so push the fixed header down by its height */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header--scrolled {
  background: color-mix(in srgb, var(--lum-bg) 55%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--lum-border);
  box-shadow: 0 1px 24px color-mix(in srgb, var(--wp--preset--color--foreground) 6%, transparent);
}

.site-header__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 40px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header is position:fixed at 80px tall, so every template's <main> needs
   80px of top padding or its content sits underneath the header.
   Exception: front-page's main (.main-with-hero) is excluded below because
   its hero pattern handles its own padding-top while letting its background
   extend behind the transparent header. */
main.wp-block-group {
  padding-top: 80px;
}

main.wp-block-group.main-with-hero {
  padding-top: 0;
}

.site-header__logo {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--lum-white-pure);
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* wp:site-title wraps title in <a> — override theme.json link color */
.site-header__logo a,
.site-header__logo a:hover,
.site-header__logo a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.site-header--scrolled .site-header__logo {
  color: var(--lum-text);
}

/* Non-front page logo color: dark from initial load */
body:not(.home) .site-header__logo {
  color: var(--lum-text);
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__nav {
  display: flex;
  align-items: center;
}

.site-header__nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-header .site-header__nav .wp-block-navigation-item a {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lum-white-pure) 78%, transparent);
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.site-header .site-header__nav .wp-block-navigation-item a:hover,
.site-header .site-header__nav .wp-block-navigation-item a:focus-visible {
  color: var(--lum-white-pure);
}

.site-header--scrolled .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-header--scrolled .site-header__nav .wp-block-navigation-item a {
  color: var(--lum-text-secondary);
}

.site-header--scrolled .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-header--scrolled .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.site-header--scrolled .site-header__nav .wp-block-navigation-item a:hover,
.site-header--scrolled .site-header__nav .wp-block-navigation-item a:focus-visible {
  color: var(--lum-text);
}

/* Non-front page navigation links - dark text from initial page load */
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item__content,
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item a {
  color: var(--lum-text-secondary);
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Non-front page navigation links hover - primary dark color */
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item__content:hover,
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item__content:focus-visible,
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item a:hover,
body:not(.home) .site-header .site-header__nav .wp-block-navigation-item a:focus-visible {
  color: var(--lum-text);
}

.site-header .site-header__cta .wp-block-navigation-item__content {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lum-white-pure);
  border: 1px solid color-mix(in srgb, var(--lum-white-pure) 45%, transparent);
  border-radius: 999px;
  padding: 11px 26px;
  line-height: 1;
  transition:
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
}

.site-header__cta .wp-block-navigation-item__content:hover,
.site-header__cta .wp-block-navigation-item__content:focus-visible {
  background: color-mix(in srgb, var(--lum-white-pure) 15%, transparent);
  color: var(--lum-white-pure);
}

.site-header--scrolled .site-header__cta .wp-block-navigation-item__content {
  color: var(--lum-text);
  border-color: var(--lum-accent);
}

.site-header--scrolled .site-header__cta .wp-block-navigation-item__content:hover,
.site-header--scrolled .site-header__cta .wp-block-navigation-item__content:focus-visible {
  background: var(--lum-accent);
  color: var(--lum-on-accent);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* wp:cover provides position, flex, and background media handling.
   min-height is controlled entirely via .hero class (no inline style from block attrs).
   No padding-top here: front-page's main.main-with-hero has padding-top:0 so the
   hero's background can extend behind the transparent fixed header; see beauty-style.css
   section 5 (Site Header) and main.main-with-hero. */
.hero.wp-block-cover {
  overflow: hidden;
  min-height: 100vh;
}

/* Custom gradient overlay on top of wp:cover's built-in overlay */
.hero .wp-block-cover__background {
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--lum-footer-bg) 74%, transparent) 0%,
      color-mix(in srgb, var(--lum-footer-bg) 46%, transparent) 46%,
      color-mix(in srgb, var(--lum-footer-bg) 18%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--lum-accent) 60%, var(--lum-footer-bg) 40%),
      transparent 55%);
}

/* Background media (image or video) set via Site Editor */
.hero .wp-block-cover__image-background,
.hero .wp-block-cover__video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The hero's background fills the full viewport behind the transparent
   fixed header (see main.main-with-hero in section 5), but the text
   content itself must clear the 80px header so it isn't hidden under it. */
.hero .wp-block-cover__inner-container {
  padding-top: 80px;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 72px;
}

.hero__subtitle {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--lum-accent-soft);
  margin: 0 0 30px;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 8.5rem;
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--lum-white-pure);
  text-shadow: 0 2px 30px color-mix(in srgb, var(--wp--preset--color--black) 22%, transparent);
}

.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--lum-accent-soft);
}

.hero__lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.95;
  letter-spacing: 0.1em;
  color: var(--lum-white-pure);
  margin: 44px 0 52px;
  max-width: 520px;
  text-shadow: 0 1px 16px color-mix(in srgb, var(--wp--preset--color--black) 30%, transparent);
}

.hero__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__badge {
  position: absolute;
  right: 56px;
  bottom: 44px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__badge-number {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--lum-white-pure);
  line-height: 1;
}

.hero__badge-number small {
  font-size: 18px;
  font-style: italic;
}

.hero__badge-text {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lum-white-pure) 70%, transparent);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
/* .btn is applied to the wp:button wrapper div (.wp-block-button).
   Only a minimal reset happens here; actual styling targets the inner .wp-block-button__link. */
.btn {
  display: inline-block;
}

.btn .wp-block-button__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.btn .wp-block-button__link:hover,
.btn .wp-block-button__link:focus-visible {
  opacity: 0.85;
}

.btn--primary .wp-block-button__link {
  position: relative;
  overflow: hidden;
  font-size: 13px;
  color: var(--lum-on-accent);
  background: var(--lum-accent);
  padding: 19px 46px;
}

.btn--outline-white .wp-block-button__link {
  font-size: 13px;
  color: var(--lum-white-pure);
  padding: 19px 30px;
  border: 1px solid color-mix(in srgb, var(--lum-white-pure) 45%, transparent);
  background: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.btn--outline-white .wp-block-button__link:hover,
.btn--outline-white .wp-block-button__link:focus-visible {
  background: var(--lum-white-pure);
  color: var(--lum-footer-bg);
  border-color: var(--lum-white-pure);
  opacity: 1;
}

.btn--outline-accent .wp-block-button__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--lum-text);
  padding: 15px 40px;
  border: 1px solid var(--lum-accent);
  background: none;
}

.btn--cta-primary .wp-block-button__link {
  position: relative;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  color: var(--lum-on-accent);
  background: var(--lum-accent);
  padding: 17px 40px;
}

.btn--cta-outline .wp-block-button__link {
  position: relative;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  color: var(--lum-white-pure);
  padding: 17px 40px;
  border: 1px solid color-mix(in srgb, var(--lum-white-pure) 35%, transparent);
  background: none;
}

/* CTA-style and primary buttons get a shimmer effect that sweeps left to right on hover */
.btn--primary .wp-block-button__link::after,
.btn--cta-primary .wp-block-button__link::after,
.btn--cta-outline .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
      transparent 0%,
      color-mix(in srgb, var(--lum-white-pure) 55%, transparent) 50%,
      transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--primary .wp-block-button__link:hover::after,
.btn--primary .wp-block-button__link:focus-visible::after,
.btn--cta-primary .wp-block-button__link:hover::after,
.btn--cta-primary .wp-block-button__link:focus-visible::after,
.btn--cta-outline .wp-block-button__link:hover::after,
.btn--cta-outline .wp-block-button__link:focus-visible::after {
  left: 150%;
}

.link-underline {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lum-text);
  border-bottom: 1px solid var(--lum-accent);
  padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   8. Concept
   -------------------------------------------------------------------------- */
.concept {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 80px;
  align-items: center;
}

.concept__image-wrap {
  position: relative;
  width: 100%;
}

figure.concept__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.concept__image img {
  width: auto;
  height: 100%;
  object-fit: cover;

}

.concept__image-border {
  position: absolute;
  inset: 14px;
  border: 1px solid color-mix(in srgb, var(--lum-white-pure) 50%, transparent);
  pointer-events: none;
}

.concept__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 22px;
}

.concept__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 1.12;
  margin: 0 0 30px;
  color: var(--lum-text);
}

.concept__title em {
  font-style: italic;
  font-weight: inherit;
}

.concept__text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 2.15;
  letter-spacing: 0.04em;
  color: var(--lum-text-muted);
  margin: 0 0 24px;
}

.concept__text:last-of-type {
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   9. Menu / Price
   -------------------------------------------------------------------------- */
.menu-section__intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.wp-block-paragraph.menu-section__note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 2;
  color: var(--lum-text-light);
  margin: 0 0 64px;
}

.wp-block-group.menu-group {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.menu-category__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--lum-text);
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lum-accent);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--lum-border);
}

.menu-item__name {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--lum-text);
}

.menu-item__time {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--lum-text-faint);
  letter-spacing: 0.06em;
}

.menu-item__price {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--lum-text);
}

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */
.beauty-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.beauty-gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

/* wp:image adds a <figure> wrapper — make it fill the gallery item */
.beauty-gallery__item .wp-block-image {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.beauty-gallery__item .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.beauty-gallery__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lum-footer-bg) 32%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.beauty-gallery__item:hover .wp-block-image img,
.beauty-gallery__item:focus-within .wp-block-image img {
  transform: scale(1.05);
}

.beauty-gallery__item:hover .beauty-gallery__overlay,
.beauty-gallery__item:focus-within .beauty-gallery__overlay {
  opacity: 1;
}

.beauty-gallery__overlay-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  color: var(--lum-white-pure);
  letter-spacing: 0.04em;
}

/* CTA — wp:buttons wrapper */
.beauty-gallery__cta {
  text-align: center;
  margin-top: 48px;
}

.beauty-gallery__cta .wp-block-button__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lum-text);
  padding: 15px 40px;
  border: 1px solid var(--lum-accent);
  border-radius: 999px;
  background: none;
  transition: opacity 0.3s ease;
}

.beauty-gallery__cta .wp-block-button__link:hover,
.beauty-gallery__cta .wp-block-button__link:focus-visible {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   11. Staff
   -------------------------------------------------------------------------- */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 72px;
}

.staff-card {
  text-align: center;
}

.staff-card__photo-wrap {
  position: relative;
  width: 180px;
  margin: 0 auto 28px;
}

/* wp:image wraps img in <figure> — reset figure and style inner img */
figure.staff-card__photo {
  width: 180px;
  height: 180px;
  margin: 0;
}

figure.staff-card__photo img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}

.staff-card__photo-ring {
  position: absolute;
  inset: -9px;
  border: 1px solid var(--lum-accent);
  border-radius: 50%;
  pointer-events: none;
}

.staff-card__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  color: var(--lum-text);
}

.staff-card__role {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 18px;
}

.staff-card__bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.95;
  color: var(--lum-text-light);
  margin: 0;
  max-width: 300px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   12. Testimonials / Voice
   -------------------------------------------------------------------------- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.voice-card {
  margin: 0;
  padding: 44px 40px;
  background: var(--lum-bg);
  border: 1px solid var(--lum-border);
  border-left: 1px solid var(--lum-border);
}

.voice-card__quote-mark {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 44px;
  line-height: 0.6;
  color: var(--lum-accent);
  margin: 0 0 22px;
}

.voice-card__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2.05;
  color: var(--lum-text-secondary);
  margin: 0 0 26px;
}

.voice-card__cite,
.voice-card cite {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--lum-text-faint);
}

/* --------------------------------------------------------------------------
   13. Access / Salon Info
   -------------------------------------------------------------------------- */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* wp:table wraps in <figure class="wp-block-table access-table"> */
.access-table {
  width: 100%;
  margin-bottom: 0;
}

.access-table table {
  border-collapse: collapse;
}

.access-table th {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lum-text);
  text-align: left;
  vertical-align: top;
  padding: 18px 12px 18px 0;
  white-space: nowrap;
  width: 32%;
  border: none;
  border-bottom: 1px solid var(--lum-border-light);
}

.access-table td {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--lum-text-muted);
  padding: 18px 0;
  border: none;
  border-bottom: 1px solid var(--lum-border-light);
}

.access-table__link {
  color: var(--lum-text);
  border-bottom: 1px solid var(--lum-accent);
  padding-bottom: 2px;
}

.access-table__link:hover,
.access-table__link:focus-visible {
  color: var(--lum-accent);
}

.access-map {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--lum-bg-alt) 70%, var(--lum-accent) 30%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-map iframe {
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq-list {
  margin: 0;
  padding: 0;
}

.faq-item {
  border-bottom: 1px solid var(--lum-border-light);
}

/* wp:details — native <summary> replaces custom JS accordion */
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--lum-text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: '';
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--lum-accent);
  outline-offset: -2px;
}

.faq-item summary::after {
  content: "\FF0B";
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 300;
  color: var(--lum-accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
  color: var(--lum-text-light);
  padding-bottom: 28px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. News / Blog
   -------------------------------------------------------------------------- */
.news-grid .news-grid__template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-grid .news-grid__template>li {
  list-style: none;
}

.news-card__image {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 20px;
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card__image:hover img,
.news-card__image:focus-within img {
  transform: scale(1.04);
}

.news-card__date {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--lum-accent);
  margin: 0 0 10px;
  display: block;
}

.news-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--lum-text);
  margin: 0;
}

.news-card__title a {
  color: inherit;
}

/* Placeholder shown by blanky_beauty_featured_image_fallback() when a post
   has no featured image — plain colored background with diagonal stripes,
   matching the block editor's default empty-state look (no icon).
   No margin override here: core's .wp-block-post-featured-image and
   .news-card__image already manage margin correctly. */
.blanky-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--lum-accent) 30%, transparent);
  background-image: linear-gradient(to bottom left,
      transparent calc(50% - 0.5px),
      var(--lum-border-light) calc(50% - 0.5px),
      var(--lum-border-light) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}

/* --------------------------------------------------------------------------
   16. CTA / Reservation
   -------------------------------------------------------------------------- */
.cta__label {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 24px;
}

.cta__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 3.8rem;
  line-height: 1.08;
  margin: 0 0 24px;
  color: var(--lum-white-pure);
}

.cta__title em {
  font-style: italic;
  font-weight: inherit;
}

.cta__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 2;
  color: color-mix(in srgb, var(--lum-white-pure) 60%, transparent);
  margin: 0 0 48px;
}

.cta__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--lum-footer-bg);
  color: color-mix(in srgb, var(--lum-white-pure) 60%, transparent);
  padding: 90px 40px 44px;
  text-align: center;
}

.site-footer__logo {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--lum-white-pure) 92%, transparent);
  margin: 0 0 12px;
  padding-left: 0.2em;
}

.site-footer__tagline {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lum-accent);
  margin: 0 0 40px;
}

.site-footer__nav {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.site-footer__nav .wp-block-navigation__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav .wp-block-navigation-item__content {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--lum-white-pure) 55%, transparent);
}

.site-footer__nav .wp-block-navigation-item__content:hover,
.site-footer__nav .wp-block-navigation-item__content:focus-visible {
  color: color-mix(in srgb, var(--lum-white-pure) 85%, transparent);
}

.site-footer__divider {
  width: 32px;
  height: 1px;
  background: var(--lum-accent);
  margin: 0 auto 28px;
}

.site-footer__copy {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--lum-white-pure) 32%, transparent);
  margin: 0;
}

/* --------------------------------------------------------------------------
   18. Animations
   -------------------------------------------------------------------------- */
@keyframes lumFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   19. Scroll Reveal
   -------------------------------------------------------------------------- */
[data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-reveal="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade-right"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-reveal="fade-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="scale-x"] {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-reveal="scale-x"].is-visible {
  transform: scaleX(1);
}

[data-reveal="fade-scale"] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-reveal="fade-scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   20. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero .wp-block-cover__image-background,
  .hero .wp-block-cover__video-background {
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   21. Single Post Content
   -------------------------------------------------------------------------- */
/* Extra breathing room above/below the single-post content area, on top of
   the base 80px header-clearance padding every main.wp-block-group gets
   (see section 5, Site Header). */
main.wp-block-group.main-single {
  padding-top: 152px;
  padding-bottom: 140px;
}

/* Date / category meta row (see beauty-single-content.php) */
.single-meta {
  align-items: center;
  gap: 22px;
  margin-bottom: 32px;
}

.single-meta .wp-block-post-date,
.single-meta .wp-block-post-terms {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lum-text-faint);
}

/* Small dot flourish between the date and the category */
.single-meta .wp-block-post-date::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 22px;
  border-radius: 50%;
  background: var(--lum-accent);
  vertical-align: middle;
}

.single-meta .wp-block-post-terms a {
  color: var(--lum-accent);
  border-bottom: 1px solid var(--lum-accent);
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
}

.single-meta .wp-block-post-terms a:hover,
.single-meta .wp-block-post-terms a:focus-visible {
  opacity: 0.7;
}

.single-meta+.wp-block-post-featured-image {
  margin-bottom: 56px;
}

.beauty-search {
  margin: 0 auto 3rem auto;
}

/* --------------------------------------------------------------------------
   22. Mobile Navigation Overlay
   -------------------------------------------------------------------------- */
/* wp:navigation uses overlayMenu:"mobile" (core switches to the hamburger
   overlay below 600px). The nav block carries an inline white text color for
   the transparent hero header, so the hamburger icon must flip to dark on
   scrolled headers and on non-front pages, and the opened overlay needs an
   explicit dark panel with light links regardless of page context. */
.site-header--scrolled .site-header__nav .wp-block-navigation__responsive-container-open,
body:not(.home) .site-header__nav .wp-block-navigation__responsive-container-open {
  color: var(--lum-text);
}

/* CRITICAL: a non-none backdrop-filter (or filter/transform) on an ancestor
   establishes the containing block for position:fixed descendants. The core
   overlay (.wp-block-navigation__responsive-container) is fixed with inset 0
   and lives inside .site-header, so once the scrolled header applies its
   glassmorphism backdrop-filter, the overlay stops being viewport-fixed and
   collapses into a small box near the header. While the overlay is open the
   header is fully covered by it, so the filter can be disabled with no
   visual cost. Two selectors because the "has-modal-open" class target
   varies by WP version (<html> in some, the container itself in others);
   :has() detects the open overlay regardless of where that class lands.
   transition:none makes the removal instant instead of animating over 0.5s
   (during which the filter would still be non-none and the broken
   containing block would persist). */
html.has-modal-open .site-header--scrolled,
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

/* Core applies a white background + black text default to the open overlay
   when the nav block has no background (":not(.has-background)" rule).
   The selector below is intentionally raised to 0-5-0 so the dark panel
   reliably beats that core default regardless of stylesheet order. */
.site-header .wp-block-navigation.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--lum-footer-bg);
  color: var(--lum-white-pure);
  padding: 96px 32px 40px;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* High specificity on purpose: must beat the scrolled / non-front-page link
   colors (dark text), which would be invisible on the dark overlay panel. */
.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  color: color-mix(in srgb, var(--lum-white-pure) 85%, transparent);
  font-size: 14px;
}

.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
  color: var(--lum-white-pure);
}

.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__cta .wp-block-navigation-item__content {
  color: var(--lum-white-pure);
  border-color: color-mix(in srgb, var(--lum-white-pure) 45%, transparent);
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--lum-white-pure);
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
/* Tablet and below */
@media (max-width: 1024px) {

  .section,
  .beauty-section {
    padding: 96px 32px;
  }

  .section--cta {
    padding: 110px 32px;
  }

  .hero__content {
    padding-inline: 48px;
  }

  .hero__title {
    font-size: 6.5rem;
  }

  .concept {
    gap: 48px;
  }

  .staff-grid {
    gap: 48px;
  }

  .site-header__nav .wp-block-navigation__container {
    gap: 24px;
  }
}

/* Mobile (WordPress standard breakpoint) */
@media (max-width: 782px) {

  /* Header shrinks from 80px to 64px. Every rule that assumed the 80px
     header height (main padding-top, hero inner padding, single main)
     is kept in sync inside this media query. */
  .site-header__inner {
    height: 64px;
    padding-inline: 20px;
  }

  .site-header__logo {
    font-size: 22px;
  }

  main.wp-block-group {
    padding-top: 64px;
  }

  main.wp-block-group.main-with-hero {
    padding-top: 0;
  }

  main.wp-block-group.main-single {
    padding-top: 112px;
    padding-bottom: 96px;
  }

  .hero .wp-block-cover__inner-container {
    padding-top: 64px;
  }

  /* Sections & containers */
  .section,
  .beauty-section {
    padding: 72px 20px;
  }

  .section--cta {
    padding: 96px 20px;
  }

  .l-container,
  .l-container--narrow,
  .l-container--mid,
  .l-container--small,
  .l-container--xs,
  .l-container--cta,
  .l-container--menu {
    padding-inline: 20px;
  }

  .section-header {
    margin-bottom: 48px;
  }

  .section-header__title,
  .beauty-section__heading {
    font-size: 2.4rem;
  }

  .beauty-section__line {
    margin-bottom: 48px;
  }

  /* Hero: use svh so mobile browser UI bars don't cause a jumpy 100vh */
  .hero.wp-block-cover {
    min-height: 100svh;
  }

  .hero__content {
    padding-inline: 24px;
  }

  .hero__subtitle {
    font-size: 11px;
    letter-spacing: 0.32em;
    margin-bottom: 22px;
  }

  .hero__title {
    font-size: 4.6rem;
    line-height: 0.92;
  }

  .hero__lead {
    font-size: 16px;
    margin: 32px 0 40px;
  }

  .hero__actions {
    gap: 12px;
  }

  .btn--primary .wp-block-button__link {
    padding: 16px 34px;
  }

  .btn--outline-white .wp-block-button__link {
    padding: 16px 26px;
  }

  .hero__badge {
    right: 20px;
    bottom: 18px;
    gap: 10px;
  }

  .hero__badge-number {
    font-size: 28px;
  }

  .hero__badge-number small {
    font-size: 14px;
  }

  /* Concept: stack image above text */
  .concept {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .concept__title {
    font-size: 2.4rem;
  }

  /* Menu list: allow name/price to wrap on narrow screens */
  .menu-item {
    flex-wrap: wrap;
    column-gap: 16px;
  }

  .wp-block-paragraph.menu-section__note {
    margin-bottom: 48px;
  }

  /* Testimonials / Access: single column */
  .voice-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .voice-card {
    padding: 32px 26px;
  }

  .access-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Front-page news grid: 3 -> 2 columns */
  .news-grid .news-grid__template {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }

  /* Core query grids (archive.html / search.html: wp:post-template with
     columnCount 3). Core emits a fixed repeat(3, ...) on its container
     class at 0-1-0 specificity; this chained class selector (0-3-0)
     wins regardless of stylesheet order. */
  .wp-block-post-template.is-layout-grid.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beauty-gallery__grid {
    gap: 10px;
  }

  /* CTA */
  .cta__title {
    font-size: 2.6rem;
  }

  .cta__text {
    margin-bottom: 40px;
  }

  /* Footer */
  .site-footer {
    padding: 64px 20px 36px;
  }

  .site-footer__nav .wp-block-navigation__container {
    gap: 18px 26px;
  }
}

/* Small phones */
@media (max-width: 600px) {
  .hero__title {
    font-size: 3.4rem;
  }

  .section-header__title,
  .beauty-section__heading,
  .concept__title {
    font-size: 2.1rem;
  }

  .staff-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .news-grid .news-grid__template {
    grid-template-columns: 1fr;
  }

  .wp-block-post-template.is-layout-grid.columns-3 {
    grid-template-columns: 1fr;
  }

  .beauty-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Stack the three CTA buttons vertically at full width */
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .cta__actions .btn .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

  .cta__title {
    font-size: 2.2rem;
  }
}