/* Direction A, Editorial. The salon as a fashion house: the charcoal of the Dec 2025 team posters,
   champagne Didone titles, bronze script names. Spec: design/directions.md, section A.
   Link order: ../shared/base.css first, then this file. State is styled through ARIA (see shared/README.md). */

:root {
  /* palette.json */
  --ink: #0b0b0a;
  --charcoal: #161717;
  --champagne: #c9c0b2;
  --bronze: #84694e;
  --bronze-deep: #5a4833;
  --cream: #fdebd7;
  /* derived for legibility on charcoal: bronze lifted for small text (5.0:1), a quiet champagne for secondary text (6.6:1), the preview panel */
  --bronze-text: #a0825f;
  --muted: #a39c91;
  --panel: #1f2020;
  --line: rgb(201 192 178 / 0.3);
  --line-soft: rgb(201 192 178 / 0.2);
  --chip-line: rgb(201 192 178 / 0.42);

  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --font-body: "Jost", "Futura", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Sacramento", "Segoe Script", "Snell Roundhand", cursive;
  --font-zh: "Noto Serif SC", "Jost", "Songti SC", "STSong", "SimSun", serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-q: cubic-bezier(0.22, 0.7, 0.2, 1); /* entrances: fast start, long soft landing */

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

  --gutter: 16px;
  --head-h: 60px;
  --focus-ring: var(--champagne);
}
@media (min-width: 768px) { :root { --gutter: 40px; --head-h: 72px; } }

/* ---------- base ---------- */
html { overflow-x: hidden; background: var(--charcoal); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  overflow-x: clip; min-height: 100vh; background: var(--charcoal); color: var(--champagne);
  font: 300 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--bronze); color: var(--cream); }
em { font-style: italic; color: var(--cream); }
[lang^="zh"] { font-family: var(--font-zh); font-weight: 400; letter-spacing: 0.08em; }
section[id], span[id="top"] { scroll-margin-top: calc(var(--head-h) + 8px); }

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

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; background: var(--champagne); color: var(--charcoal);
  font: 500 15px/1 var(--font-body); text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--charcoal); }

/* section index: "01 — The work" */
.index { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: italic 400 15px/1 var(--font-display); color: var(--bronze-text); text-decoration: none; }
.index__rule { display: block; width: 48px; height: 1px; background: var(--bronze); }

.sec { padding-block: clamp(56px, 7vw, 104px); }
.sec__head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec__head .index { margin-bottom: 20px; }
.sec__zh { margin-top: 10px; font: 600 20px/1.4 var(--font-zh); letter-spacing: 0.08em; color: var(--champagne); }

h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font: 400 clamp(34px, 4.6vw, 60px)/1.05 var(--font-display); letter-spacing: -0.005em; color: var(--champagne); font-optical-sizing: auto; text-wrap: balance; }

/* buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 999px; font: 500 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--fill { background: var(--champagne); color: var(--charcoal); }
.btn--line { border-color: var(--champagne); color: var(--champagne); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover { background: var(--cream); }
  .btn--line:hover { background: var(--champagne); color: var(--charcoal); }
}
.link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); font: 500 15px/1 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--cream); } }

/* ---------- 1. header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head-h); transition: height 280ms var(--ease-q); }
.site-head::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(11 11 10 / 0.6), transparent); transition: opacity 200ms ease;
}
.site-head[data-open] { background: var(--charcoal); border-bottom: 1px solid var(--line-soft); }
/* charcoal glass once the hero is behind the header: its own layer, so only opacity animates; the bar also settles from 72 to 60 px */
.site-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: rgb(22 23 23 / 0.86); border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: opacity 280ms var(--ease-q);
}
.site-head[data-solid]::after { opacity: 1; }
@media (min-width: 768px) { .site-head[data-solid]:not([data-open]) { height: 60px; } }
/* scroll progress: 2 px champagne hairline, scaleX set by main.js */
.site-head__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--champagne); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; will-change: transform; }
/* while the scroll intro runs, the wordmark clone is the logo; hero.js hands over to the real one at the end of the scrub */
html[data-intro="run"] .site-head .logo__mark { opacity: 0; }
.site-head[data-solid]::before, .site-head[data-open]::before { opacity: 0; }
.site-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); --logo-color: var(--cream); text-decoration: none; }
.logo__mark { width: 180px; height: auto; aspect-ratio: 300 / 56; color: var(--cream); --logo-color: var(--cream); }
@media (min-width: 768px) { .logo__mark { width: 228px; } }
.site-head__actions { display: flex; align-items: center; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 22px; border: 1px solid var(--champagne); border-radius: 999px;
  color: var(--champagne); font: 500 14px/1 var(--font-body); text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 100ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--champagne); color: var(--charcoal); } }
@media (max-width: 767px) { .pill { display: none; } } /* phones book from the hero buttons and the sticky bar */

