/* HansMed mobile layout — scoped to <=820px so it never affects the desktop courtyard. Auto-wrapped. */
@media (max-width: 820px) {
/* HansMed v3 — mobile-specific styles. Loaded ONLY by the mobile HTML.
   Stacked layout: nav stays simple, hero compact, houses scroll vertically
   one-per-row, brand & wordmark unchanged. */

:root {
  --m-cream:  #F5EBD6;
  --m-cream2: #EBDDBC;
  --m-ink:    #2A1D12;
  --m-ink2:   #4A3326;
  --m-gold:   #B6883B;
  --m-gold2:  #8C6520;
  --m-paper:  #F4EAD2;
  --m-hair:   rgba(74, 47, 30, 0.18);

}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #1A120B;
  color: var(--m-cream);
  font-family: var(--font-en-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Top nav: dark bar with brand plate + hamburger ── */
.m-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--m-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 64px;
}

/* Brand plate — matches the desktop wordmark plate exactly */
.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--m-cream);
  color: var(--m-ink);
  padding: 6px 10px;
  border-radius: 6px;
  position: relative;
}
/* The plate renders 38px tall at phone widths — 6px under the 44px touch
   minimum every other nav control (EN, 中, Book, Menu) already meets. The
   plate's SIZE is deliberate ("matches the desktop wordmark plate exactly"),
   so the HIT AREA is extended instead of the box, the same trick the hero
   dots use.

   VERTICAL ONLY, on purpose. There is 16px of nav padding above the plate
   and 17px below, so ±3px is free — but only 3px of horizontal clearance
   before the EN pill at x=157, so widening would overlap a neighbouring
   target and steal its taps. Width is already 140px and needs nothing.

   position:absolute keeps this out of the flex flow — an in-flow ::before
   would become a flex ITEM of .m-brand and shove the wordmark sideways. */
.m-brand::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  min-height: 44px;
}
.m-brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.m-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.m-brand-primary {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--m-ink);
}
.m-brand-sub {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--m-ink);
  opacity: 0.9;
  margin-top: 1px;
}

/* Hamburger + lang toggle on the right */
.m-nav-right { display: flex; align-items: center; gap: 8px; }
.m-lang {
  display: inline-flex;
  border: 1px solid rgba(245, 235, 214, 0.22);
  background: rgba(245, 235, 214, 0.06);
  border-radius: 999px;
  padding: 2px;
}
/* The language pills were the smallest targets on the whole public site —
   EN 35x21 and 中 29x25 — and they are the first thing a visitor reaches for
   if the site is not in their language. Now a real 44px-tall target each.
   Width is held at 40px rather than 44: the two sit inside one pill container
   in a 375px nav that also carries the brand, Book and the menu button, and
   44 wide each overflows it. Height is the axis that matters for a thumb. */
.m-lang button {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 44px;
  min-width: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(245, 235, 214, 0.78);
  cursor: pointer;
}
.m-lang button.active {
  background: var(--m-cream);
  color: var(--m-ink);
}
.m-menu-btn {
  width: 44px; height: 44px;
  border: 1px solid rgba(245, 235, 214, 0.22);
  background: rgba(245, 235, 214, 0.06);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--m-cream);
}
.m-menu-btn svg { width: 18px; height: 18px; }

/* Slide-down menu */
.m-menu {
  position: fixed;
  left: 0; right: 0; top: 64px;
  background: var(--m-ink);
  border-bottom: 1px solid rgba(245, 235, 214, 0.1);
  padding: 8px 14px 14px;
  z-index: 49;
  transform: translateY(calc(-100% - 80px));
  transition: transform 0.3s ease;
}
.m-menu.open { transform: translateY(0); }
.m-menu a {
  display: block;
  padding: 12px 6px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(245, 235, 214, 0.86);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 235, 214, 0.08);
}
.m-menu a:last-child { border-bottom: none; }

