/* asian massage near me
   Charcoal and celadon. Ten near-me siblings exist and hold violet/pink, espresso/amber,
   slate/jade, burgundy/ivory, midnight/blue, light bone/clay, plum/champagne, ink/coral,
   forest/brass and indigo/saffron. A cool grey-green over near-neutral charcoal is what is
   left, and it is also the calmest of the set, which suits the subject (network Rule 15). */

:root {
  --ivory: #eef1ef;
  --ivory-soft: #97a29d;
  --wine: #14171a;
  --wine-2: #1c2124;
  --wine-3: #262c30;
  --line: #333b3f;
  --rouge: #7fb69a;
  --rouge-lit: #a3d0ba;
  --gilt: #c3a463;
  --r: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wine); color: var(--ivory);
  font: 16px/1.7 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden; padding-bottom: 64px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge-lit); text-decoration: none; }
a:hover { text-decoration: underline; }
.asn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
h1 { font-size: clamp(28px, 5.4vw, 43px); line-height: 1.08; margin: 0 0 10px; font-weight: 400; letter-spacing: -.01em; }

.asn-jump { position: absolute; left: -9999px; }
.asn-jump:focus { left: 14px; top: 14px; z-index: 99; background: var(--rouge); color: #10201a; padding: 10px 16px; }

/* ── head ────────────────────────────────────────────────────────────── */
.asn-head { border-bottom: 1px solid var(--line); background: var(--wine-2); }
.asn-head-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.asn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); }
.asn-brand:hover { text-decoration: none; }
.asn-brand img { border-radius: var(--r); flex-shrink: 0; }
.asn-brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.asn-brand-txt b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.asn-brand-txt small { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--ivory-soft); margin-top: 3px; }
.asn-watch {
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 9px 16px;
  border: 1px solid var(--gilt); color: var(--gilt); white-space: nowrap;
}
.asn-watch:hover { text-decoration: none; background: var(--gilt); color: var(--wine); }