.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--champagne); position: relative; }
.menu-btn__bars, .menu-btn__bars::before { content: ""; position: absolute; left: 12px; right: 12px; height: 1px; background: currentColor; transition: transform 200ms var(--ease-out), top 200ms var(--ease-out); }
.menu-btn__bars { top: 20px; }
.menu-btn__bars::before { left: 0; right: 0; top: 7px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { top: 24px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 0; transform: rotate(-90deg); }

.nav__list { display: flex; gap: 36px; margin: 0; padding: 0; list-style: none; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); font: 400 14px/1 var(--font-body); text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__list a:hover { color: var(--cream); } }

@media (min-width: 768px) {
  .site-head__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav { justify-self: center; }
  .site-head__actions { justify-self: end; }
}
@media (max-width: 767px) {
  .js .menu-btn { display: block; }
  .js .nav { position: fixed; top: var(--head-h); left: 0; right: 0; padding: 4px var(--gutter) 20px; background: var(--charcoal); border-bottom: 1px solid var(--line-soft); display: none; }
  .js .site-head[data-open] .nav { display: block; }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__list a { width: 100%; min-height: 52px; font-size: 17px; border-bottom: 1px solid var(--line-soft); }
  .js .nav__list li:last-child a { border-bottom: 0; }
  /* no JS: the nav drops under the bar as a wrapped row */
  html:not(.js) .site-head { height: auto; background: var(--charcoal); }
  html:not(.js) .site-head__bar { flex-wrap: wrap; height: auto; padding-block: 8px; }
  html:not(.js) .nav { order: 3; width: 100%; }
  html:not(.js) .nav__list { flex-wrap: wrap; gap: 4px 20px; }
}

/* ---------- 2. hero: full-bleed photo, scroll intro ----------
   Markup: .hx-wrap > .hx (photo, two shades, copy, cue). hero.js pins .hx for one viewport of scroll while the intro
   scrubs; the head script adds .hero-intro. */
.hx-wrap { position: relative; }
.hero-intro .hx-wrap { min-height: 200vh; min-height: 200svh; } /* hero.js sets the exact height: hero + one viewport */
.hx {
  position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: #0e0d0c; color: var(--champagne); isolation: isolate;
}
.hx__pic, .hx__shade { position: absolute; inset: 0; display: block; }
.hx__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: brightness(1.42) contrast(0.97) saturate(0.94); } /* the dusk render is dark by design; lifted so the arch, niche and cove light show */
.hx__shade { pointer-events: none; }
/* A light charcoal ramp and a vignette: the arch, the niche and the cove light show, the corners fall to charcoal.
   The text gets its own soft scrim (.hx__copy::before), so the photo itself can stay bright. */
.hx__shade--lin { background: linear-gradient(180deg, rgb(14 13 12 / 0.5) 0%, rgb(14 13 12 / 0.04) 24%, rgb(14 13 12 / 0.04) 62%, rgb(14 13 12 / 0.72) 100%); }
.hx__shade--rad { background: radial-gradient(135% 105% at 50% 44%, rgb(14 13 12 / 0) 52%, rgb(14 13 12 / 0.6) 100%); }

.hx__inner {
  position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1280px; margin-inline: auto;
  padding: calc(var(--head-h) + 32px) var(--gutter) 104px; text-align: center;
}
.hx__copy { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 44rem; min-width: 0; }
/* a soft dark pool behind the copy, so it reads over the mirror and the chair */
.hx__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -80px -190px -64px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(14 13 12 / 0.82) 0%, rgb(14 13 12 / 0.74) 55%, rgb(14 13 12 / 0) 100%);
}

