/* Direction C, Gallery. A warm white wall; the hair does the talking.
   One family (Jost) plus Noto Sans SC for the Chinese. No serif, no script, no texture, almost no motion.
   Spec: design/directions.md, section C. Shared structure: ../shared/base.css (linked first). */

:root {
  /* palette.json, Gallery subset only: no Cream, Nude, Sand, Terracotta or Olive here */
  --ink: #0b0b0a;
  --charcoal: #161717;
  --champagne: #c9c0b2;
  --bronze: #84694e;
  --plaster: #f5f1eb;
  --muted: #5c544c;          /* 6.9:1 on Plaster */
  --disabled: #b5ada3;       /* past days */
  --field-line: #8f857a;     /* name and note borders: 3.2:1 on Plaster (WCAG 1.4.11 wants 3:1; Champagne was 1.6:1) */
  --skeleton: #ece7df;
  --sans: "Jost", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  --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;

  --header-h: 64px;
  --gutter: 16px;
  --focus-ring: var(--ink);

  /* knobs read by base.css for the portfolio grid */
  --mps-work-ratio: 3 / 4;
  --mps-work-cols: 2;
  --mps-work-cols-md: 3;
  --mps-work-cols-lg: 4;
  --mps-work-gap: 8px;
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --mps-work-gap: 12px; }
}

/* ---------- page ---------- */
html {
  overflow-x: hidden;
  scroll-padding-top: calc(var(--header-h) + 8px);
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  overflow-x: clip;
  min-height: 100vh;
  background: var(--plaster);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(zh-Hans-MY) { letter-spacing: 0.02em; }
.zh-aside { font-size: 14px; line-height: 1.5; color: var(--muted); }
html[data-lang="zh"] .zh-aside { display: none; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-weight: 300; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em; }
:lang(zh-Hans-MY) h1, :lang(zh-Hans-MY) h2, h1:lang(zh-Hans-MY), h2:lang(zh-Hans-MY) { font-weight: 400; letter-spacing: 0.02em; }
a { text-underline-offset: 5px; text-decoration-thickness: 1px; }
.plain { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

.skip {
  position: absolute; left: 8px; top: -64px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--plaster); font-weight: 500; font-size: 14px;
}
.skip:focus { top: 8px; }

/* ---------- 1. header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--plaster);
  border-bottom: 1px solid var(--champagne);
}
.header-row { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--ink); line-height: 0; text-decoration: none; min-width: 0; }
.brand svg { height: 28px; width: auto; max-width: 100%; }
@media (min-width: 768px) { .brand svg { height: 32px; } }

.site-nav { display: flex; align-items: center; gap: 2px; margin-right: 12px; }
.site-nav a, .lang-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 400 14px/1 var(--sans); color: var(--ink); text-decoration: none; background: none; border: 0;
}
.lang-toggle { margin-left: 4px; }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover, .lang-toggle:hover { text-decoration: underline; text-underline-offset: 6px; }
}

.pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: var(--plaster);
  font: 500 15px/1 var(--sans); text-decoration: none;
  transition: transform 100ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }

.menu-btn { display: none; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; position: relative; }
.menu-btn__bars, .menu-btn__bars::before {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: var(--ink); content: "";
  transition: transform 150ms var(--ease-out);
}
.menu-btn__bars { top: 20px; }
.menu-btn__bars::before { left: 0; top: 7px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(-7px) rotate(-90deg); top: 7px; }

@media (max-width: 767px) {
  .menu-btn { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--gutter) 12px; background: var(--plaster); border-bottom: 1px solid var(--champagne);
  }
  .site-nav[data-open] { display: flex; }
  .site-nav a, .lang-toggle { min-height: 48px; padding: 0; font-size: 16px; border-top: 1px solid rgb(201 192 178 / 0.5); }
  .site-nav a:first-child { border-top: 0; }
  .lang-toggle { margin: 0; width: 100%; text-align: left; }
}

/* ---------- 2. hero = the work ---------- */
.hero-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 0 8px;
}
.hero-copy { min-width: 0; }
h1 {
  font-size: 30px; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
}
@media (min-width: 480px) { h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; } }
/* Chinese glyphs are denser than Jost 300: keep the tagline lighter and on one line where it fits */
h1 .nb { display: inline-block; }
h1:lang(zh-Hans-MY) { font-size: 26px; line-height: 1.25; letter-spacing: 0.03em; }
@media (min-width: 480px) { h1:lang(zh-Hans-MY) { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.2; } }
.hero-zh { margin-top: 6px; font-size: 14px; letter-spacing: 0.06em; }
.hero-meta { max-width: 460px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.hero-book { display: none; }

@media (min-width: 768px) {
  .hero-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 40px 0 12px; }
  .hero-zh { font-size: 15px; }
  .hero-meta { flex: none; max-width: 340px; text-align: right; }
  .hero-book {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
    font-size: 14px; font-weight: 500; color: var(--ink);
  }
}