/* ── open ────────────────────────────────────────────────────────────── */
.asn-open { padding: 34px 0 22px; }
.asn-open-line { color: var(--ivory-soft); font-size: 17.5px; margin: 0 0 18px; }
.asn-open-line b { color: var(--ivory); }
.asn-find { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; font-family: ui-sans-serif, system-ui, sans-serif; }
.asn-find button {
  background: var(--rouge); color: #10201a; border: 0; padding: 13px 22px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; letter-spacing: .02em;
}
.asn-find button:hover { background: var(--rouge-lit); }
.asn-find button:disabled { opacity: .55; cursor: wait; }
.asn-find span { font-size: 12.5px; color: var(--ivory-soft); }
.asn-aside { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; color: var(--ivory-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0 0 18px; }

/* ── board ───────────────────────────────────────────────────────────── */
.asn-count { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; font-family: ui-sans-serif, system-ui, sans-serif; }
.asn-count p { margin: 0; font-size: 13.5px; color: var(--ivory-soft); }
.asn-count b { color: var(--ivory); }
.asn-count a { font-size: 13px; font-weight: 700; }

/* A MASONRY WALL: studios flow down CSS columns at their natural heights. Every sibling puts
   its cards on a fixed grid or in a list, so the ragged bottom edge is the tell. */
.asn-grid { columns: 2 150px; column-gap: 14px; }
@media (min-width: 760px)  { .asn-grid { columns: 3 220px; column-gap: 18px; } }
@media (min-width: 1120px) { .asn-grid { columns: 4 240px; } }

.asn-card { break-inside: avoid; margin: 0 0 14px; background: var(--wine-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .asn-card { margin-bottom: 18px; } }
.asn-card:hover { border-color: var(--rouge); }
.asn-card-gold { border-color: var(--gilt); box-shadow: inset 0 0 0 1px rgba(195,164,99,.32); }
.asn-card-img { position: relative; display: block; background: var(--wine-3); }
.asn-card-img > img { width: 100%; height: auto; display: block; }
.asn-card-none { display: grid; place-items: center; height: 150px; font-size: 30px; color: rgba(127,182,154,.28); }
.asn-seal {
  position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; padding: 4px 9px; border-radius: 999px;
  background: var(--gilt); color: #151006;
}
.asn-card-said { display: block; padding: 11px 12px 12px; color: var(--ivory); }
.asn-card-said:hover { text-decoration: none; }
.asn-card-said b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.asn-card-said em { display: flex; align-items: center; gap: 6px; font-style: normal; margin-top: 4px; font-size: 12px; color: var(--ivory-soft); }
.asn-card-said em img { width: 17px; height: 12px; flex-shrink: 0; object-fit: cover; }

.asn-card-acts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); margin-top: auto; }
.asn-act {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11.5px; font-weight: 700; padding: 9px 6px; background: var(--wine-2); color: var(--ivory);
}
.asn-act:hover { text-decoration: none; background: var(--wine-3); }
.asn-act-wa { background: #0d6455; color: #fff; }
.asn-act-main { background: var(--rouge); color: #10201a; }

.asn-more { text-align: center; margin: 24px 0 0; }
.asn-own { text-align: center; margin: 16px 0 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; }
.asn-own a { color: var(--ivory-soft); }
.asn-cta { display: inline-block; font-weight: 700; font-size: 14px; padding: 13px 28px; border-radius: var(--r); background: var(--rouge); color: #10201a; letter-spacing: .02em; }
.asn-cta:hover { text-decoration: none; background: var(--rouge-lit); }
.asn-cta-sm { padding: 9px 16px; font-size: 12.5px; margin-top: 9px; }

/* ── reading ─────────────────────────────────────────────────────────── */
/* ONE measure for every block in here. In `ch` on each block the intro (19px) and the body
   (17px) resolved to different widths and the left edge stepped inward halfway down. */
.asn-read { max-width: 660px; margin: 46px auto 0; }
.asn-copy { color: #e6d9d5; font-size: 17px; line-height: 1.78; }
.asn-copy-open { font-size: 19px; color: var(--ivory); border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.asn-copy p { margin: 0 0 18px; }
.asn-copy h2 { font-size: clamp(21px, 3vw, 28px); margin: 36px 0 12px; color: var(--ivory); font-weight: 400; line-height: 1.22; }
/* Venue copy comes from the studio and leans on h3. Unstyled it was browser-default bold at
   body size, so a ten-heading description read as one undifferentiated block. */
.asn-copy h3 { font-size: 18px; margin: 26px 0 8px; color: var(--ivory); font-weight: 600; line-height: 1.3; }
.asn-copy ul, .asn-copy ol { margin: 0 0 18px; padding-left: 22px; }
.asn-copy li { margin: 0 0 6px; }
.asn-copy strong { color: #fff; font-weight: 600; }
.asn-copy a { color: var(--gilt); }

/* A chip label above each question. The eleventh FAQ treatment in the set: not an accordion,
   plain list, card, disclosure, numbered list, definition list, hanging rule, two-column grid,
   run-in heading or centred column. */
.asn-faq { margin: 48px 0 8px; }
.asn-faq h2 { font-size: clamp(21px, 3vw, 28px); margin: 0 0 20px; font-weight: 600; }
.asn-qa { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; margin: 0 0 10px; }
.asn-qa:hover { border-color: var(--rouge); }
.asn-qa-n { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 3px 9px; border-radius: 999px; background: var(--rouge); color: #10201a; margin: 0 0 9px; }
.asn-qa h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ivory); line-height: 1.35; }
.asn-qa p { margin: 0; color: #c2ccc7; font-size: 15.5px; }

/* ── place ───────────────────────────────────────────────────────────── */
.asn-path { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; color: var(--ivory-soft); margin: 18px 0 12px; }
.asn-seal-wide { display: inline-block; font-family: ui-sans-serif, system-ui, sans-serif; background: var(--gilt); color: var(--wine); font-size: 11px; font-weight: 900; letter-spacing: .12em; padding: 7px 14px; margin: 0 0 10px; }
.asn-parlour-where { display: flex; align-items: center; gap: 9px; font-size: 17px; color: var(--ivory-soft); margin: 0 0 14px; }
.asn-parlour-where b { color: var(--ivory); font-size: 19px; }
.asn-parlour-where img { width: 22px; height: 16px; object-fit: cover; }
.asn-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0 0 20px; font-family: ui-sans-serif, system-ui, sans-serif; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.asn-facts li { font-size: 12px; color: var(--ivory-soft); padding: 9px 16px 9px 0; }
.asn-facts b { color: var(--ivory); }

.asn-reachbar { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); margin: 0 0 22px; font-family: ui-sans-serif, system-ui, sans-serif; }
.asn-reach { flex: 1 1 140px; text-align: center; padding: 14px 16px; font-weight: 700; font-size: 14.5px; color: #fff; background: var(--wine-3); }
.asn-reach:hover { text-decoration: none; filter: brightness(1.12); }
.asn-reach-wa { background: #0d6455; }
.asn-reach-tel { background: var(--rouge); color: #10201a; }
.asn-reach-tg { background: #2b7fa8; }
.asn-reach-other { background: var(--wine-3); color: var(--ivory); }

/* A fixed-HEIGHT strip: every photograph keeps its own width instead of being cropped square,
   so a wide room stays a wide room. Scrolled sideways. */
.asn-strip { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 22px; padding-bottom: 8px; scroll-snap-type: x proximity; }
.asn-frame { flex: 0 0 auto; height: 190px; padding: 0; border: 0; background: var(--wine-3); cursor: zoom-in; overflow: hidden; border-radius: var(--r); scroll-snap-align: start; }
@media (min-width: 780px) { .asn-frame { height: 250px; } }
.asn-frame > img { height: 100%; width: auto; max-width: none; display: block; }
.asn-strip::-webkit-scrollbar { height: 8px; }
.asn-strip::-webkit-scrollbar-thumb { background: var(--line); }

.asn-parlour-body { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .asn-parlour-body { grid-template-columns: minmax(0, 1fr) 310px; } }
.asn-parlour-lead { font-size: 18px; margin: 0 0 14px; }
.asn-box { border: 1px solid var(--line); padding: 15px; margin-bottom: 13px; }
.asn-box-h { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-soft); font-weight: 800; margin: 0 0 10px; }
.asn-hours { margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; }
.asn-hours > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.asn-hours > div:last-child { border-bottom: 0; }
.asn-hours-shut { color: var(--ivory-soft); }
.asn-hours dt { text-transform: uppercase; letter-spacing: .08em; color: var(--ivory-soft); font-weight: 700; }
.asn-hours dd { margin: 0; }
.asn-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; }
.asn-links a { font-size: 12.5px; font-weight: 700; padding: 7px 12px; border: 1px solid var(--line); color: var(--ivory); }
.asn-plug { display: block; text-align: center; padding: 16px; background: linear-gradient(135deg, var(--rouge), #7d2338); color: #fff; }
.asn-plug b { display: block; font-size: 17px; }
.asn-plug span { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; color: rgba(255,255,255,.85); }
.asn-return { margin: 28px 0 0; }

.asn-bar { display: none; }
@media (max-width: 760px) {
  .asn-bar { display: flex; gap: 1px; background: var(--line); position: fixed; left: 0; right: 0; bottom: 0; z-index: 64; padding-bottom: env(safe-area-inset-bottom); }
  .asn-parlour { padding-bottom: 72px; }
  /* A free venue page carries BOTH the cams ribbon and this contact bar, and they are both
     pinned to the bottom. Reaching the studio wins; the sidebar still advertises the cams. */
  body:has(.asn-bar) .asn-ribbon { display: none; }
}

/* ── lightbox ────────────────────────────────────────────────────────── */
.asn-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(12, 6, 8, .97); display: grid; place-items: center; }
.asn-lightbox[hidden] { display: none; }
.asn-lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.asn-lightbox button { position: absolute; width: 46px; height: 46px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; font-size: 25px; cursor: pointer; }
.asn-lightbox button:hover { background: rgba(255,255,255,.16); }
.asn-lightbox [data-x] { top: 16px; right: 16px; font-size: 27px; }
.asn-lightbox [data-back] { left: 14px; top: 50%; transform: translateY(-50%); }
.asn-lightbox [data-on] { right: 14px; top: 50%; transform: translateY(-50%); }
.asn-lightbox p { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; color: var(--ivory-soft); }

/* ── foot ────────────────────────────────────────────────────────────── */
.asn-foot { border-top: 1px solid var(--line); margin-top: 50px; padding: 28px 0 18px; background: var(--wine-2); }
.asn-foot-lead { margin: 0 0 6px; }
.asn-foot-note { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; color: var(--ivory-soft); margin: 0 0 12px; }
.asn-foot-do { margin: 14px 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; }

.asn-ribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; background: var(--wine-3); border-top: 1px solid var(--gilt); }
.asn-ribbon a {
  display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1240px;
  margin: 0 auto; padding: 11px 20px calc(11px + env(safe-area-inset-bottom));
  color: var(--ivory); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px;
}
.asn-ribbon a:hover { text-decoration: none; }
.asn-ribbon b { color: var(--gilt); }
.asn-ribbon span { background: var(--rouge); color: #10201a; font-weight: 700; font-size: 12px; padding: 6px 13px; }

/* Keyboard focus: the browser default is invisible on this palette. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gilt); outline-offset: 3px;
}
.asn-card-img:focus-visible, .asn-frame:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }