/* Direction B, Warm. Cream and nude grounds, the arch, walnut lines, terracotta only for the Book button and the selected state.
   Tokens come from design/palette.json. Link ../shared/base.css before this file. */

:root {
  --ink: #0b0b0a;
  --charcoal: #161717;
  --cream: #fdebd7;
  --nude: #f5cba8;
  --sand: #d3ba9c;
  --terracotta: #c57e52;
  --terracotta-hover: #b87146;
  --olive: #444631;
  --walnut: #633b22;
  --muted: #5c544c; /* 6.4:1 on Cream; 4.9:1 on Nude. Never on Sand (4.1:1): use Ink there. */

  --walnut-15: rgb(99 59 34 / .15);
  --walnut-30: rgb(99 59 34 / .3);
  --cream-60: rgb(253 235 215 / .6);
  --cream-96: rgb(253 235 215 / .96);
  --shadow-bar: 0 8px 24px rgb(11 11 10 / .2);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --f-sans: "Jost", "Noto Serif SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-italic: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --f-script: "Sacramento", "Segoe Script", "Brush Script MT", cursive;
  --f-zh: "Jost", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; /* Jost has no CJK glyphs, so Chinese falls to Noto; Latin inside a Chinese line stays Jost */

  --gutter: 16px;
  --header-h: 60px;
  --focus-ring: var(--walnut);

  /* shared widgets */
  --mps-work-cols: 2;
  --mps-work-cols-md: 3;
  --mps-work-cols-lg: 3;
  --mps-work-gap: 10px;
  --mps-work-ratio: 3 / 4;
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --header-h: 76px; --mps-work-gap: 16px; }
}

/* ---------- base ---------- */
html { overflow-x: hidden; scroll-padding-top: calc(var(--header-h) + 16px); scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { height: auto; }
p { text-wrap: pretty; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--book { max-width: calc(760px + var(--gutter) * 2); }

.skip {
  position: absolute; left: 8px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 500;
}
.skip:focus { top: 8px; }

/* Chinese lines: Olive, Noto Serif SC 600. Never on the same line as an English heading. */
.zh-line {
  font: 600 16px/1.5 var(--f-zh);
  color: var(--olive);
  letter-spacing: .04em;
}
html[lang^="zh"] .zh-line { display: none; }
/* Chinese mode: Latin stays Jost, Chinese falls through to Noto Serif SC (second in --f-sans). Headings are Olive 600. */
/* keep-all keeps two-character words whole, but a Chinese heading has no spaces, so without a break opportunity it cannot wrap at all
   (the old hero H1 pushed the page to 526px at 390). The hero H1 carries U+200B between its phrases (data-zh); overflow-wrap is the net. */
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
html[lang^="zh"] .hero__title, html[lang^="zh"] .h2, html[lang^="zh"] .svc-card__title, html[lang^="zh"] .menu-full__name,
html[lang^="zh"] .about__q, html[lang^="zh"] .map__title {
  font-family: var(--f-zh); font-weight: 600; color: var(--olive); letter-spacing: .03em;
}
html[lang^="zh"] .hero__title { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.25; }
html[lang^="zh"] .h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.2; }
html[lang^="zh"] .hero__sub, html[lang^="zh"] p { line-height: 1.75; }

/* ---------- headings ---------- */
.h2 {
  font: 400 clamp(30px, 3.8vw, 48px)/1.1 var(--f-sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h2 em, .hero__title em {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  color: var(--walnut);
  letter-spacing: 0;
}
.sec { padding-block: 72px; }
@media (min-width: 768px) { .sec { padding-block: var(--s9); } }
.sec + .sec { padding-top: 0; } /* two sections in a row share one gap, not two */
.nowrap { white-space: nowrap; }
.sec-head { display: grid; gap: 6px; margin-bottom: 32px; }
@media (min-width: 768px) { .sec-head { margin-bottom: 40px; } }
.sec-head .zh-line { font-size: 17px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 500 15px/1 var(--f-sans); text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--ink); background: transparent;
  transition: transform 100ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--terracotta); }
.btn--sm { min-height: 40px; padding: 0 20px; }
.btn--lg { min-height: 48px; padding: 0 28px; }
.btn--outline { border: 1px solid var(--walnut); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--terracotta-hover); }
  .btn--outline:hover { background: var(--nude); }
}