/* From 1024px the headline sits on one line, as in the moodboard, and the meta block narrows to make room.
   That pulls the grid up so more of the work is above the fold. */
@media (min-width: 1024px) {
  .hero-row { padding-top: 28px; }
  h1 { font-size: clamp(32px, 3.4vw, 48px); white-space: nowrap; text-wrap: nowrap; }
  h1:lang(zh-Hans-MY) { font-size: clamp(28px, 3.1vw, 44px); }
  .hero-meta { max-width: 280px; }
}

.work-stage { padding-bottom: 16px; }

/* filters: text only, active one underlined in Bronze */
.mps-work__filters { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 16px; }
/* The first label sits flush with the grid's left edge: no min-width, the 44px height and the right padding make the target. */
.mps-work__filter {
  min-width: 44px; min-height: 44px; padding: 0 20px 0 0; background: none; border: 0; text-align: left;
  font: 400 15px/1 var(--sans); color: var(--muted);
}
.mps-work__filter[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 9px;
}
@media (hover: hover) and (pointer: fine) {
  .mps-work__filter:hover { color: var(--ink); }
}

/* grid: 3:4 tiles, no radius, captions always visible */
.mps-work__item { margin: 0; }
.mps-work__open { cursor: pointer; background: var(--skeleton); }
.mps-work__img { background: var(--skeleton); transition: opacity 150ms ease; }
.mps-work__caption {
  margin-top: 8px; min-height: calc(2 * 1.35em); font-size: 13px; line-height: 1.35; color: var(--ink);
}
@media (min-width: 1024px) { .mps-work__caption { min-height: 1.35em; } }
.mps-work__category { margin-left: 0.4em; color: var(--muted); white-space: nowrap; }
.mps-work__category::before { content: "· "; }
.mps-work__caption .mps-work__look-zh { display: none; }

/* one motion on load: images fade in, no movement (300ms). Only until the first filter click. */
.work-stage[data-intro] .mps-work__img { opacity: 0; transition: opacity 300ms var(--ease-out); }
.work-stage[data-intro] .mps-work__img.is-loaded { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .mps-work__open:hover .mps-work__img { opacity: 0.92; }
}

/* filter change: the grid fades out and back, 150ms each way (portfolio.js sets data-filtering) */
.mps-work__grid { transition: opacity 150ms ease; }
.mps-work[data-filtering] .mps-work__grid { opacity: 0; }

.mps-work__more {
  display: block; margin: 28px auto 0; min-height: 44px; padding: 0 4px; background: none; border: 0;
  font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 6px;
}
.mps-work__empty { padding: 24px 0; color: var(--muted); }

/* holds the space while work.json loads. The first 8 tiles are real HTML photos, so the first screen paints without any script;
   the other 4 are grey blocks. */
.work-skeleton { pointer-events: none; }
.work-skeleton__bar { height: 44px; margin-bottom: 16px; }
.work-skeleton .mps-work__grid > li:not(.mps-work__item)::before { content: ""; display: block; aspect-ratio: 3 / 4; background: var(--skeleton); }
.work-skeleton .mps-work__grid > li:not(.mps-work__item)::after { content: ""; display: block; height: calc(8px + 2 * 1.35 * 13px); }
@media (min-width: 1024px) { .work-skeleton .mps-work__grid > li:not(.mps-work__item)::after { height: calc(8px + 1.35 * 13px); } }
.work-skeleton .mps-work__open { cursor: default; }
.work-skeleton img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--skeleton); }

/* ---------- 3. booking: an open month grid, right under the work ---------- */
/* The top padding clears the sticky header, so the heading is never hidden when something jumps to #book without
   scroll-padding (a plain anchor, a screenshot tool). The negative scroll-margin gives the same landing as before
   for the widget's own scroll: the heading sits about 56px under the header. */
.book { border-top: 1px solid var(--champagne); padding: 88px 0 56px; scroll-margin-top: -40px; }
@media (min-width: 768px) { .book { padding: 96px 0 88px; scroll-margin-top: -48px; } }

.mps-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
.mps-book__title, #book-widget > .mps-book__title { font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
.mps-book__lede { margin-top: -18px; color: var(--muted); font-size: 15px; }
.mps-book__sample { margin-top: -22px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.mps-book__sample::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--bronze); vertical-align: 1px; }

.mps-book__legend { margin-bottom: 10px; font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--muted); }
.mps-book__group { min-width: 0; }

@media (min-width: 960px) {
  .mps-book--month { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 32px; align-items: start; }
  .mps-book--month > .mps-book__title,
  .mps-book--month > .mps-book__lede,
  .mps-book--month > .mps-book__sample { grid-column: 1 / -1; }
  /* Left: the calendar, then the message preview and the Send button right under it. Right: time, service, stylist, details.
     The choice starts at the calendar and ends at the button beside it, and neither column has a void under it:
     the calendar spans the first three right-hand rows, and the summary shares the details row. */
  .mps-book--month > .mps-book__group--day { grid-column: 1; grid-row: 4 / span 3; }
  .mps-book--month > .mps-book__summary { grid-column: 1; grid-row: 7; }
  .mps-book--month > .mps-book__group--time { grid-column: 2; grid-row: 4; }
  .mps-book--month > .mps-book__group--service { grid-column: 2; grid-row: 5; }
  .mps-book--month > .mps-book__group--stylist { grid-column: 2; grid-row: 6; }
  .mps-book--month > .mps-book__group--details { grid-column: 2; grid-row: 7; }
}