.hx__kicker, .hx__zh, .hx__sub { text-shadow: 0 1px 14px rgb(14 13 12 / 0.9); }
.hx__kicker { margin: 0 0 22px; font: 400 12px/1.5 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); }
.hx__title { font: 400 clamp(38px, 4.9vw, 76px)/1.03 var(--font-display); letter-spacing: -0.005em; color: var(--cream); font-optical-sizing: auto; text-shadow: 0 2px 30px rgb(0 0 0 / 0.4); }
.hx__line { display: block; white-space: nowrap; }
.hx__title em { color: var(--champagne); font-style: italic; }
.hx__zh { margin-top: 22px; font: 600 clamp(17px, 1.7vw, 24px)/1.5 var(--font-zh); letter-spacing: 0.08em; color: var(--champagne); }
.hx__sub { margin-top: 12px; max-width: 30em; font: 300 clamp(15px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--champagne); opacity: 0.9; }
.hx__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hx__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px; font: 500 15px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms var(--ease-out);
}
.hx__btn:active { transform: scale(0.97); }
.hx__btn--fill { background: var(--champagne); color: var(--charcoal); }
.hx__btn--ghost { border-color: rgb(201 192 178 / 0.55); background: rgb(14 13 12 / 0.62); color: var(--champagne); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hx__wa { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .hx__btn--fill:hover { background: var(--cream); }
  .hx__btn--ghost:hover { background: var(--champagne); border-color: var(--champagne); color: var(--charcoal); }
}

/* scroll cue: a button (the intro has a twin on top of the cover) */
.cue { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; padding: 8px 12px; border: 0; background: none; color: rgb(201 192 178 / 0.85); font: 500 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; }
.cue__ring { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgb(201 192 178 / 0.45); border-radius: 50%; animation: hx-bob 1.9s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .cue:hover { color: var(--cream); } }
.hx__cue { position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; margin-inline: auto; width: max-content; }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* entrance: 680ms, 85ms stagger. Armed by .hero-intro, played by hero.js adding .hero-go once the cover starts to lift. */
.hero-intro:not(.hero-go) .hx__rise { opacity: 0; transition: opacity 200ms ease; } /* scrolling back up: the lines fade out as the mark returns */
.hero-go .hx__rise { animation: hx-rise 680ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards; animation-delay: calc(70ms + var(--i, 0) * 85ms); }
@keyframes hx-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hx[data-covered] .hx__copy, .hx[data-covered] .hx__cue { pointer-events: none; } /* nothing under the cover can be clicked */

/* tall screens (phones, a tablet held upright): the portrait picture sits in the top part and fades into charcoal,
   so the whole arch is in frame above the text; the text sits low */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .hx__pic { inset: 0 0 auto 0; height: 76svh; -webkit-mask-image: linear-gradient(180deg, #000 58%, rgb(0 0 0 / 0.5) 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, rgb(0 0 0 / 0.5) 82%, transparent 100%); }
  .hx__img { object-position: 24% 30%; }
  .hx__shade--lin { background: linear-gradient(180deg, rgb(14 13 12 / 0.5) 0%, rgb(14 13 12 / 0.04) 22%, rgb(14 13 12 / 0.06) 36%, rgb(14 13 12 / 0.62) 52%, rgb(14 13 12 / 0.9) 70%, rgb(14 13 12 / 0.94) 100%); }
  .hx__shade--rad { background: radial-gradient(120% 90% at 50% 34%, rgb(14 13 12 / 0) 50%, rgb(14 13 12 / 0.55) 100%); }
  .hx__inner { align-items: flex-end; padding-bottom: 92px; }
  .hx__copy::before { inset: -64px -60px -52px; }
  .hx__kicker { margin-bottom: 14px; font-size: 11px; letter-spacing: 0.18em; }
  .hx__title { font-size: clamp(31px, 9.6vw, 56px); }
  .hx__zh { margin-top: 14px; font-size: 17px; }
  .hx__sub { margin-top: 10px; font-size: 15px; }
  .hx__cta { gap: 10px; margin-top: 22px; }
  .hx__btn { min-height: 52px; padding: 0 20px; }
}
@media (max-width: 380px) { .hx__cta { gap: 8px; } .hx__btn { padding: 0 16px; font-size: 14px; } }
@media (max-width: 767px) and (max-height: 720px) { .hx__sub { display: none; } .hx__title { font-size: clamp(30px, 9vw, 40px); } }

/* ----- the scroll intro (hero.js) ----- */
.intro { display: none; }
.hero-intro .intro { display: block; position: fixed; inset: 0; z-index: 58; pointer-events: none; }
html[data-intro="done"] .intro { visibility: hidden; }
.intro__cover { position: absolute; inset: 0; background: #0e0d0c; }
.intro__stack { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.intro.is-ready .intro__stack { opacity: 1; }
.intro__m, .intro__caps, .intro__fin { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.intro__m { display: block; height: auto; color: var(--champagne); will-change: transform; }
.intro__m path { fill: currentColor; }
.intro__caps { padding-left: 0.2143em; font: 500 16px/1 var(--font-body); letter-spacing: 0.2143em; white-space: nowrap; color: var(--champagne); will-change: transform; }
.intro__fin { opacity: 0; --logo-color: var(--cream); color: var(--cream); clip-path: inset(0 0 0 19.3%); } /* the header lockup's text only (from x 58 of 300); the M is the clone above */
.intro__cue { position: absolute; left: 0; right: 0; bottom: 14px; margin-inline: auto; width: max-content; pointer-events: auto; }

/* trust band */
.trust { background: var(--charcoal); border-bottom: 1px solid var(--line-soft); scroll-margin-top: var(--head-h); }
.trust__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; max-width: 1280px; margin: 0 auto; padding: 18px var(--gutter); list-style: none; }
.trust__list li { margin: 0; font: 400 13px/1.45 var(--font-body); letter-spacing: 0.06em; color: var(--champagne); text-align: center; }
@media (min-width: 1100px) {
  .trust__list { flex-wrap: nowrap; gap: 0; padding-block: 20px; }
  .trust__list li { padding-inline: 36px; }
  .trust__list li + li { border-left: 1px solid var(--line); }
}

/* ---------- 3. the work: one carousel of looks ----------
   Built by lookbook.js. A line of group words, a native scroll-snap row (the centred slide is the active look, its neighbours sit back),
   the look's name under it on the left, the counter and two text arrows on the right. The shared widget's lightbox (below) opens from the centred slide. */
section.work { padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--head-h) - 40px); } /* the padding slides under the header, so the lookbook lands in one screen */
.work .sec__head { margin-bottom: 4px; }
.work .sec__head .index { margin-bottom: 14px; }
.lk { --lead: calc(max(0px, (100vw - 1280px) / 2) + var(--gutter)); --sh: min(64vh, 600px, calc(100svh - 340px)); --sw: min(85vw, calc(var(--sh) * 0.75)); --lk-ease: cubic-bezier(0.22, 0.7, 0.2, 1); }
.lk button { cursor: pointer; }

.lk-groups { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.4vw, 32px); margin: 0 0 clamp(8px, 1vw, 14px) -4px; }
.lk-gbtn {
  min-height: 44px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--muted);
  font: 500 12px/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.5em; text-decoration-skip-ink: none;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.lk-gbtn[data-on] { color: var(--champagne); text-decoration-color: var(--bronze); }
@media (hover: hover) and (pointer: fine) { .lk-gbtn:hover { color: var(--cream); } }
.lk-gbtn:focus-visible { outline-offset: 2px; }

/* the row bleeds to both screen edges; the first and last slide can reach the centre */
.lk-row {
  position: relative; display: flex; gap: 24px; width: 100vw; margin-left: calc(50% - 50vw); padding-inline: var(--lead) calc(50vw - var(--sw) / 2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lk-row::-webkit-scrollbar { display: none; }
.lk-row.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .lk-row { cursor: grab; } }
.lk-slide {
  position: relative; flex: 0 0 var(--sw); aspect-ratio: 3 / 4; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--panel);
  scroll-snap-align: center; scroll-snap-stop: always; opacity: 0.55; transform: scale(0.96);
  transition: opacity 300ms var(--lk-ease), transform 300ms var(--lk-ease);
}
.lk-slide[data-on] { opacity: 1; transform: none; }
.lk-slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lk-slide:focus-visible { outline-offset: -4px; }

.lk-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; margin-top: clamp(12px, 1.4vw, 18px); }
.lk-meta { min-width: 0; min-height: 5.6rem; }
@media (min-width: 900px) { .lk-meta { min-height: 4.5rem; } }
.lk-meta__name { margin: 0; font: 400 clamp(26px, 2.2vw + 8px, 34px)/1.2 var(--font-display); font-optical-sizing: auto; color: var(--cream); text-wrap: balance; }
.lk-meta__zh { margin: 4px 0 0; font: 400 14px/1.4 var(--font-zh); letter-spacing: 0.06em; color: var(--muted); }
.lk-fade { animation: bk-fade 200ms var(--ease-out); }
.lk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 8px; }
.lk-count { margin: 0; font: 500 12px/1.4 var(--font-body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.lk-count__n { color: var(--champagne); }
.lk-arrows { display: none; gap: 4px; }
@media (max-width: 899px) {
  .lk-row { gap: 10px; }
  .lk-count { flex-direction: column; align-items: flex-end; display: flex; gap: 4px; font-size: 11px; letter-spacing: 0.16em; }
  .lk-count__g { color: var(--muted); }
}
.lk-arrow {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--muted);
  font: 300 22px/1 var(--font-body); transition: color 150ms ease, opacity 150ms ease;
}
.lk-arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .lk-arrow:not([aria-disabled="true"]):hover { color: var(--champagne); } }
@media (min-width: 900px) { .lk-arrows { display: flex; } }