.link-under {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
  font: 500 15px/1.2 var(--f-sans); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--walnut);
  transition: transform 100ms var(--ease-out);
}
.link-under:active { transform: scale(.97); }
.link-under--accent { text-decoration-color: var(--terracotta); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--walnut-15); }
.site-header__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; height: var(--header-h);
}
.site-header__start { justify-self: start; }
.site-header__end { justify-self: end; }

.lockup {
  display: grid; justify-items: center; gap: 3px; margin: 0;
  color: var(--olive); text-decoration: none;
}
a.lockup { min-height: 44px; align-content: center; }
.lockup img { width: auto; height: 28px; }
.lockup span { font: 400 9px/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; padding-left: .24em; }
@media (min-width: 768px) { .lockup img { height: 30px; } }
.lockup--cream { color: var(--cream); }

.nav { display: none; }
@media (min-width: 768px) {
  .nav { display: flex; align-items: center; gap: 0; white-space: nowrap; }
  .nav a, .nav .lang-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    font: 400 14px/1 var(--f-sans); color: var(--ink); text-decoration: none; white-space: nowrap;
  }
  .nav :first-child { margin-left: -8px; }
  .menu-btn, .menu { display: none !important; }
}
@media (min-width: 1024px) { .nav a, .nav .lang-btn { padding: 0 12px; } .nav :first-child { margin-left: -12px; } }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, .nav .lang-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--walnut); }
}

.lang-btn {
  border: 0; background: none; padding: 0; color: var(--ink);
  font: 400 14px/1 var(--f-sans);
}
.lang-btn:lang(zh) { font-family: var(--f-zh); }

.menu-btn {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px;
  border: 0; border-radius: 50%; background: none;
}
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 150ms ease;
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 1px solid var(--walnut-15);
  animation: fadein 200ms var(--ease-out) both;
}
.menu__list { list-style: none; margin: 0; padding: 8px var(--gutter) 16px; display: grid; }
.menu__list a, .menu__list .lang-btn {
  display: flex; align-items: center; min-height: 48px; width: 100%;
  font: 400 18px/1 var(--f-sans); color: var(--ink); text-decoration: none; text-align: left;
  border-bottom: 1px solid var(--walnut-15);
}
.menu__list li:last-child .lang-btn { border-bottom: 0; }

/* ---------- arch (hero and visit) ---------- */
.arch { position: relative; width: 100%; }
.arch__frame {
  position: relative; overflow: hidden; background: var(--sand);
  border-radius: 999px 999px 0 0; /* radii clamp to half the width: a true arch */
  aspect-ratio: 3 / 4.1;
}
.arch__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 600ms ease; }
.arch__line {
  position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--terracotta); border-radius: 999px 999px 0 0;
  transform: translate(-24px, 24px);
}
@media (hover: hover) and (pointer: fine) {
  .arch__frame:hover img { transform: scale(1.03); }
}

/* ---------- hero ---------- */
.hero { min-height: 92svh; display: grid; align-items: center; padding-block: 20px 48px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; text-align: center; }
.hero__art { width: min(76%, 340px); order: -1; margin-bottom: 24px; } /* the offset outline pokes out left (into the 12% side margin) and 24px below, so the headline gets that much extra room */
.hero__art .arch { width: 100%; }
.hero__copy { display: grid; gap: 14px; justify-items: center; max-width: 36rem; min-width: 0; }
.hero__title {
  font: 400 clamp(36px, 10vw, 40px)/1.06 var(--f-sans);
  letter-spacing: -0.015em; text-wrap: balance;
}
.hero__title .line { display: inline; }
.hero__zh { font-size: 19px; }
.hero__sub { color: var(--muted); max-width: 26rem; margin-top: 2px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; margin-top: 10px; }