/* ── Hero ── */
.m-hero {
  position: relative;
  padding: 32px 22px 18px;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, rgba(255, 250, 235, 0.85) 0%, rgba(244, 234, 210, 0) 70%),
    linear-gradient(180deg, #F4EAD2 0%, #EBDDBC 100%);
  color: var(--m-ink);
}
.m-hero-title {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--m-ink);
  margin: 0 0 8px;
  line-height: 1.1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  align-items: baseline;
}
.m-hero-seal {
  display: inline-block;
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 11px;
  color: var(--m-cream);
  background: var(--m-ink);
  padding: 3px 5px 4px;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 2px;
  transform: translateY(-8px);
  font-weight: 600;
}
.m-hero-sub {
  font-family: var(--font-en-body);
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  color: var(--m-ink);
  margin: 6px 0 8px;
  line-height: 1.35;
}
.m-hero-zh {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", serif;
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
  color: var(--m-ink);
  letter-spacing: 0.14em;
  margin: 0;
}
.m-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 0;
  color: var(--m-gold2);
}
.m-hero-divider .line { width: 36px; height: 1px; background: currentColor; opacity: 0.5; }
.m-hero-divider .dot  { width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }

/* ── Section eyebrow above the house list ── */
.m-section-eyebrow {
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--m-gold2);
  padding: 26px 16px 4px;
}
.m-section-title {
  text-align: center;
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--m-cream);
  margin: 0 0 22px;
}

/* ── Stacked house cards (one per row) ── */
.m-houses {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 16px 30px;
}
.m-house {
  position: relative;
  background: var(--m-cream);
  border: 1px solid rgba(200, 164, 93, 0.45);
  border-radius: 14px;
  padding: 16px 16px 18px;
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  color: var(--m-ink);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.m-house:active { transform: scale(0.99); }
.m-house.center {
  background: linear-gradient(180deg, #FAF1DA 0%, #F3E3BC 100%);
  border-color: rgba(140, 101, 32, 0.6);
}
.m-house-img {
  width: 100%;
  height: 116px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.m-house-body { min-width: 0; }
.m-house-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.m-house-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-ink);
  color: var(--m-cream);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.m-house.center .m-house-num { background: var(--m-gold2); color: var(--m-cream); }
.m-house-cn {
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--m-ink);
  margin: 0;
}
.m-house-en {
  font-family: var(--font-en-body);
  font-size: 13px;
  font-style: normal;
  color: var(--m-ink2);
}
.m-house-desc-cn {
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 12px;
  color: var(--m-ink);
  margin: 4px 0 2px;
  letter-spacing: 0.04em;
}
.m-house-desc-en {
  font-family: var(--font-en-body);
  font-size: 11.5px;
  color: var(--m-ink2);
  line-height: 1.4;
}
.m-house-arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(74, 47, 30, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--m-ink2);
  font-size: 14px;
}

/* ── Footer ── */
.m-footer {
  background: var(--m-ink);
  color: rgba(245, 235, 214, 0.78);
  padding: 28px 20px 22px;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}
.m-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--m-cream);
  color: var(--m-ink);
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.m-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  margin: 8px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(245, 235, 214, 0.12);
}
.m-footer-col h4 {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF6E0;
  margin: 0 0 8px;
}
.m-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.m-footer-col li {
  font-size: 13px;
  padding: 4px 0;
  color: rgba(245, 235, 214, 0.78);
}
.m-footer-partners {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(245, 235, 214, 0.78);
}
.m-footer-partners .label {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FFF6E0;
}
.m-footer-divider {
  width: 6px; height: 6px;
  background: rgba(245, 235, 214, 0.2);
  transform: rotate(45deg);
}
.m-footer-copy {
  font-size: 11px;
  color: rgba(245, 235, 214, 0.55);
  margin-top: 14px;
  line-height: 1.5;
}