/* lightbox: Charcoal 96%, the image grows out of the tile */
.mps-lightbox {
  background: rgb(22 23 23 / 0.96); color: var(--champagne); font: 300 16px/1.5 var(--font-body);
  padding: 8px 8px 16px; gap: 8px; --focus-ring: var(--champagne);
  opacity: 0; transform: scale(0.96); transform-origin: var(--lb-ox, 50%) var(--lb-oy, 50%);
  transition: opacity 190ms ease-in-out, transform 190ms ease-in-out, display 190ms allow-discrete, overlay 190ms allow-discrete;
}
.mps-lightbox[open] { opacity: 1; transform: none; transition-duration: 240ms; transition-timing-function: var(--ease-out); }
@starting-style { .mps-lightbox[open] { opacity: 0; transform: scale(0.96); } }
.mps-lightbox::backdrop { background: rgb(11 11 10 / 0.5); }
.mps-lightbox__close, .mps-lightbox__prev, .mps-lightbox__next {
  border: 0; background: none; color: var(--champagne); font: 300 34px/1 var(--font-body); display: grid; place-items: center; transition: color 150ms ease, transform 100ms var(--ease-out);
}
.mps-lightbox__close:active, .mps-lightbox__prev:active, .mps-lightbox__next:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .mps-lightbox__close:hover, .mps-lightbox__prev:hover, .mps-lightbox__next:hover { color: var(--cream); } }
.mps-lightbox__img { max-height: 76vh; max-height: 76dvh; }
.mps-lightbox__figure { gap: 14px; }
.mps-lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; text-align: center; }
.mps-lightbox__look { font: italic 400 22px/1.2 var(--font-display); color: var(--cream); }
.mps-lightbox__category { font: 400 13px/1.2 var(--font-body); color: var(--champagne); }
.mps-lightbox__look-zh { font-size: 14px; }
.mps-lightbox__counter { margin: 0; font: 400 12px/1 var(--font-body); color: var(--muted); }
.mps-lightbox__book {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px;
  background: var(--champagne); color: var(--charcoal); font: 500 15px/1 var(--font-body); text-decoration: none; transition: background-color 150ms ease, transform 100ms var(--ease-out);
}
.mps-lightbox__book:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mps-lightbox__book:hover { background: var(--cream); } }
@media (max-width: 767px) {
  .mps-lightbox[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .mps-lightbox__img { max-height: 70dvh; }
}

/* ---------- 4. team ---------- */
.team__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .team__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.member { min-width: 0; }
.member__link { display: block; color: inherit; text-decoration: none; }
.member__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
/* a few px of parallax (main.js sets translate on scroll): the image sits a touch larger than its frame so no edge shows */
.js .member__photo img { transform: scale(1.06); will-change: transform; }
.member__name {
  position: relative; z-index: 1; display: block; width: fit-content; margin: -30px 0 0 0; overflow: hidden;
  font: 400 56px/1 var(--font-script); color: var(--bronze); text-shadow: 2px 2px 0 var(--bronze-deep);
}
.member__name-in { display: block; padding: 0.08em 0.18em 0.1em 12px; }
@media (min-width: 768px) { .member__name { font-size: 72px; margin-top: -38px; } }
.member__title { margin-top: 6px; font: 400 clamp(20px, 2vw, 26px)/1.15 var(--font-display); color: var(--champagne); text-wrap: balance; }
.member__exp { margin-top: 6px; font: 300 13px/1.5 var(--font-body); color: var(--muted); }

/* signature move, the name reveal: the script name is uncovered left to right, once, when the card is 30% in view.
   Two opposite slides of the same length and easing (window in from the left, text back to the right) so only transforms move
   and nothing dark ever sits on the portrait. */
.js .member__name { opacity: 0; transform: translateX(-101%); transition: transform 600ms var(--ease-q), opacity 500ms ease-out; }
.js .member__name-in { transform: translateX(101%); transition: transform 600ms var(--ease-q); }
/* the name is the last thing on the card: it waits for the card to rise (260 ms), then slides and fades in */
.js .member.name-in .member__name, .js .member.name-in .member__name-in { opacity: 1; transform: none; transition-delay: calc(var(--name-delay, 0ms) + 260ms); }

/* ---------- 5. services ---------- */
.svc { margin: 0; padding: 0; list-style: none; }
/* the hairlines are drawn by ::before (top) and, on the last row, ::after (bottom): scaleX from the left, staggered (see the motion block) */
.svc__row { position: relative; }
.svc__row::before, .svc__row:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-soft); transform-origin: 0 50%; pointer-events: none; }
.svc__row::before { top: 0; }
.svc__row:last-child::after { bottom: 0; }
.svc__link {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px; row-gap: 12px; align-items: start;
  padding: 24px 0; color: inherit; text-decoration: none;
}
.svc__link .svc__en { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { a.svc__link:hover .svc__en { color: var(--cream); } }
.svc__en { font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--font-display); color: var(--champagne); text-wrap: balance; }
.svc__zh { margin: 6px 0 0; font: 400 15px/1.5 var(--font-zh); letter-spacing: 0.04em; color: var(--muted); }
.svc__zh .latin { letter-spacing: 0; }
.svc__note { max-width: 36em; margin: 20px 0 0; font: 300 16px/1.6 var(--font-body); color: var(--muted); }
.svc__note .zh { display: block; margin-top: 2px; font-size: 14px; }
.svc__blurb { margin: 0; font: 300 16px/1.55 var(--font-body); color: var(--champagne); }
.svc__row--ask .svc__en { grid-column: 1 / -1; color: var(--muted); font-size: clamp(18px, 1.8vw, 22px); }
@media (max-width: 767px) {
  .svc__link { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .svc__row--ask .svc__en { grid-column: auto; }
}

/* ---------- 6. booking: one sentence with choosers (booking-ui.js). An Ink band on every screen size. ---------- */
.book { background: var(--ink); padding-block: clamp(64px, 9vw, 128px); color: var(--champagne); }
.book__panel { max-width: 880px; margin-inline: auto; }
.book__index { margin-bottom: 20px; }
.book__title { font: 400 clamp(34px, 4.6vw, 60px)/1.05 var(--font-display); letter-spacing: -0.005em; color: var(--champagne); }
.book__lede { max-width: 42em; margin: 18px 0 0; font: 300 16px/1.6 var(--font-body); color: var(--champagne); }
.book__sample { display: inline-block; margin-left: 0.6em; font: 400 13px/1.5 var(--font-body); color: var(--muted); }
.book__sample:empty { display: none; }
@media (max-width: 767px) {
  /* the sticky bar (56 px + the home indicator) never covers the Send pill */
  .book { padding-block: 56px calc(56px + 56px + 32px + env(safe-area-inset-bottom)); }
  .book__sample { display: block; margin: 2px 0 0; }
}

/* the sentence */
.bk { margin-top: clamp(36px, 5vw, 56px); }
.bk-sentence {
  margin: 0; font: 400 clamp(23px, 1.4vw + 14px, 36px)/1.35 var(--font-display); font-optical-sizing: auto; color: var(--cream); text-wrap: pretty;
}
.bk-word {
  position: relative; display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--champagne); font: inherit; font-weight: 500; font-style: normal; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-skip-ink: none;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.bk-word[data-empty] { font-weight: 400; font-style: italic; }
.bk-word::before { content: ""; position: absolute; inset: -8px -3px; } /* a bigger tap area than the words themselves */
.bk-word[aria-expanded="true"] { color: var(--cream); text-decoration-color: var(--champagne); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .bk-word:hover { color: var(--cream); text-decoration-color: var(--champagne); } }
.bk-word:focus-visible { outline-offset: 5px; }
.bk-word__t { display: inline; }
.bk-swap { animation: bk-fade 200ms var(--ease-out); }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }

/* the same sentence in Chinese, small, quiet; what is chosen stands out, what is not stays dim */
.bk-zh { margin: 14px 0 0; font: 400 15px/1.7 var(--font-zh); letter-spacing: 0.06em; color: var(--muted); }
.bk-zh__p { opacity: 0.65; }
.bk-zh__v { color: var(--champagne); }
@media (max-width: 767px) { .bk-zh { font-size: 14px; } }

/* a box that grows to its content: height and opacity, 250 ms (booking-ui.js sets the heights) */
.bk-fold {
  height: 0; overflow: hidden; opacity: 0; visibility: hidden; margin-inline: -8px; padding-inline: 8px;
  transition: height 250ms var(--ease-out), opacity 250ms var(--ease-out), visibility 0s linear 250ms;
}
.bk-fold[data-state="open"] { opacity: 1; visibility: visible; transition: height 250ms var(--ease-out), opacity 250ms var(--ease-out), visibility 0s; }
.bk-pane > .bk-fold__in { padding-block: 30px 6px; }
.bk-details > .bk-fold__in { padding-block: 8px 4px; }

/* the chooser: a quiet row of text, no boxes */
.bk-chooser { animation: bk-fade 200ms var(--ease-out); }
.bk-opts { display: flex; flex-wrap: wrap; gap: 4px 40px; }
.bk-opt {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 44px; min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: none;
  color: rgb(253 235 215 / 0.7); font: 400 21px/1.2 var(--font-display); text-align: left; cursor: pointer;
  transition: color 150ms ease; animation: bk-opt-in 250ms var(--ease-q) backwards; animation-delay: calc(min(var(--i, 0), 6) * 40ms);
}
@keyframes bk-opt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bk-opt__sub { font: 300 12px/1.3 var(--font-body); letter-spacing: 0.01em; color: var(--muted); }
.bk-opt__sub[lang] { font-family: var(--font-zh); font-weight: 400; letter-spacing: 0.05em; }
.bk-opt[aria-pressed="true"] { color: var(--champagne); }
.bk-opt[aria-pressed="true"] .bk-opt__t { text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 0.28em; text-decoration-skip-ink: none; }
@media (hover: hover) and (pointer: fine) { .bk-opt:not([aria-disabled="true"]):hover { color: var(--cream); } }
.bk-opt--closed { opacity: 0.35; cursor: not-allowed; }
.bk-opt:focus-visible { outline-offset: 0; }
.bk-empty { margin: 0; padding: 10px 0; font: 300 15px/1.5 var(--font-body); color: var(--muted); }

/* the day row: 14 days in one row that scrolls sideways inside itself; the arrow shifts by 14 */
.bk-days { display: flex; align-items: center; gap: 4px; }
.bk-row {
  position: relative; flex: 1 1 0; display: flex; gap: 30px; min-width: 0; padding: 2px 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--bronze-deep) transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.bk-row .bk-opt { flex: none; align-items: center; text-align: center; font-size: 20px; }
.bk-arrow {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 0 4px; border: 0; background: none; color: var(--champagne);
  font: 300 30px/1 var(--font-body); cursor: pointer; transition: color 150ms ease, transform 100ms var(--ease-out);
}
.bk-arrow:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .bk-arrow:hover { color: var(--cream); } }
.bk-note { min-height: 0; margin: 4px 0 0; font: 400 13px/1.5 var(--font-body); color: var(--muted); }
.bk-note:empty { display: none; }

/* send, and the way in to name and note */
.bk-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.bk-extra { min-width: 0; }
.bk-go { justify-self: end; text-align: right; }
.bk-more {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--muted);
  font: 400 14px/1.2 var(--font-body); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; cursor: pointer;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .bk-more:hover { color: var(--cream); text-decoration-color: var(--bronze); } }
.bk-more:focus-visible { text-decoration-color: var(--bronze); }
.bk-fields { display: grid; gap: 14px; max-width: 360px; }
.bk-field {
  width: 100%; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--champagne);
  font: 300 16px/1.5 var(--font-body); resize: none; transition: border-color 150ms ease;
}
.bk-field::placeholder { color: var(--muted); opacity: 0.85; }
.bk-field:focus { outline: none; border-bottom-color: var(--champagne); }
.bk-field:focus-visible { outline: none; box-shadow: 0 1px 0 var(--champagne); }