@media (min-width: 480px) {
  .hero__title .line { display: block; }
}
@media (min-width: 768px) {
  .hero__title { font-size: clamp(44px, 5.6vw, 76px); }
}
@media (min-width: 900px) { .hero__title { font-size: clamp(40px, 5.2vw, 76px); } }
@media (min-width: 900px) {
  /* The services cards sit right under the hero: keep the hero to the arch's own height so their titles show on a 900px screen. */
  .hero { min-height: min(92svh, 680px); padding-block: 32px 64px; }
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
    text-align: left; justify-items: stretch;
  }
  .hero__copy { grid-column: 1 / span 7; justify-items: start; max-width: none; gap: 18px; }
  .hero__art { grid-column: 8 / span 5; order: 0; width: 100%; max-width: 440px; justify-self: end; margin-bottom: 0; }
  .hero__cta { justify-content: flex-start; gap: 8px 28px; margin-top: 14px; }
  .hero__sub { max-width: 28rem; }
  .hero__zh { font-size: 22px; }
}

/* hero entrance, once per load */
@keyframes rise24 { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.hero .arch__frame { animation: rise24 700ms var(--ease-out) 80ms both; }
.hero .arch__line { animation: fadein 400ms ease 300ms both; }
/* The headline rises as one block at every width. (It used to animate line by line with a 60ms stagger; the lines went missing in full-page
   captures taken after scrolling, and a 60ms offset between two lines cannot be seen anyway.) */
.hero__title { animation: rise16 500ms var(--ease-out) 120ms both; }
.hero__zh, .hero__sub, .hero__cta { animation: rise16 500ms var(--ease-out) both; }
.hero__zh { animation-delay: 240ms; }
.hero__sub { animation-delay: 300ms; }
.hero__cta { animation-delay: 360ms; }

/* ---------- services ---------- */
/* Phones: three compact rows (title, 中文 and Book on one line) so the hair stays the first thing after the hero.
   From 768px: the three Nude cards of the cover. No per-card price line: the one note sits in Full menu. */
.services { position: relative; z-index: 2; }
.svc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0;
  padding: 8px 6px 8px 22px; border-radius: 22px; background: var(--nude);
}
.svc-card__title { grid-column: 1; font: 500 18px/1.3 var(--f-sans); }
.svc-card__zh { grid-column: 1; font-size: 15px; line-height: 1.35; }
.svc-card__blurb { display: none; font: 400 15px/1.5 var(--f-sans); }
.svc-card .link-under { grid-column: 2; grid-row: 1 / span 3; padding-inline: 16px; }
@media (min-width: 768px) {
  .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .svc-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 28px; border-radius: 24px; }
  .svc-card__blurb { display: block; margin-top: 4px; }
  .svc-card .link-under { align-self: flex-start; margin-top: auto; padding-inline: 0; }
}

.svc-fallback { margin: 16px 0; padding-left: 20px; }

.menu-full { margin-top: 24px; }
.menu-full summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; cursor: pointer;
  border: 1px solid var(--walnut); border-radius: 999px; list-style: none;
  font: 500 15px/1 var(--f-sans);
  transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.menu-full summary::-webkit-details-marker { display: none; }
.menu-full summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out);
}
.menu-full[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.menu-full summary:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .menu-full summary:hover { background: var(--nude); } }
.menu-full__note { margin-top: 16px; font-size: 15px; color: var(--muted); }
.menu-full__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
@media (min-width: 768px) { .menu-full__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.menu-full__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--walnut-15);
}
.menu-full__name { font: 500 17px/1.35 var(--f-sans); }
.menu-full__zh { grid-column: 1; font-size: 15px; }
.menu-full__blurb { grid-column: 1; font: 400 15px/1.5 var(--f-sans); color: var(--muted); }
.menu-full__row .link-under { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding-inline: 12px; margin-right: -12px; }
.menu-full__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--walnut-15); }

/* scroll reveal (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--ease-out) calc(var(--i, 0) * 50ms), transform 450ms var(--ease-out) calc(var(--i, 0) * 50ms);
}

/* ---------- the work (shared portfolio) ---------- */
/* Reserve the grid's height (8 tiles on phones, 12 from 768px) so the page below does not jump when the photos arrive. JS only: no empty hole without it. */
.js .work__host { min-height: calc(4 * ((100vw - 42px) / 2 * 4 / 3 + 50px) + 160px); }
@media (min-width: 768px) { .js .work__host { min-height: calc(4 * ((min(100vw, 1200px) - 112px) / 3 * 4 / 3 + 50px) + 190px); } }
.work__noscript { margin-top: 16px; }
.mps-work__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mps-work__filter {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--nude); color: var(--ink); font: 500 14px/1 var(--f-sans);
  transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.mps-work__filter:active { transform: scale(.97); }
@media (pointer: coarse) { .mps-work__filter, .btn--sm { min-height: 44px; } }
/* the selected state is the fill AND a 2px Ink ring (Terracotta alone is under 3:1 against Cream and Nude) */
.mps-work__filter[aria-pressed="true"] { background: var(--terracotta); box-shadow: inset 0 0 0 2px var(--ink); }
.mps-work__grid { transition: opacity 150ms ease; list-style: none; margin: 0; padding: 0; }
.mps-work[data-filtering] .mps-work__grid { opacity: 0; }
.mps-work__figure { display: grid; gap: 10px; }
.mps-work__open { border-radius: 12px; overflow: hidden; background: var(--nude); aspect-ratio: 3 / 4; }
.mps-work__img { display: block; border-radius: 12px; }
.mps-work__caption { display: block; line-height: 1.35; padding-inline: 2px; }
.mps-work__look { display: block; font: 500 15px/1.3 var(--f-sans); color: var(--ink); }
.mps-work__category, .mps-work__look-zh { font: 400 13px/1.4 var(--f-sans); color: var(--muted); }
.mps-work__look-zh { font-family: var(--f-zh); }
/* a Chinese look name wraps only at its spaces, never inside a word */
.mps-work__look-zh, .mps-work__caption :lang(zh), .mps-lightbox__caption :lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.mps-work__look-zh::before { content: " · "; }
.mps-work__more {
  display: block; margin: 32px auto 0; min-height: 48px; padding: 0 28px;
  border: 1px solid var(--walnut); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 15px/1 var(--f-sans);
  transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.mps-work__more:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mps-work__more:hover { background: var(--nude); } }
.mps-work__empty { color: var(--muted); }

/* ---------- team ---------- */
.team__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
@media (min-width: 768px) { .team__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.team-card { display: grid; justify-items: center; text-align: center; align-content: start; min-width: 0; }
.niche {
  width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--charcoal);
  border: 3px solid var(--walnut); border-bottom-width: 6px;
  border-radius: 999px 999px 0 0;
}
/* The 4:5 poster sits whole at the bottom of the 3:4 niche, so the arch curve never cuts the stylist's hair. The strip above it is niche Charcoal;
   the mask fades the poster's top edge into it. */
.niche img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 600ms ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 5.5%, #000 8.5%); mask-image: linear-gradient(to bottom, transparent 5.5%, #000 8.5%);
}
@media (hover: hover) and (pointer: fine) { .niche:hover img { transform: scale(1.03); } }
.team-card__name { margin-top: 12px; margin-bottom: 8px; font: 400 56px/1.2 var(--f-script); color: var(--walnut); padding-inline: 4px; }
.team-card__role { font: 400 14px/1.4 var(--f-sans); margin-top: 2px; }
/* phones: title and years always sit on two lines, so the four cards keep the same height and their Book links line up */
@media (max-width: 767px) { .team-card__role span { display: block; } .team-card__sep { display: none !important; } }
.team-card__zh { font-size: 13px; }
.team-card .link-under { margin-top: 6px; font-size: 14px; text-decoration-color: var(--terracotta); }