/* month grid */
.mps-book__calendar { max-width: 460px; }
/* At 320px the 16px gutters leave 41px per day: let the grid bleed 12px each side so a cell is 44px wide. */
@media (max-width: 339px) {
  .mps-book__calendar { margin-inline: -12px; }
  .mps-book__month-head { padding-inline: 4px; }
}
.mps-book__month-head { margin-bottom: 4px; }
.mps-book__month-title { font-size: 18px; font-weight: 500; }
.mps-book__month-prev, .mps-book__month-next {
  width: 44px; height: 44px; padding: 0; background: none; border: 0; font-size: 26px; font-weight: 300; line-height: 1; color: var(--ink);
}
.mps-book__month-prev:disabled, .mps-book__month-next:disabled { color: var(--disabled); }
.mps-book__weekdays { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--champagne); }
.mps-book__weekday { font-size: 12px; color: var(--muted); }
.mps-book__cells { row-gap: 2px; }
.mps-book__cells .mps-book__day {
  display: grid; place-items: center; width: 100%; min-width: 0; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--ink); font: 300 16px/1 var(--sans);
  transition: background-color 120ms ease;
}
.mps-book__cells .mps-book__day-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  transition: background-color 120ms ease, color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .mps-book__cells .mps-book__day:not([aria-pressed="true"]):not(.mps-book__day--out):not([aria-disabled="true"]):hover .mps-book__day-num { background: rgb(201 192 178 / 0.35); }
}
.mps-book__cells .mps-book__day[aria-pressed="true"] .mps-book__day-num { background: var(--ink); color: var(--plaster); }
.mps-book__cells .mps-book__day--today .mps-book__day-num {
  text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.mps-book__cells .mps-book__day--today[aria-pressed="true"] .mps-book__day-num { text-decoration: none; }
.mps-book__cells .mps-book__day--out { color: var(--disabled); }
.mps-book__cells .mps-book__day--closed { color: var(--muted); }
.mps-book__cells .mps-book__day--closed .mps-book__day-num { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.7; }
.mps-book__cells .mps-book__day--closed { cursor: help; }
.mps-book__day-note { margin-top: 10px; min-height: 1.5em; font-size: 13px; color: var(--muted); }

/* times: a row of text options, the chosen one underlined */
.mps-book__times { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -10px; }
.mps-book__time {
  min-height: 44px; padding: 0 10px; background: none; border: 0;
  font: 300 16px/1 var(--sans); color: var(--ink); text-underline-offset: 8px; text-decoration-thickness: 1px;
}
.mps-book__time[aria-pressed="true"] { font-weight: 500; text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .mps-book__time:hover { text-decoration: underline; } }
.mps-book__hint { font-size: 14px; color: var(--muted); }
.mps-book__times-host .mps-book__hint { padding-top: 10px; }

/* services and stylists: text radios (a 14px circle that fills Ink) */
.mps-book__services { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 560px) { .mps-book__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mps-book__stylists { display: flex; flex-wrap: wrap; column-gap: 24px; }
.mps-book__service, .mps-book__stylist {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0;
  background: none; border: 0; text-align: left; font: 400 15px/1.35 var(--sans); color: var(--ink);
}
.mps-book__service::before, .mps-book__stylist::before {
  content: ""; flex: none; box-sizing: border-box; width: 14px; height: 14px; margin-top: 3px;
  border: 1px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--plaster);
  transition: background-color 120ms ease;
}
.mps-book__service[aria-pressed="true"]::before, .mps-book__stylist[aria-pressed="true"]::before { background: var(--ink); }
.mps-book__service[aria-pressed="true"], .mps-book__stylist[aria-pressed="true"] { font-weight: 500; }
.mps-book__service[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.mps-book__stylist-photo { display: none; }

/* name and note */
.mps-book__group--details { display: grid; gap: 16px; }
.mps-book__label { margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.mps-book__input, .mps-book__textarea {
  padding: 12px; background: var(--plaster); border: 1px solid var(--field-line); border-radius: 0;
  font: 400 16px/1.4 var(--sans); color: var(--ink);
}
.mps-book__input { min-height: 48px; }
.mps-book__textarea { resize: vertical; min-height: 84px; }
.mps-book__input:focus, .mps-book__textarea:focus { border-color: var(--ink); outline: none; }
.mps-book__input:focus-visible, .mps-book__textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mps-book__count { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--muted); }

/* summary: the exact message, then the button */
.mps-book__summary { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--champagne); }
.mps-book__summary-title { font-size: 15px; font-weight: 500; }
.mps-book__summary-line { font-size: 14px; color: var(--muted); }
.mps-book__summary-line:empty { display: none; }
.mps-book__preview-label { margin-top: 4px; font-size: 12px; color: var(--muted); }
.mps-book__preview { padding: 16px; border: 1px solid var(--champagne); font-size: 14px; line-height: 1.5; background: transparent; }
.mps-book__hint--missing { min-height: 1.5em; font-size: 13px; }
.mps-book__send {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--plaster); font: 500 15px/1 var(--sans); text-decoration: none;
  transition: transform 100ms var(--ease-out), opacity 120ms ease;
}
.mps-book__send::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--wa-glyph) center / contain no-repeat; mask: var(--wa-glyph) center / contain no-repeat;
}
.mps-book__send:active { transform: scale(0.97); }
.mps-book__send[aria-disabled="true"] { opacity: 0.62; }
.mps-book__fine { font-size: 12px; line-height: 1.5; color: var(--muted); }
.mps-book__alt { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink); width: fit-content; }
#book-widget > .mps-book__send { margin-top: 16px; max-width: 360px; }