.bk-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 34px; border-radius: 999px;
  background: var(--champagne); color: var(--charcoal); font: 500 15px/1 var(--font-body); text-decoration: none; --focus-ring: var(--champagne);
  transition: background-color 150ms ease, opacity 250ms ease, transform 100ms var(--ease-out);
}
.bk-send:focus-visible { outline-offset: 4px; }
.bk-send::before {
  content: ""; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-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") center / contain no-repeat;
          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") center / contain no-repeat;
}
.bk-send:active { transform: scale(0.97); }
.bk-send[aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .bk-send:not([aria-disabled="true"]):hover { background: var(--cream); } }
.bk-fine { margin: 12px 0 0; max-width: 36em; font: 300 13px/1.5 var(--font-body); color: var(--muted); }
.bk-go .bk-fine { margin-left: auto; }
html:not(.js) .bk-send { max-width: 360px; }
.noscript-note { margin: 0; color: var(--champagne); }
.noscript-note a { color: var(--champagne); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; }
.book noscript p { margin: 16px 0 0; color: var(--champagne); }
.book noscript a { color: var(--champagne); }

@media (max-width: 767px) {
  .bk-foot { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bk-go { justify-self: stretch; text-align: center; }
  .bk-send { display: flex; width: 100%; }
  .bk-fine { max-width: none; margin-inline: auto; }
  .bk-opts { gap: 2px 28px; }
  .bk-opt { font-size: 20px; }
  .bk-row { gap: 22px; }
  .bk-fold { margin-inline: -4px; padding-inline: 4px; }
}

/* ---------- 7. about ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
.about__photo { position: relative; margin: 0; width: calc(100% - 32px); margin-inline: 16px; }
.about__photo::before { content: ""; position: absolute; inset: -16px; border: 1px solid rgb(201 192 178 / 0.45); pointer-events: none; }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: var(--panel); }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
  .about__photo { width: auto; margin: 0 16px 0 16px; }
}
.about__copy { min-width: 0; }
.about__copy .index { margin-bottom: 24px; }
.about__lead { max-width: 24em; font: italic 400 clamp(22px, 2.4vw, 30px)/1.35 var(--font-display); color: var(--cream); text-wrap: balance; }
.about__copy h2 { margin-top: 44px; font-size: clamp(30px, 3.4vw, 44px); }
.about__copy .sec__zh { margin-top: 8px; font-size: 17px; font-weight: 400; color: var(--muted); }
.about__list { display: block; margin: 28px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-soft); }
.about__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.about__n { font: italic 400 18px/1 var(--font-display); color: var(--bronze-text); }
.about__en { font: 400 17px/1.5 var(--font-body); color: var(--champagne); }
.about__cn { font-size: 15px; color: var(--muted); }
.about__founder { margin-top: 32px; font: 400 17px/1.6 var(--font-body); color: var(--champagne); }
.about__policy { margin-top: 16px; display: grid; gap: 12px; }
.about__policy p { margin: 0; max-width: 34em; font: 300 16px/1.65 var(--font-body); color: var(--champagne); }
.about__policy .zh, .about__tag .zh { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.about__tag { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-soft); font: italic 400 20px/1.4 var(--font-display); color: var(--cream); }
.about__tag .zh { font-style: normal; }
@media (max-width: 767px) {
  .about__list li { grid-template-columns: 36px minmax(0, 1fr); }
  .about__cn { grid-column: 2; }
}

/* ---------- 9. visit ---------- */
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.visit__copy, .visit__map { min-width: 0; }
.visit__address { display: grid; gap: 2px; font: 400 17px/1.6 var(--font-body); font-style: normal; color: var(--champagne); }
.visit__upstairs { margin-bottom: 6px; font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--font-display); color: var(--cream); }
.visit__hours { margin-top: 18px; font: 400 17px/1.6 var(--font-body); color: var(--champagne); }
.visit__wa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 14px; font: 400 17px/1.6 var(--font-body); }
.visit__wa a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; color: var(--champagne); text-decoration: none; }
.copy-btn {
  min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--champagne); font: 500 14px/1 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { color: var(--cream); } }