/* ---------- booking (shared widget in a Nude card) ---------- */
/* #book starts one header-height above its card, so any jump to it (link, scrollIntoView, review tool)
   lands with the card title just under the sticky header. The negative margin keeps the page spacing unchanged. */
.book {
  padding-block: calc(var(--header-h) + 24px) 72px;
  margin-top: calc(-1 * var(--header-h));
  scroll-margin-top: calc(-1 * (var(--header-h) + 16px));
}
@media (min-width: 768px) { .book { padding-block: calc(var(--header-h) + 32px) var(--s9); } }
.book__card { background: var(--nude); border-radius: 28px; padding: 20px; }
@media (min-width: 768px) { .book__card { padding: 32px; } }
.book__card noscript p { margin-top: 12px; font-size: 15px; }

.mps-book > * + * { margin-top: 20px; }
.mps-book__title { font: 500 22px/1.25 var(--f-sans); }
.mps-book__lede { font: 400 14px/1.5 var(--f-sans); margin-top: 4px !important; }
.mps-book__sample {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--cream-60); color: var(--walnut); font: 500 12px/1.4 var(--f-sans);
}
.mps-book__group { min-width: 0; }
.mps-book__legend { font: 500 13px/1.3 var(--f-sans); margin-bottom: 10px; }
.mps-book__group > * + * { margin-top: 10px; }

.mps-book__chip {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font: 400 14px/1.2 var(--f-sans);
  transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.mps-book__chip:active { transform: scale(.97); }
.mps-book__chip[aria-pressed="true"] { background: var(--terracotta); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.mps-book__chip[aria-disabled="true"], .mps-book__chip:disabled { opacity: .38; }
.mps-book__chip[aria-disabled="true"] { text-decoration: line-through; }
.mps-book__chip[aria-disabled="true"][aria-pressed="false"] { cursor: not-allowed; }
.mps-book__times, .mps-book__services, .mps-book__stylists { display: flex; flex-wrap: wrap; gap: 8px; }

/* day strip: 52 x 60 pills */
.mps-book__days { gap: 8px; padding: 2px 2px 12px; scrollbar-width: thin; scrollbar-color: var(--walnut-30) transparent; }
.mps-book__days .mps-book__day {
  width: 52px; min-width: 52px; min-height: 64px; padding: 6px 0;
  display: grid; align-content: center; justify-items: center; gap: 0; line-height: 1.15;
}
.mps-book__day-wd { font: 500 12px/1.2 var(--f-sans); }
.mps-book__day-num { font: 400 20px/1.15 var(--f-sans); }
.mps-book__day-mon { font: 400 10px/1.2 var(--f-sans); color: var(--muted); }
.mps-book__day[aria-pressed="true"] .mps-book__day-mon { color: var(--ink); }
.mps-book__day--today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--walnut); }
.mps-book__day--closed { opacity: .38; text-decoration: line-through; }
.mps-book__day--out { opacity: .25; }
.mps-book__more {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink);
  font: 500 14px/1 var(--f-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--walnut);
}
.mps-book__day-note { font: 400 14px/1.5 var(--f-sans); }
.mps-book__day-note:empty { margin: 0 !important; }

/* month (More dates) */
.mps-book__month-head { margin-bottom: 8px; }
.mps-book__month-title { font: 500 16px/1.2 var(--f-sans); }
.mps-book__month-prev, .mps-book__month-next {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cream); font-size: 22px; line-height: 1;
}
.mps-book__month-prev:disabled, .mps-book__month-next:disabled { opacity: .3; }
.mps-book__weekdays { margin-bottom: 4px; font: 500 12px/1.4 var(--f-sans); color: var(--muted); }
.mps-book__cells { gap: 4px; }
.mps-book__cells .mps-book__day { width: 100%; min-width: 0; min-height: 44px; aspect-ratio: 1; padding: 0; display: grid; place-items: center; }
.mps-book__cells .mps-book__day-num { font-size: 16px; }