:root {
  --wa-glyph: 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");
}

/* ---------- 4. team: portraits like gallery wall labels ---------- */
.team, .services, .about, .visit { padding: 56px 0 8px; }
@media (min-width: 768px) { .team, .services, .about, .visit { padding: 88px 0 16px; } }
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 28px; }
@media (min-width: 768px) { .team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 12px; margin-top: 36px; } }
.team-card { min-width: 0; }
.team-card__photo { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; background: var(--charcoal); }
.team-card__name { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.3; }
.team-card__role { font-size: 13px; line-height: 1.35; color: var(--muted); }
.team-card__years { font-size: 12px; line-height: 1.35; color: var(--muted); }
.team-card__book {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* ---------- 5. services: a two-column text list, hairlines between rows ---------- */
.services__list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 28px; border-bottom: 1px solid var(--champagne); }
@media (min-width: 768px) { .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; margin-top: 36px; } }
.svc { min-width: 0; padding: 20px 0 22px; border-top: 1px solid var(--champagne); }
.svc__name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.svc__zh { margin-top: 2px; }
.svc__blurb { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.svc__price { font-size: 12px; color: var(--muted); }
.svc__book {
  display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; padding-left: 8px; font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 6px;
}
.svc--ask .svc__name { font-weight: 400; }
.svc--ask .svc__foot { justify-content: flex-start; }
.svc--ask .svc__book { padding-left: 0; }

/* ---------- 6. about / philosophy ---------- */
.about__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, 640px) 320px; column-gap: 96px; justify-content: space-between; align-items: start; } }
.about__text { min-width: 0; }
.about__lead { margin-top: 20px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 300; line-height: 1.4; }
.about__lead-zh { margin-top: 6px; }
.about__q { margin-top: 32px; font-size: 15px; font-weight: 500; }
.about__details-zh { margin-top: 8px; }
.about__details { display: grid; margin-top: 8px; }
.about__details li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-top: 1px solid rgb(201 192 178 / 0.6); }
.about__details li:last-child { border-bottom: 1px solid rgb(201 192 178 / 0.6); }
.about__founder { margin-top: 28px; }
.about__policy { display: grid; gap: 2px; margin-top: 20px; color: var(--muted); font-size: 15px; }
.about__policy p + p { margin-bottom: 14px; }
.about__policy .zh-aside { margin-top: -2px; }
.about__tagline { margin-top: 32px; font-size: 20px; font-weight: 300; line-height: 1.3; }
.about__tagline-zh { margin-top: 4px; }
.about__photo { width: 100%; max-width: 320px; }
.about__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--skeleton); }
@media (max-width: 899px) { .about__photo { max-width: 260px; } }

/* ---------- 7. visit ---------- */
.visit { margin-top: 56px; border-top: 1px solid var(--champagne); padding-bottom: 72px; }
@media (min-width: 768px) { .visit { margin-top: 88px; padding-bottom: 96px; } }
.visit__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; } }
.visit__address { display: grid; gap: 2px; margin-top: 24px; font-style: normal; }
.visit__address strong { font-weight: 500; }
.visit__hours { margin-top: 16px; color: var(--muted); }
.visit__contact { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.visit__contact a { display: inline-block; min-width: 44px; padding: 10px 0; line-height: 24px; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.visit__review a, .visit__links a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 6px;
}
.visit__review a { font-size: 14px; color: var(--muted); }
.visit__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; font-size: 15px; }