/* ── Sign-in modal (V tapped) ── */
.m-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 9, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.m-modal {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, #FBF5E3 0%, #F5E9C9 100%);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 24px 22px 28px;
  position: relative;
  color: var(--m-ink);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
  animation: m-slide-up 0.32s cubic-bezier(.2,.8,.2,1);
}
@keyframes m-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.m-modal-grip {
  width: 38px; height: 4px;
  background: rgba(74, 47, 30, 0.22);
  border-radius: 999px;
  margin: -6px auto 16px;
}
.m-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--m-ink2);
}
.m-modal-eyebrow {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--m-gold2);
  text-align: center;
}
.m-modal-title {
  text-align: center;
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  color: var(--m-ink);
  margin: 6px 0 2px;
}
.m-modal-sub {
  text-align: center;
  font-family: "Fraunces", var(--font-en-body);
  font-style: normal;
  font-size: 14px;
  color: var(--m-ink2);
  margin: 0 0 16px;
}
.m-tabs {
  display: flex;
  background: rgba(74, 47, 30, 0.06);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 16px;
}
.m-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-en-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--m-ink2);
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 999px;
}
.m-tab.active { background: var(--m-ink); color: #FBF5E3; }
.m-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.m-field label {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-ink2);
}
.m-field input {
  font-family: var(--font-en-body);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(74, 47, 30, 0.22);
  border-radius: 10px;
  background: rgba(255, 251, 236, 0.7);
  color: var(--m-ink);
  outline: none;
}
.m-field input:focus { border-color: var(--m-gold2); background: #FFFDF4; }
.m-modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-en-body);
  font-size: 12px;
  color: var(--m-ink2);
  margin: 4px 0 12px;
}
.m-modal-meta a { color: var(--m-gold2); text-decoration: none; }
.m-modal-submit {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  background: var(--m-ink);
  color: #FBF5E3;
  font-family: var(--font-en-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 10px;
  cursor: pointer;
}
.m-modal-foot {
  text-align: center;
  font-family: var(--font-en-body);
  font-size: 13px;
  color: var(--m-ink2);
  margin-top: 14px;
}
.m-modal-foot a { color: var(--m-gold2); text-decoration: none; font-weight: 500; }

/* Decorative corner accents on the hero (smaller for mobile) */
.m-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  color: var(--m-gold2);
  opacity: 0.6;
  pointer-events: none;
}
.m-corner-tl { top: 14px; left: 14px; }
.m-corner-tr { top: 14px; right: 14px; transform: scaleX(-1); }

} /* end @media max-width:820px */

/* --------------------------------------------------------------------
   2026-06-03 -- narrow-phone (<600px) header polish
   --------------------------------------------------------------------
   The .m-brand plate stacks an English wordmark on top of a Chinese
   sub-wordmark. On phones the SVG icon + bilingual text + Book pill
   + hamburger together crowd the nav bar, so on screens <600px we
   hide the Chinese subtitle and tighten the English wordmark. Brand
   identity stays intact (icon + 'HansMed TCM'); the Chinese name
   reappears at the next breakpoint up. */
@media (max-width: 600px) {
  .m-brand         { padding: 6px 8px; gap: 8px; }
  .m-brand-mark    { width: 24px; height: 24px; }
  .m-brand-sub     { display: none; }
  .m-brand-text    { line-height: 1; }
  .m-brand-primary { font-size: 13px; letter-spacing: 0.06em; }
}

/* ===== Soft Editorial rollout (2026-06-16): light editorial mobile nav ===== */
.m-nav { background: rgba(251,249,244,.96); border-bottom: 1px solid #ECE6DC; }
.m-lang { border-color: #D9CFC0; background: rgba(120,80,50,.05); }
.m-lang button { color: #5B4A3C; }
.m-lang button.active { background: #A24632; color: #fff; }
.m-menu-btn { border-color: #D9CFC0; background: rgba(120,80,50,.05); color: #5B4A3C; }
.m-menu { background: rgba(251,249,244,.98); border-bottom: 1px solid #ECE6DC; }
.m-menu a { color: #5B4A3C; border-bottom: 1px solid #ECE6DC; }
.m-menu a.btn-signin { color: #A24632; }