/* stylists: 32px round portraits with a Walnut ring */
.mps-book__stylist { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; }
.mps-book__stylist:not(:has(img)) { padding-left: 16px; }
.mps-book__stylist-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--walnut); background: var(--charcoal); }

.mps-book__field + .mps-book__field { margin-top: 14px; }
.mps-book__details, .mps-book__group--details { display: grid; gap: 14px; }
.mps-book__label { font: 500 13px/1.3 var(--f-sans); margin-bottom: 6px; }
.mps-book__input, .mps-book__textarea {
  padding: 12px 16px; border: 1px solid var(--walnut); border-radius: 16px;
  background: var(--cream); color: var(--ink); font: 400 16px/1.4 var(--f-sans);
}
.mps-book__textarea { resize: vertical; min-height: 84px; }
.mps-book__input:focus-visible, .mps-book__textarea:focus-visible { outline-offset: 1px; border-color: var(--walnut); }
.mps-book__count { display: block; text-align: right; font: 400 12px/1.4 var(--f-sans); color: var(--muted); margin-top: 4px; }

.mps-book__summary { display: grid; gap: 10px; padding-top: 4px; }
.mps-book__summary > * + * { margin-top: 0; }
.mps-book__summary-title { font: 500 16px/1.3 var(--f-sans); }
.mps-book__summary-line { font: 500 14px/1.4 var(--f-sans); }
.mps-book__summary-line:empty { display: none; }
.mps-book__preview-label { font: 500 12px/1.4 var(--f-sans); color: var(--muted); }
.mps-book__preview { padding: 16px; border-radius: 16px; background: var(--cream); font: 400 14px/1.5 var(--f-sans); }
.mps-book__hint { font: 400 14px/1.4 var(--f-sans); color: var(--walnut); min-height: 1.4em; }
.mps-book__send {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--terracotta); color: var(--ink); font: 500 15px/1 var(--f-sans);
  transition: transform 100ms var(--ease-out), background-color 150ms ease, opacity 150ms ease;
}
.mps-book__send::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--wa-mask) center / contain no-repeat; mask: var(--wa-mask) center / contain no-repeat;
}
.mps-book__send:active { transform: scale(.97); }
.mps-book__send[aria-disabled="true"] { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .mps-book__send:not([aria-disabled="true"]):hover { background: var(--terracotta-hover); } }
.mps-book__fine { font: 400 13px/1.45 var(--f-sans); color: var(--muted); }
.mps-book__alt { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.4 var(--f-sans); justify-self: start; padding-block: 0; text-underline-offset: 5px; text-decoration-color: var(--walnut); }

:root {
  --wa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2a9.8 9.8 0 0 0-8.4 14.8L2.3 21.7l4.8-1.3A9.8 9.8 0 1 0 12 2.2Zm0 1.8a8 8 0 1 1-4.2 14.8l-.3-.2-2.8.8.8-2.7-.2-.3A8 8 0 0 1 12 4Zm-3.1 3.7c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.3s1 2.7 1.2 2.9c.1.2 2 3.1 4.9 4.3 2.4.9 2.9.8 3.4.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4l-.5-.3-1.9-.9c-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3 0-.4.1-.6l.4-.5.3-.5v-.5l-.9-2.1c-.2-.5-.4-.5-.6-.5h-.6Z'/%3E%3C/svg%3E");
}

/* ---------- about ---------- */
.about { position: relative; isolation: isolate; background: var(--sand); padding-block: 80px; }
.about::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("./travertine.webp") center / cover no-repeat; opacity: .3;
}
@media (min-width: 768px) { .about { padding-block: 112px; } }
.about__inner { max-width: calc(680px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); text-align: center; display: grid; justify-items: center; }
.about__m { width: 48px; height: auto; }
.about__h { font: 500 30px/1.15 var(--f-sans); color: var(--olive); margin-top: 20px; }
.about__h-zh { font-size: 24px; margin-top: 4px; }
.about .zh-line { color: var(--olive); }
.about__line { font: 400 20px/1.55 var(--f-sans); margin-top: 28px; max-width: 34rem; text-wrap: balance; }
.about__line-zh { font-size: 17px; margin-top: 8px; }
.about__rule { width: 64px; height: 0; border: 0; border-top: 1px solid var(--walnut); margin: 40px 0 36px; }
.about__q { font: 500 20px/1.3 var(--f-sans); }
.about__q-zh { font-size: 16px; margin-top: 2px; }
.details { list-style: none; margin: 28px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; text-align: left; }
.details li { display: grid; gap: 2px; align-content: start; font: 400 16px/1.45 var(--f-sans); }
.details li::before { content: ""; width: 24px; height: 1px; background: var(--walnut); margin-bottom: 12px; }
.details__zh { font-size: 14px; }
.about__policy { margin-top: 40px; display: grid; gap: 10px; justify-items: center; font: 400 16px/1.6 var(--f-sans); max-width: 34rem; }
.about__policy .zh-line { font-size: 14px; margin-top: -4px; }
.about__founder { font-size: 15px; }
.about__tagline { margin-top: 40px; font: 500 16px/1.4 var(--f-sans); color: var(--olive); text-wrap: balance; }
.about__tagline-zh { font-size: 15px; margin-top: 2px; }

/* ---------- visit ---------- */
.visit__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; align-items: start; } }
.visit__info { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.visit__info .sec-head { margin-bottom: 4px; }
.visit__addr { font-style: normal; display: grid; gap: 2px; }
.visit__up { font-weight: 500; }
.visit__hours { color: var(--muted); }
.visit__links, .visit__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.visit__contact a, .visit__social a { display: inline-flex; align-items: center; min-height: 44px; }
.visit__rec a { display: inline-block; padding-block: 10px; } /* may wrap to two lines, so block padding rather than a flex box (a flex box would split the nowrap date into its own column) */
.visit__contact a { text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--walnut); }
/* underlines are for actions (maps, WhatsApp, call); the socials and the review line are quiet text until hovered or focused */
.visit__social a, .visit__rec a { text-decoration: none; color: var(--muted); font-size: 15px; }
.visit__social { gap: 0 20px; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .visit__social a:hover, .visit__rec a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--walnut); }
}
.visit__social a:focus-visible, .visit__rec a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* under 900px the arch sits centred (the 24px outline pokes out to the left, so the pair is nudged 12px right to look centred) */
.visit__art { position: relative; left: 12px; width: min(calc(100% - 24px), 440px); margin-inline: auto; }
@media (min-width: 900px) { .visit__art { left: 0; width: 100%; margin-left: auto; } }
.arch--visit .arch__frame { aspect-ratio: 4 / 5; }
.arch--visit .arch__frame img { object-position: 50% 40%; }

.map { width: 100%; max-width: 520px; margin-top: 10px; }
.map__facade { display: grid; gap: 6px; justify-items: start; padding: 24px; border-radius: 24px; background: var(--nude); }
.map__title { font: 500 18px/1.3 var(--f-sans); }
.map__note { font: 400 14px/1.5 var(--f-sans); color: var(--muted); margin-bottom: 8px; }
.map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 24px; background: var(--nude); }