.map-card {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  border: 1px solid var(--champagne); background: var(--plaster);
}
.map-card__btn {
  min-height: 44px; padding: 0 26px; background: none; border: 1px solid var(--ink); border-radius: 999px;
  font: 500 15px/1 var(--sans); color: var(--ink);
  transition: transform 100ms var(--ease-out);
}
.map-card__btn:active { transform: scale(0.97); }
.map-card__note { font-size: 12px; color: var(--muted); }
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 8. footer ---------- */
.site-footer { border-top: 1px solid var(--champagne); padding: 28px 0 calc(72px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); }
@media (min-width: 768px) { .site-footer { padding-bottom: 40px; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 0; }
.footer-links a, .footer-fine a, .back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 5px; }
.footer-links a { min-width: 44px; padding-right: 20px; }
.footer-fine { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 4px; }
.lang-switch { display: flex; gap: 0; }
/* flush left like the filters: the first label lines up with the content edge */
.lang-switch button {
  min-width: 44px; min-height: 44px; padding: 0 12px 0 0; background: none; border: 0; text-align: left;
  font: 400 14px/1 var(--sans); color: var(--muted);
}
.lang-switch button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.back-link { font-size: 12px; color: var(--muted); }

/* ---------- mobile bottom bar ---------- */
.sticky-book { display: none; }
@media (max-width: 767px) {
  .sticky-book {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink); color: var(--plaster);
    font: 500 15px/1 var(--sans); text-decoration: none;
    transition: opacity 150ms ease, visibility 0s linear 0s;
  }
  .sticky-book[data-hidden] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .sticky-book:focus-visible { outline-color: var(--plaster); outline-offset: -5px; }
}

/* ---------- lightbox: the one signature move ----------
   The image grows from the tile you clicked: scale(.96) to 1 plus opacity, 220ms ease-out, Plaster 98% on the same timing.
   Exit is 180ms back toward the tile. main.js sets --lb-x / --lb-y to the tile's centre. */
.mps-lightbox {
  padding: 4px 8px 12px; background: rgb(245 241 235 / 0.98); color: var(--ink); font-family: var(--sans);
  opacity: 0; transform: scale(0.96); transform-origin: var(--lb-x, 50%) var(--lb-y, 50%);
  transition: opacity 180ms ease, transform 180ms ease, overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.mps-lightbox::backdrop { background: transparent; }
.mps-lightbox[open] {
  opacity: 1; transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
@starting-style {
  .mps-lightbox[open] { opacity: 0; transform: scale(0.96); }
}
.mps-lightbox__close, .mps-lightbox__prev, .mps-lightbox__next {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: none; border: 0; color: var(--ink); line-height: 1;
}
.mps-lightbox__close { font-size: 30px; font-weight: 300; }
.mps-lightbox__prev, .mps-lightbox__next { font-size: 34px; font-weight: 300; }
.mps-lightbox__figure { gap: 10px; }
.mps-lightbox__img { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); background: var(--skeleton); }
.mps-lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; text-align: center; font-size: 15px; line-height: 1.35; }
.mps-lightbox__category, .mps-lightbox__look-zh { color: var(--muted); font-size: 13px; }
.mps-lightbox__category:empty, .mps-lightbox__look-zh:empty { display: none; }
.mps-lightbox__category::before { content: "· "; }
.mps-lightbox__counter { margin-top: 2px; font-size: 12px; color: var(--muted); }
.mps-lightbox__book {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: var(--plaster); font: 500 15px/1 var(--sans); text-decoration: none;
  transition: transform 100ms var(--ease-out);
}
.mps-lightbox__book:active { transform: scale(0.97); }
.mps-lightbox :focus-visible { outline-color: var(--ink); }
.mps-lightbox__book:focus-visible { outline-offset: 3px; }