/* 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);
  /* The mark fills its two inverted cells with var(--logo-knockout, #fff).
     They must match THIS PLATE, not the bar behind it — declared beside the
     plate background so the two cannot drift. Without it the fallback #fff
     painted white dots on cream: the mismatch F14 calls "white holes". */
  --logo-knockout: 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; }

/* courtyard-v3.css reveals .m-nav-only up to 1000px ("v6 Brand Boost"), but
   everything above - including .m-brand's cream plate AND its knockout - sits
   inside this file's max-width:820px block. So between 821 and 1000px the mark
   is on screen UNPLATED, straight on the .m-nav ground declared just above.
   The knockout follows the surface the mark actually sits on, so here that
   ground is the value - not the cream plate, which does not exist at these
   widths. Declared beside that ground so the two cannot drift. */
@media (min-width: 821px) and (max-width: 1000px) {
  .m-brand { --logo-knockout: #FBF9F4; }
}
.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; }

/* ── The nav row on a 320px phone ─────────────────────────────────────
   This row is tight by design — see the note on .m-lang button above,
   where the pills are held at 40px wide rather than 44 precisely because
   the full row barely clears a 375px nav. At 320px it does not clear it:
   brand 114 + right group 207 needs 321px inside 292px of content box, so
   the group ran to x=335 and the hamburger lost 15px off the right edge.
   Nothing wrapped, because the row is a nowrap flex.

   Reclaimed 32px from spacing rather than from any target's height:

     nav side padding   14 -> 8   (12px)
     right-group gap     8 -> 4   ( 8px)
     lang pill width    40 -> 34  (12px, two pills)
     Book side padding  16 -> 12  ( 8px)

   Every control keeps its 44px height, which is the axis a thumb actually
   needs; the lang pills stay well above the 24px WCAG floor on width.
   Verified at 320px: the row ends at 312, inside the viewport.

   Scoped to 360px and below so the 375px layout is untouched — it already
   fits there with room to spare. */
@media (max-width: 360px) {
  .m-nav { padding-left: 8px; padding-right: 8px; }
  .m-nav-right { gap: 4px; }
  .m-lang button { min-width: 34px; padding: 0 6px; }
  .m-book { padding-left: 12px; padding-right: 12px; }
}