/* ---------- footer ---------- */
.foot {
  --focus-ring: var(--cream);
  background: var(--walnut); color: var(--cream);
  padding: 56px 0 120px; /* bottom room so the mobile bar never covers it */
}
@media (min-width: 768px) { .foot { padding: 72px 0 56px; } }
.foot a { color: var(--cream); }
.foot__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.7fr .8fr 1.6fr auto; align-items: start; gap: 40px; } .foot__draft { grid-column: 1 / -1; } }
.foot__brand { display: grid; gap: 14px; justify-items: start; }
.foot .lockup { justify-items: start; }
.foot .lockup span { padding-left: 0; }
.foot__service { font: 400 11px/1.6 var(--f-sans); letter-spacing: .2em; color: var(--sand); }
.foot__links, .foot__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
@media (min-width: 900px) { .foot__links { display: grid; gap: 0; } }
.foot__links a, .foot__facts a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__facts p { font-size: 15px; display: flex; align-items: center; min-height: 44px; }
.foot__links a { font-size: 15px; }
.foot__lang { display: flex; gap: 4px; }
.foot .lang-btn {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; color: var(--cream);
  border: 1px solid transparent;
}
.foot .lang-btn[aria-pressed="true"] { border-color: var(--sand); }
.foot__draft { font-size: 13px; color: var(--sand); }
.foot__draft a { color: var(--sand); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- mobile booking bar ---------- */
.bar {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; border-radius: 999px; background: var(--terracotta); color: var(--ink);
  font: 500 15px/1 var(--f-sans); text-decoration: none; box-shadow: var(--shadow-bar);
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out), visibility 0s;
}
.js .bar:not([data-live]) { visibility: hidden; } /* never flashes before the script has decided */
.bar:active { transform: scale(.97); }
.bar[data-hidden] {
  transform: translateY(24px); opacity: 0; visibility: hidden;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s 220ms;
}
@media (min-width: 768px) { .bar { display: none; } }

/* ---------- lightbox (shared dialog) ---------- */
.mps-lightbox::backdrop { background: transparent; } /* the dialog paints its own Cream 96% */
.mps-lightbox {
  --focus-ring: var(--walnut);
  background: var(--cream-96); color: var(--ink);
  opacity: 0;
  transition: opacity 190ms var(--ease-out), overlay 190ms allow-discrete, display 190ms allow-discrete;
}
.mps-lightbox[open] { opacity: 1; transition-duration: 240ms; }
@starting-style { .mps-lightbox[open] { opacity: 0; } }
.mps-lightbox__figure { transform: scale(.96); transition: transform 190ms var(--ease-out); gap: 12px; padding: 8px 0; }
.mps-lightbox[open] .mps-lightbox__figure { transform: none; transition-duration: 240ms; }
@starting-style { .mps-lightbox[open] .mps-lightbox__figure { transform: scale(.96); } }
.mps-lightbox__img { border-radius: 12px; max-height: 74vh; max-height: 74dvh; }
.mps-lightbox__caption { display: grid; gap: 2px; justify-items: center; text-align: center; }
.mps-lightbox__look { font: 500 17px/1.3 var(--f-sans); }
.mps-lightbox__category, .mps-lightbox__look-zh { font: 400 14px/1.4 var(--f-sans); color: var(--muted); }
.mps-lightbox__counter { font: 400 13px/1.4 var(--f-sans); color: var(--muted); padding-block: 6px 2px; }
.mps-lightbox__close, .mps-lightbox__prev, .mps-lightbox__next {
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--nude); color: var(--ink); font: 400 26px/1 var(--f-sans);
  width: 44px; height: 44px; margin: 8px;
  transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.mps-lightbox__close:active, .mps-lightbox__prev:active, .mps-lightbox__next:active { transform: scale(.97); }
.mps-lightbox__book {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; margin-bottom: 16px;
  border-radius: 999px; background: var(--terracotta); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--f-sans);
  transition: transform 100ms var(--ease-out), background-color 150ms ease;
}
.mps-lightbox__book:active { transform: scale(.97); }
@media (max-width: 599px) {
  .mps-lightbox__prev, .mps-lightbox__next { width: 36px; height: 36px; margin: 4px; font-size: 22px; }
}

/* ---------- reduced motion: everything fully visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .arch__frame, .hero__title, .hero__title .line, .hero__zh, .hero__sub, .hero__cta, .menu {
    animation: none; opacity: 1; transform: none;
  }
  .hero .arch__line { animation: none; opacity: 1; } /* keeps its 24px offset */
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .arch__frame img, .niche img { transition: none; }
  .arch__frame:hover img, .niche:hover img { transform: none; }
  .mps-lightbox, .mps-lightbox[open], .mps-lightbox__figure, .mps-lightbox[open] .mps-lightbox__figure { transition: none; }
  .mps-lightbox, .mps-lightbox__figure { transform: none; }
  .bar, .bar[data-hidden] { transition: none; }
}