.visit__chat { margin: 0; }
.visit__chat a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font: 400 14px/1.4 var(--font-body); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .visit__chat a:hover { color: var(--cream); } }
.visit__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.visit__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); font: 400 15px/1.2 var(--font-body); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 6px; }
.visit__rec { margin-top: 6px; }
.visit__rec a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font: 400 14px/1.4 var(--font-body); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .visit__links a:hover, .visit__rec a:hover { color: var(--cream); } }

.map { position: relative; width: 100%; height: 300px; overflow: hidden; background: var(--ink); border: 1px solid var(--bronze); }
@media (min-width: 900px) { .map { height: 420px; } }
/* Google's map is light: inverted and turned back in hue it reads as charcoal with light roads */
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(1.08) contrast(1.05); }
.map__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 12px 0 0; padding: 0; list-style: none; }
.map__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--champagne); font: 500 14px/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .map__links a:hover { color: var(--cream); } }

/* ---------- 10. footer ---------- */
.foot { background: var(--ink); padding-block: 56px 40px; border-top: 1px solid var(--line-soft); color: var(--champagne); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.foot__brand .logo__mark { width: 220px; margin-bottom: 14px; }
.foot__sub { margin: 0; max-width: 28em; font: 300 15px/1.55 var(--font-body); color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--champagne); font: 400 15px/1.2 var(--font-body); text-decoration: none; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--muted); }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 5px; }
.foot__legal > span { display: inline-block; padding-block: 10px; line-height: 24px; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover, .foot__legal a:hover { color: var(--cream); } }
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: 1fr auto; align-items: end; row-gap: 32px; }
  .foot__legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 767px) { .foot { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* ---------- phone: the sticky bar ---------- */
.sticky-bar { display: none; }
@media (max-width: 767px) {
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    min-height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--champagne); color: var(--charcoal); font: 500 15px/1 var(--font-body); text-decoration: none; --focus-ring: var(--charcoal);
    transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 300ms var(--ease-q), opacity 220ms ease-out, visibility 0s linear 300ms;
  }
  .sticky-bar:focus-visible { outline-offset: -5px; }
  .sticky-bar[data-show] { transform: none; opacity: 1; visibility: visible; transition: transform 380ms var(--ease-q), opacity 260ms ease-out, visibility 0s; }
  .sticky-bar:active { background: var(--cream); }
  html:not(.js) .sticky-bar { display: none; }
}

/* ---------- motion: quiet, once, ease-out, transforms and opacity only ----------
   Entrances 500-700 ms on --ease-q, stagger 60 ms (cap 5 steps); small UI 150-300 ms. Everything below is switched off for reduced motion. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-q), transform 600ms var(--ease-q); transition-delay: calc(min(var(--i, 0), 5) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* section header: numeral, then the rule draws in (scaleX from the left), then the title rises */
.js .index__n, .js .index__t { opacity: 0; transition: opacity 400ms var(--ease-q); }
.js .index__t { transition-delay: 360ms; }
.js .index__rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform 640ms var(--ease-q) 120ms; }
.js .is-in .index__n, .js .is-in .index__t, .js .index.is-in .index__n, .js .index.is-in .index__t { opacity: 1; }
.js .is-in .index__rule, .js .index.is-in .index__rule { transform: none; }
.js .sec__head h2, .js .sec__head .sec__zh, .js .sec__head .svc__note { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-q) 260ms, transform 600ms var(--ease-q) 260ms; }
.js .sec__head .sec__zh, .js .sec__head .svc__note { transition-delay: 340ms; }
.js .sec__head.is-in h2, .js .sec__head.is-in .sec__zh, .js .sec__head.is-in .svc__note { opacity: 1; transform: none; }

/* services: the hairlines draw in, row by row */
.js .svc__row::before, .js .svc__row:last-child::after { transform: scaleX(0); transition: transform 800ms var(--ease-q); transition-delay: calc(min(var(--i, 0), 5) * 80ms + 80ms); }
.js .svc__row:last-child::after { transition-delay: calc(min(var(--i, 0), 5) * 80ms + 200ms); }
.js .svc__row.is-in::before, .js .svc__row.is-in:last-child::after { transform: none; }

/* ---------- reduced motion: everything shown, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .index__n, .js .index__t { opacity: 1; }
  .js .index__rule, .js .svc__row::before, .js .svc__row:last-child::after { transform: none; }
  .js .sec__head h2, .js .sec__head .sec__zh, .js .sec__head .svc__note { opacity: 1; transform: none; }
  .js .member__name { opacity: 1; }
  .js .member__name, .js .member__name-in, .js .member__photo img { transform: none; }
  .site-head__progress { display: none; }
  .hx__rise, .cue__ring { animation: none; }
  .mps-lightbox { transform: none; }
  .lk-slide, .lk-gbtn, .lk-arrow { transition: none; }
  .lk-fade { animation: none; }
  .sticky-bar { transition: none; }
  .bk-fold, .bk-word, .bk-opt, .bk-send, .bk-more, .bk-arrow { transition: none; }
  .bk-swap, .bk-chooser, .bk-opt { animation: none; }
}