/* HansMed Healing Courtyard v3 — illustrated courtyard landing.
   Layers on top of styles.css.
   Differences from v1:
     • English body type = FF Tibere (with serif fallbacks)
     • All Chinese stays in 楷體, never italic
     • Landing screen replaced with a courtyard scene of 5 illustrated houses
     • Houses redrawn in a more pictorial style (gable-and-hip roof,
       lattice windows, wooden doors, lanterns, plants, gold medallions) */

:root {
  /* English serif body. FF Tibere is commercial; we declare it first
     and fall back to Source Serif 4 (Google Fonts), then EB Garamond. */
  --font-en-body: "FF Tibere", "Tibere", "Source Serif 4", "Source Serif Pro",
                  "EB Garamond", Georgia, serif;

  /* House palette */
  --v3-paper:  #F4EAD2;
  --v3-paper2: #EBDDBC;
  --v3-wall:   #F5EBD6;
  --v3-roof:   #2E2018;
  --v3-roof2:  #1B1310;
  --v3-door:   #4A2F1E;
  --v3-door2:  #2C1A0F;
  --v3-brass:  #B58A3D;
  --v3-leaf:   #3D5A3B;
  --v3-leaf2:  #6B8A55;
  --v3-ink:    #2A1D12;
  --v3-ink2:   #4A3326;
  --v3-pill:   #FDF7E8;
  --v3-gold:   #B6883B;
  --v3-gold2:  #8C6520;
  --v3-green:  #3A5A38;
  --v3-seal:   #B4422B;
  --v3-hair:   rgba(74, 47, 30, 0.18);

  /* Element ring */
  --v3-wood:   #5C7A4E;
  --v3-fire:   #BF4A2C;
  --v3-earth:  #A98552;
  --v3-metal:  #2E2A28;
  --v3-water:  #163040;
}

/* ── English body font override for v3 ────────────────────────────────
   The user asked for FF Tibere everywhere EXCEPT the nav (header),
   footer, and the brand wordmark plate. We override the body default,
   then re-pin DM Sans onto the structural chrome. */
body.v3,
body.v3 .landing,
body.v3 .courtyard,
body.v3 .bldg-page,
body.v3 .sitemap {
  font-family: var(--font-en-body);
}
body.v3 .nav,
body.v3 .nav *,
body.v3 .footer,
body.v3 .footer *,
body.v3 .nav-wordmark-block,
body.v3 .nav-wordmark-primary,
body.v3 .nav-wordmark-sub {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
/* But keep the Chinese line of the wordmark in its proper Chinese serif */
body.v3 .nav-wordmark-sub {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", serif;
}
/* And keep Chinese display surfaces in 楷體, never italic */
html[lang="zh"] body.v3 .landing,
html[lang="zh"] body.v3 .v3-hero-title,
html[lang="zh"] body.v3 .v3-hero-zh,
html[lang="zh"] body.v3 .card-cn,
html[lang="zh"] body.v3 .card-desc-cn,
html[lang="zh"] body.v3 .v3-elem-circle,
html[lang="zh"] body.v3 .v3-hero-seal {
  font-family: var(--font-zh);
  font-style: normal !important;
}

/* ────────────────── Landing scene ────────────────── */
.v3-landing {
  position: relative;
  min-height: calc(100vh - 0px);
  padding: 130px 64px 32px;
  isolation: isolate;
  overflow: hidden;
}

/* Background: light cream courtyard wash */
.v3-landing-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #F1E6CC;
  background-image: url("../img/courtyard/courtyard-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.v3-corner {
  position: absolute;
  width: 84px;
  height: 84px;
  pointer-events: none;
  color: var(--v3-gold2);
  opacity: 0.65;
}
.v3-corner-tl { top: 108px;   left: 32px; }
.v3-corner-tr { top: 108px;   right: 32px; transform: scaleX(-1); }
.v3-corner-bl { bottom: 24px; left: 32px;  transform: scaleY(-1); }
.v3-corner-br { bottom: 24px; right: 32px; transform: scale(-1, -1); }

.v3-leaves {
  position: absolute;
  left: -28px;
  bottom: 140px;
  width: 200px;
  height: 200px;
  opacity: 0.08;
  pointer-events: none;
  color: var(--v3-leaf);
  z-index: 0;
}
.v3-brush {
  position: absolute;
  inset: 205px 14% auto 22%;
  height: 90px;
  pointer-events: none;
  opacity: 0.16;
  color: var(--v3-ink2);
}

/* ── Hero text ── */
.v3-hero {
  text-align: center;
  margin-top: 6px;
  position: relative;
}
.v3-hero-title {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: 0.08em;
  color: var(--v3-ink);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  line-height: 1.05;
}
.v3-hero-seal {
  display: inline-block;
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 14px;
  color: #F5EBD6;
  background: var(--v3-ink);
  padding: 4px 6px 5px;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 2px;
  transform: translateY(-12px);
  font-weight: 600;
}
.v3-hero-sub {
  font-family: var(--font-en-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--v3-ink);
  margin: 4px 0 8px;
}
.v3-hero-sub em {
  font-family: inherit;
  font-style: italic;
  font-weight: 700;
  color: var(--v3-ink);
}
.v3-hero-zh {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", serif;
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  color: var(--v3-ink);
  letter-spacing: 0.18em;
}
.v3-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 0;
  color: var(--v3-gold2);
}
.v3-hero-divider .line { width: 50px; height: 1px; background: currentColor; opacity: 0.5; }
.v3-hero-divider .dot  { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

/* ── Stage (the courtyard scene) ── */
.v3-stage {
  position: relative;
  width: 100%;
  max-width: 1480px;
  margin: 22px auto 0;
  aspect-ratio: 1480 / 720;
  min-height: 580px;
}

.v3-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Houses */
.house {
  position: absolute;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), filter 0.35s;
  z-index: 3;
  /* Soft warm halo that bleeds the silhouette into the cream backdrop
     (per design review — blunt the outline so the houses don't look cut-out) */
  filter:
    drop-shadow(0 0 18px rgba(255, 246, 222, 0.9))
    drop-shadow(0 18px 28px rgba(140, 100, 60, 0.22));
}
.house:hover {
  transform: translateY(-4px);
  filter:
    drop-shadow(0 0 26px rgba(255, 246, 222, 1))
    drop-shadow(0 24px 36px rgba(140, 100, 60, 0.3));
}

.house.size-md { width: 240px; height: 240px; }
.house.size-lg { width: 300px; height: 290px; }
.house.size-xl { width: 360px; height: 340px; }

.house-pos-iii { left: 22%; top: -2%; }
.house-pos-iv  { right: 22%; top: -2%; }
.house-pos-i   { left: 13%; top: 28%; }
.house-pos-ii  { right: 13%; top: 28%; }
.house-pos-v   { left: 50%; top: 46%; transform: translateX(-50%); }
.house-pos-v:hover { transform: translateX(-50%) translateY(-4px); }

/* Info cards — ink plaques over the cream courtyard (colours inverted
   per design review). */
.house-card {
  position: absolute;
  width: 256px;
  padding: 18px 20px 18px;
  background: rgba(251, 245, 230, 0.92);
  border: 1px solid rgba(140, 101, 32, 0.18);
  border-radius: 16px;
  box-shadow: 0 22px 50px -22px rgba(60, 40, 22, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 4;
  color: var(--v3-ink);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.house-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 70px -18px rgba(40, 28, 16, 0.6);
  border-color: rgba(200, 164, 93, 0.85);
}
.house-card.center {
  background: rgba(251, 245, 230, 0.95);
  border-color: rgba(140, 101, 32, 0.3);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.card-num {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F5EBD6;
  color: var(--v3-ink);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.house-card.center .card-num {
  background: var(--v3-ink);
  color: #F5EBD6;
}
.card-cn {
  font-family: var(--font-zh);
  font-style: normal !important;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #FFF6E0;
  margin: 0;
}
.card-en {
  font-family: var(--font-en-body);
  font-size: 13.5px;
  font-style: italic;
  color: #D8C394;
  margin-left: 6px;
}
.card-icon {
  margin-left: auto;
  color: #D8C394;
  opacity: 0.7;
}
.card-desc-cn {
  font-family: var(--font-zh);
  font-style: normal !important;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #F5EBD6;
  margin: 6px 0 4px;
}
.card-desc-en {
  font-family: var(--font-en-body);
  font-size: 12px;
  color: #C8B790;
  line-height: 1.4;
  margin: 0;
}

.card-pos-iii { left: 0%;    top: 12%;   }
.card-pos-iv  { right: 0%;   top: 12%;   width: 260px; }
.card-pos-i   { left: 0%;    top: 58%;   width: 210px; }
.card-pos-ii  { right: 0%;   top: 58%;   }
.card-pos-v   { left: 50%;   bottom: -7%; transform: translateX(-50%); width: 400px; }

/* ── 5-element band ── */
.v3-elements {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 22px auto 0;
  padding: 12px 30px;
  background: var(--v3-pill);
  border: 1px solid var(--v3-hair);
  border-radius: 999px;
  width: max-content;
  box-shadow: 0 14px 30px -18px rgba(60, 40, 22, 0.2);
  position: relative;
  z-index: 5;
}
.v3-elem {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v3-elem-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-zh);
  font-style: normal !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.v3-elem-circle.wood  { background: var(--v3-wood); }
.v3-elem-circle.fire  { background: var(--v3-fire); }
.v3-elem-circle.earth { background: var(--v3-earth); }
.v3-elem-circle.metal { background: var(--v3-metal); }
.v3-elem-circle.water { background: var(--v3-water); }
.v3-elem-en {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--v3-ink2);
  letter-spacing: 0.14em;
}
.v3-elem-plus {
  font-family: var(--font-en-body);
  font-size: 14px;
  color: var(--v3-ink2);
  opacity: 0.45;
  align-self: center;
  margin-top: -14px;
}

/* Path glints */
.v3-glint {
  position: absolute;
  width: 14px; height: 14px;
  background: #F6D170;
  border: 1px solid #B58A3D;
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(246, 209, 112, 0.7);
  z-index: 2;
  border-radius: 2px;
}

/* Soft golden glow under center house */
.v3-center-glow {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 240px;
  background: radial-gradient(ellipse, rgba(246, 209, 112, 0.32) 0%, rgba(246, 209, 112, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Page shell — colours inverted: courtyard is now light cream,
   nav & footer are deep ink (per design review) ── */
html, body { background: #F4EAD2; }
body.v3 {
  font-family: var(--font-ui);
  color: var(--v3-ink);
  min-height: 100vh;
  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%);
  overflow-x: hidden;
}

/* When v3 active, hide the global atmosphere haze (it conflicts with our own bg) */
body.v3 .atmosphere {
  opacity: 0;
}

/* ── Nav & footer wear the DARK ink tone now (inverted from cream) ── */
body.v3 .nav {
  background: var(--v3-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.v3 .nav.solid {
  background: var(--v3-ink);
}
/* Brand plate wears the cream courtyard tone (inverted from ink) */
body.v3 .nav .nav-brand,
body.v3 .footer .nav-brand {
  background: #F5EBD6;
  color: var(--v3-ink);
}
body.v3 .nav .nav-brand .nav-wordmark-primary,
body.v3 .nav .nav-brand .nav-wordmark-sub,
body.v3 .footer .nav-brand .nav-wordmark-primary,
body.v3 .footer .nav-brand .nav-wordmark-sub {
  color: var(--v3-ink);
}
body.v3 .nav .nav-link {
  color: rgba(245, 235, 214, 0.78);
}
body.v3 .nav .nav-link:hover,
body.v3 .nav .nav-link.active {
  color: #FFF6E0;
  background: rgba(245, 235, 214, 0.08);
}
body.v3 .nav .lang-toggle {
  border-color: rgba(245, 235, 214, 0.22);
  background: rgba(245, 235, 214, 0.06);
}
body.v3 .nav .lang-toggle button {
  color: rgba(245, 235, 214, 0.78);
}
body.v3 .nav .lang-toggle button.active {
  background: #F5EBD6;
  color: var(--v3-ink);
}
body.v3 .nav .btn-primary {
  background: #F5EBD6;
  color: var(--v3-ink);
}
body.v3 .nav .btn-primary:hover {
  background: #FFFDF4;
}

/* Footer in the dark ink tone — colour & type matched to the header */
body.v3 .footer {
  background: var(--v3-ink);
  color: rgba(245, 235, 214, 0.78);
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
body.v3 .footer * {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
body.v3 .footer .nav-wordmark-sub {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", serif;
}
body.v3 .footer-top {
  border-bottom: 1px solid rgba(245, 235, 214, 0.12);
}
body.v3 .footer a { color: rgba(245, 235, 214, 0.78); }
body.v3 .footer a:hover { color: #FFF6E0; }
body.v3 .footer h4,
body.v3 .footer h5,
body.v3 .footer strong,
body.v3 .footer .footer-eyebrow,
body.v3 .footer .footer-col h4 {
  color: #FFF6E0;
}
body.v3 .footer .footer-col ul li,
body.v3 .footer .footer-col ul li a {
  color: rgba(245, 235, 214, 0.78);
}
body.v3 .footer .footer-col ul li:hover,
body.v3 .footer .footer-col ul li a:hover {
  color: #FFF6E0;
}
body.v3 .footer small,
body.v3 .footer .legal,
body.v3 .footer .copy,
body.v3 .footer .footer-bottom,
body.v3 .footer .footer-bottom * {
  color: rgba(245, 235, 214, 0.65);
}
/* Partner stamps + cert lines match the footer body copy tone */
body.v3 .footer .partner-stamp {
  color: rgba(245, 235, 214, 0.78);
}
body.v3 .footer .partner-stamp:hover {
  color: #FFF6E0;
}
body.v3 .footer .partner-divider {
  background: rgba(245, 235, 214, 0.2);
}
body.v3 .footer .footer-cert-line1,
body.v3 .footer .footer-cert-line2,
body.v3 .footer .footer-partner-name,
body.v3 .footer .footer-partner-sub {
  color: #FFF6E0;
}
body.v3 .footer .footer-cert svg,
body.v3 .footer .footer-partner svg {
  color: #FFF6E0;
}

/* ── Photographic house images (replaces SVG illustration) ── */
.house-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Sign-in / register modal (V · 我的内院) ── */
.v3-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 9, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: v3-modal-fade 0.25s ease-out;
}
@keyframes v3-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.v3-modal {
  width: 440px;
  max-width: 100%;
  background: linear-gradient(180deg, #FBF5E3 0%, #F5E9C9 100%);
  border: 1px solid rgba(140, 101, 32, 0.4);
  border-radius: 14px;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(38, 24, 16, 0.6),
              0 0 0 1px rgba(255, 245, 220, 0.6) inset;
  color: var(--v3-ink);
  animation: v3-modal-pop 0.3s cubic-bezier(.2,.8,.2,1.05);
}
@keyframes v3-modal-pop {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.v3-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--v3-ink2);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.v3-modal-close:hover { background: rgba(74, 47, 30, 0.08); }

.v3-modal-header { text-align: center; margin-bottom: 18px; }
.v3-modal-eyebrow {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v3-gold2);
  margin-bottom: 10px;
}
.v3-modal-title {
  font-family: var(--font-zh);
  font-style: normal !important;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--v3-ink);
  margin: 0 0 4px;
}
.v3-modal-subtitle {
  font-family: "Cormorant Garamond", var(--font-en-body);
  font-style: italic;
  font-size: 15px;
  color: var(--v3-ink2);
  margin: 0;
}

.v3-modal-tabs {
  display: flex;
  gap: 0;
  background: rgba(74, 47, 30, 0.06);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 20px;
}
.v3-modal-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-en-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-ink2);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}
.v3-modal-tab.active {
  background: var(--v3-ink);
  color: #FBF5E3;
}

.v3-modal-form { display: flex; flex-direction: column; gap: 14px; }
.v3-modal-field { display: flex; flex-direction: column; gap: 6px; }
.v3-modal-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink2);
}
.v3-modal-field input {
  font-family: var(--font-en-body);
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid rgba(74, 47, 30, 0.22);
  border-radius: 8px;
  background: rgba(255, 251, 236, 0.7);
  color: var(--v3-ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.v3-modal-field input:focus {
  border-color: var(--v3-gold2);
  background: #FFFDF4;
}

.v3-modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-en-body);
  font-size: 13px;
  color: var(--v3-ink2);
  margin: -2px 0 4px;
}
.v3-modal-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.v3-modal-check input { accent-color: var(--v3-gold2); }
.v3-modal-meta a {
  color: var(--v3-gold2);
  text-decoration: none;
}
.v3-modal-meta a:hover { text-decoration: underline; }

.v3-modal-submit {
  margin-top: 6px;
  padding: 13px 18px;
  border: 1px solid var(--v3-ink);
  background: var(--v3-ink);
  color: #FBF5E3;
  font-family: var(--font-en-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.v3-modal-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px rgba(38, 24, 16, 0.5);
}
.v3-modal-submit .arrow { font-size: 18px; }

.v3-modal-foot {
  text-align: center;
  font-family: var(--font-en-body);
  font-size: 13px;
  color: var(--v3-ink2);
  margin-top: 12px;
}
.v3-modal-foot a {
  color: var(--v3-gold2);
  text-decoration: none;
  font-weight: 500;
}
.v3-modal-foot a:hover { text-decoration: underline; }

/* Tighten nav when on v3 landing — handled by the dark-nav block above */


/* ────────────────────────────────────────────────────────────────────
   MOBILE — make v3 viewable on phones. Stage flips from a quincunx
   layout to a single-column stack, decorative layers hide, hero/nav
   shrink. Reachable at any narrow viewport (≤ 760px).
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .v3-landing {
    padding: 90px 16px 24px;
  }

  /* Hero — tighter */
  .v3-hero { margin-top: 0; }
  .v3-hero-title {
    display: block;
    font-size: 28px;
    line-height: 1.15;
  }
  .v3-hero-title > span {
    display: inline;
  }
  .v3-hero-seal {
    transform: translateY(-6px);
    font-size: 11px;
    padding: 3px 5px 4px;
    margin-left: 6px;
  }
  .v3-hero-sub {
    font-size: 16px;
    line-height: 1.35;
    padding: 0 12px;
  }
  .v3-hero-zh {
    font-size: 12px;
    letter-spacing: 0.14em;
    padding: 0 12px;
  }

  /* Decorative layers — hide on small screens */
  .v3-corner,
  .v3-leaves,
  .v3-paths,
  .v3-glint,
  .v3-center-glow { display: none; }

  /* Stage — flip from absolute quincunx to flex column. Houses + their
     cards become "rows": each house sits above its own card. */
  .v3-stage {
    position: static;
    max-width: 100%;
    margin: 22px 0 0;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Houses */
  .house,
  .house.size-md,
  .house.size-lg,
  .house.size-xl {
    position: static;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    height: 180px;
    filter: drop-shadow(0 12px 24px rgba(40, 28, 16, 0.25));
  }
  .house:hover,
  .house-pos-v:hover {
    transform: none;
    filter: drop-shadow(0 14px 28px rgba(40, 28, 16, 0.3));
  }
  .house-pos-v { transform: none; }

  /* Pair each house with its card using CSS order. Source DOM lists
     houses first (III, IV, I, II, V) then cards in the same order — we
     interleave by setting explicit order on each. */
  .house-pos-iii { order: 5; }   /* III house */
  .card-pos-iii  { order: 6; }   /* III card */
  .house-pos-iv  { order: 7; }   /* IV house */
  .card-pos-iv   { order: 8; }
  .house-pos-i   { order: 1; }   /* I house — first on mobile */
  .card-pos-i    { order: 2; }
  .house-pos-ii  { order: 3; }
  .card-pos-ii   { order: 4; }
  .house-pos-v   { order: 9; }
  .card-pos-v    { order: 10; }

  /* Cards */
  .house-card,
  .house-card.center {
    position: static;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    transform: none;
    padding: 14px 16px 16px;
  }
  .house-card:hover { transform: none; }

  .card-head { white-space: normal; flex-wrap: wrap; gap: 8px; }
  .card-cn  { font-size: 18px; }
  .card-en  { font-size: 12.5px; }
  .card-desc-cn { font-size: 12.5px; }
  .card-desc-en { font-size: 11.5px; }

  /* Nav adjustments are handled by v1's media query already; we only
     need to make sure the brand + lang fit nicely */
  body.v3 .nav { padding: 10px 14px; }

  /* Footer rows stack */
  body.v3 .footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Very narrow phones — extra compaction */
@media (max-width: 420px) {
  .v3-landing { padding: 84px 14px 20px; }
  .v3-hero-title { font-size: 24px; gap: 6px; }
  .v3-hero-sub  { font-size: 14px; }
  .house, .house.size-md, .house.size-lg, .house.size-xl { height: 160px; }
}


/* ──────────────────────────────────────────────────────────────────────
   V3 THEME — apply courtyard colours, fonts, and chrome to the building
   inner pages (Clinic, Apothecary, Pavilion, Study, Garden) and the
   Sitemap. body.v3 is on every page within the courtyard app, so these
   selectors take precedence over the v1 .bldg-*, .module-*, .doctor-*,
   .product-*, .sitemap-* rules in styles.css.
   ────────────────────────────────────────────────────────────────────── */

/* Page background — same warm cream wash as the courtyard */
body.v3 .bldg-page,
body.v3 .sitemap {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(255, 250, 235, 0.85) 0%, rgba(244, 234, 210, 0) 70%),
    linear-gradient(180deg, #F4EAD2 0%, #EBDDBC 100%);
  color: var(--v3-ink);
}

/* Back button → use ink/gold instead of clay */
body.v3 .bldg-page-back {
  color: var(--v3-ink2);
  font-family: var(--font-en-body);
  font-size: 14px;
}
body.v3 .bldg-page-back:hover { color: var(--v3-ink); }

/* Hero — match the courtyard hero typography */
body.v3 .bldg-hero {
  border-bottom-color: rgba(140, 101, 32, 0.25);
}
body.v3 .bldg-hero-num {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--v3-gold2);
}
/* The hero title shows English by default — use FF Tibere italic, the
   same italic body face used in the courtyard hero subhead */
body.v3 .bldg-hero-title {
  font-family: var(--font-en-body);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--v3-ink);
}
/* When the page is in Chinese, switch the hero title to KaiTi */
html[lang="zh"] body.v3 .bldg-hero-title {
  font-family: var(--font-zh);
  font-style: normal !important;
  font-weight: 600;
}
body.v3 .bldg-hero-desc {
  font-family: var(--font-en-body);
  color: var(--v3-ink2);
}
html[lang="zh"] body.v3 .bldg-hero-desc {
  font-family: var(--font-zh);
  font-style: normal !important;
}

/* Hero visual placeholder */
body.v3 .bldg-hero-vis {
  background:
    radial-gradient(circle at 40% 60%, rgba(200, 164, 93, 0.4), transparent 65%),
    linear-gradient(160deg, #F5EBD6, #E7D7B7);
  border: 1px solid rgba(140, 101, 32, 0.25);
}
body.v3 .bldg-hero-vis .placeholder-label {
  color: var(--v3-ink2);
  background: rgba(255, 251, 236, 0.85);
}

/* Module cards — light cream face by default */
body.v3 .module {
  background: #FBF5E3;
  border: 1px solid rgba(140, 101, 32, 0.25);
  color: var(--v3-ink);
}
body.v3 .module.dark {
  background: var(--v3-ink);
  color: #F5EBD6;
  border-color: transparent;
}
body.v3 .module-eyebrow {
  font-family: "DM Sans", sans-serif;
  color: var(--v3-gold2);
  letter-spacing: 0.26em;
}
body.v3 .module.dark .module-eyebrow {
  color: rgba(245, 235, 214, 0.7);
}
body.v3 .module-title {
  font-family: var(--font-en-body);
  font-style: italic;
  font-weight: 700;
  color: var(--v3-ink);
}
html[lang="zh"] body.v3 .module-title {
  font-family: var(--font-zh);
  font-style: normal !important;
  font-weight: 600;
}
body.v3 .module.dark .module-title { color: #FFF6E0; }
body.v3 .module-text {
  font-family: var(--font-en-body);
  color: var(--v3-ink2);
}
html[lang="zh"] body.v3 .module-text {
  font-family: var(--font-zh);
  font-style: normal !important;
}
body.v3 .module.dark .module-text { color: rgba(245, 235, 214, 0.78); }

/* Doctor / product / slot cards */
body.v3 .doctor-card,
body.v3 .product-card {
  background: #FBF5E3;
  border: 1px solid rgba(140, 101, 32, 0.2);
  border-radius: 12px;
}
body.v3 .doctor-name {
  font-family: var(--font-en-body);
  font-style: italic;
  font-weight: 600;
  color: var(--v3-ink);
}
html[lang="zh"] body.v3 .doctor-name {
  font-family: var(--font-zh);
  font-style: normal !important;
}
body.v3 .doctor-spec { color: var(--v3-gold2); }
body.v3 .doctor-meta { color: var(--v3-ink2); }
body.v3 .doctor-meta span {
  background: rgba(140, 101, 32, 0.12);
  color: var(--v3-ink2);
}
body.v3 .doctor-avatar {
  background: linear-gradient(160deg, #E7D7B7, #8C6520);
}

body.v3 .slot {
  background: #FBF5E3;
  border: 1px solid rgba(140, 101, 32, 0.25);
  color: var(--v3-ink);
  font-family: var(--font-en-body);
}
body.v3 .slot:hover {
  background: #F5EBD6;
  border-color: var(--v3-gold2);
}
body.v3 .slot.taken { color: rgba(74, 47, 30, 0.4); }

body.v3 .product-img {
  background:
    radial-gradient(circle at 40% 40%, rgba(255, 240, 210, 0.85), transparent 70%),
    linear-gradient(160deg, #F5EBD6, #E7D7B7);
}

/* Sitemap page — same theme */
body.v3 .sitemap-section,
body.v3 .sitemap-card {
  background: #FBF5E3;
  border: 1px solid rgba(140, 101, 32, 0.22);
  color: var(--v3-ink);
}
body.v3 .sitemap-title {
  font-family: var(--font-en-body);
  font-style: italic;
  font-weight: 700;
  color: var(--v3-ink);
}
html[lang="zh"] body.v3 .sitemap-title {
  font-family: var(--font-zh);
  font-style: normal !important;
}
body.v3 .sitemap-card-title,
body.v3 .sitemap-card-desc {
  color: var(--v3-ink);
}

/* Brand plate — explicit contrast rule so the wordmark always reads
   opposite to whatever sits behind it. When the nav is dark (v3 default)
   the plate is cream; we provide an .nav-brand--on-cream override that
   the patient portal applies when its top bar is cream. */
body.v3 .nav-brand,
body.v3 .footer .nav-brand {
  background: #F5EBD6 !important;
  color: var(--v3-ink) !important;
  border: 1px solid rgba(140, 101, 32, 0.25);
}
body.v3 .nav-brand .nav-wordmark-primary,
body.v3 .nav-brand .nav-wordmark-sub,
body.v3 .footer .nav-brand .nav-wordmark-primary,
body.v3 .footer .nav-brand .nav-wordmark-sub {
  color: var(--v3-ink) !important;
}
body.v3 .nav-brand svg,
body.v3 .footer .nav-brand svg {
  color: var(--v3-ink);
}


/* ─── 2026-05-30 — Phase 1 nav-swap follow-up ─────────────────
   The fixed v3 nav (position:fixed, ~80px tall, defined in
   courtyard-base.css .nav) clips the eyebrow line on landing-v4
   pages whose hero is .hero-v3 (e.g., practitioners.html). Push
   the hero content down enough to clear the nav with breathing room.
   Scoped to body.v3.landing-v4 so courtyard-only pages (index.html,
   clinic.html, wellness-hall.html) aren't double-padded. */
body.v3.landing-v4 .hero-v3 {
  padding-top: 120px;
}
@media (max-width: 760px) {
  body.v3.landing-v4 .hero-v3 {
    padding-top: 96px;
  }
}


/* ─── 2026-05-30 — Delta 2 from v3 design package ─────────────
   Restructured card head: card-titles wraps card-name + card-subname,
   followed by card-rule (hairline) and card-desc. Extracted from
   v3-styles.css lines 370-440. Compatible with the existing card-cn/
   card-en/card-desc-cn/card-desc-en classes that older pages may
   still use. */
.card-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.card-name {
  font-family: var(--font-en-body);
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--v3-ink);
  margin: 0;
  line-height: 1.1;
}
.card-subname {
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v3-ink2);
  line-height: 1.2;
}
html[lang="zh"] .card-titles .card-name {
  font-family: var(--font-zh);
  font-weight: 600;
  letter-spacing: 0.06em;
}
html[lang="zh"] .card-titles .card-subname {
  font-family: var(--font-en-body);
  font-style: italic;
  font-size: 13px;
}
.card-rule {
  height: 1px;
  background: rgba(140, 101, 32, 0.3);
  margin: 8px 0 10px;
}
.card-desc {
  font-family: var(--font-en-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--v3-ink2);
  margin: 0;
  line-height: 1.5;
}
html[lang="zh"] .card-desc {
  font-family: var(--font-zh);
  font-style: normal;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}


/* ─── 2026-05-30 — Index v3 alignment: nav-book gold, Sign In pill, WhatsApp FAB ─── */
body.v3 .nav .nav-book {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  background: linear-gradient(180deg, #E7C879 0%, #C79A3D 100%);
  color: #2A1D12;
  font-weight: 600;
  border: 1px solid rgba(122, 86, 20, 0.5);
  box-shadow: 0 6px 16px -8px rgba(140, 101, 32, 0.7),
              inset 0 1px 0 rgba(255, 250, 230, 0.6);
  border-radius: 999px;
}
body.v3 .nav .nav-book:hover {
  background: linear-gradient(180deg, #EED389 0%, #D2A647 100%);
}
body.v3 .nav .nav-book-ico {
  width: 16px;
  height: 16px;
}
body.v3 .nav .btn-signin {
  padding: 9px 18px;
  background: transparent;
  color: rgba(245, 235, 214, 0.92);
  border: 1px solid rgba(231, 200, 121, 0.5);
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body.v3 .nav .btn-signin:hover {
  background: rgba(231, 200, 121, 0.12);
  color: #FFF6E0;
  border-color: rgba(231, 200, 121, 0.85);
}
.wa-fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  box-shadow: 0 10px 26px -6px rgba(37, 211, 102, 0.6),
              0 4px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.wa-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0;   }
  100% { transform: scale(1.5); opacity: 0;   }
}
.wa-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px -6px rgba(37, 211, 102, 0.7),
              0 6px 14px rgba(0, 0, 0, 0.3);
}
.wa-fab-ico {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .wa-fab { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .wa-fab-ico { width: 30px; height: 30px; }
}


/* ─── 2026-05-30 — Design wholesale override (Phase 4) ─────────
   Per user: "replace the shirt, same insides." The courtyard-bg.png
   painting ALREADY contains the stone paths, corner ornaments,
   bamboo leaves, glints, and center glow. So hide the CSS decorative
   layers entirely and rely on the painting.

   Houses get the design's bigger sizes (320/380/460 vs old 240/300/360)
   and the slightly-different positions (19%/11% vs old 22%/13%).
   Footer gets margin-top:0 to remove the cream strip below the painting.

   Hero typography swapped to the design's line1 (upright) / line2
   (italic gold) pattern. */

/* Hide decorative layers — painting carries them */
body.v3 .v3-corner,
body.v3 .v3-leaves,
body.v3 .v3-brush,
body.v3 .v3-paths,
body.v3 .v3-glint,
body.v3 .v3-center-glow { display: none !important; }

/* Footer butts straight onto the painting (kills the cream gap) */
body.v3 .footer { margin-top: 0 !important; }

/* Landing section sizing per design */
body.v3 .v3-landing {
  padding: 130px 64px 64px;
  min-height: calc(100vh - 0px);
}

/* Stage (the courtyard scene) per design */
body.v3 .v3-stage {
  max-width: 1560px;
  margin: 18px auto 0;
  aspect-ratio: 1560 / 760;
  min-height: 660px;
  padding-bottom: 70px;
}

/* Houses — bigger, slightly different positions, with warm halo */
body.v3 .house {
  filter:
    drop-shadow(0 0 18px rgba(255, 246, 222, 0.9))
    drop-shadow(0 18px 28px rgba(140, 100, 60, 0.22));
}
body.v3 .house:hover {
  filter:
    drop-shadow(0 0 26px rgba(255, 246, 222, 1))
    drop-shadow(0 24px 36px rgba(140, 100, 60, 0.3));
}
body.v3 .house.size-md { width: 320px; height: 310px; }
body.v3 .house.size-lg { width: 380px; height: 360px; }
body.v3 .house.size-xl { width: 460px; height: 420px; }
body.v3 .house.house-pos-iv { width: 380px; height: 366px; }

body.v3 .house-pos-iii { left: 19%; top: -3%; }
body.v3 .house-pos-iv  { right: 19%; top: -3%; }
body.v3 .house-pos-i   { left: 11%; top: 33%; }
body.v3 .house-pos-ii  { right: 11%; top: 33%; }
body.v3 .house-pos-v   { left: 50%; top: 44%; transform: translateX(-50%); }
body.v3 .house-pos-v:hover { transform: translateX(-50%) translateY(-4px); }

/* Hero typography — line1 upright dark, line2 italic gold */
body.v3 .v3-hero-title { line-height: 1.06; margin: 0 0 16px; }
body.v3 .v3-hero-title > span { display: block; }
body.v3 .v3-hero-line1 {
  font-family: var(--font-en-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.005em;
  color: var(--v3-ink);
}
body.v3 .v3-hero-line2 {
  font-family: var(--font-en-body);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.005em;
  color: var(--v3-gold2);
  margin-top: 2px;
}
body.v3 .v3-hero-title-zh .v3-hero-line1,
body.v3 .v3-hero-title-zh .v3-hero-line2 {
  font-family: var(--font-zh);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}
body.v3 .v3-hero-title-zh .v3-hero-line2 { color: var(--v3-gold2); }


/* 2026-05-30 — Phase 4f: REVERT 4b/4c/4d/4e wholesale.
   UI Designer audit (2026-05-30) found Phase 4a's house top values were
   wrong (~7-8% too low vs design source), and 4b-4e were patches on
   patches that broke the design's coordinate system. Fixed 4a's top
   values in place; reverted base .card-pos-v to design's bottom: -7%
   (was clobbered to 4% in earlier extraction). Only the card-num
   numerals standardization survives here — deliberate design deviation
   keeping all I/II/III/IV/V uniform (was V's dark style only). */
body.v3 .card-num {
  background: var(--v3-ink) !important;
  color: #F5EBD6 !important;
}



/* 2026-05-30 — Phase 5: nav header upgrade + bilingual data-en fix + lowered I/II + no underlines */

/* User report: <a class="house-card"> and <a class="nav-link"> show underlines
   (browser default for anchor tags). Override on cards, nav links, and the
   Book/Sign-In pill buttons inside the nav. */
body.v3 .house-card,
body.v3 .house-card:hover,
body.v3 .house-card:focus,
body.v3 .house-card * {
  text-decoration: none !important;
}
body.v3 nav.nav .nav-link,
body.v3 nav.nav .nav-link:hover,
body.v3 nav.nav .nav-link:focus,
body.v3 nav.nav .nav-link:visited,
nav.nav .nav-link,
nav.nav .nav-link:hover,
nav.nav .nav-link:focus,
nav.nav .nav-link:visited {
  text-decoration: none !important;
}
body.v3 nav.nav .btn,
body.v3 nav.nav .btn:hover,
nav.nav .btn,
nav.nav .btn:hover {
  text-decoration: none !important;
}



/* 2026-05-30 — Phase 6a: hide bilingual subname under card title in single-lang mode.
   Cards have <span class="card-titles" lang="en"><span class="card-name">Clinic</span>
   <span class="card-subname">诊所</span></span> structure — bilingual sublabel by design.
   User wants pure EN in EN mode and pure ZH in ZH mode, so suppress the subname
   (the OTHER-language reading) entirely when language is locked. */
body.lang-en .card-subname,
body.lang-zh .card-subname {
  display: none !important;
}



/* 2026-05-31 — Phase 7B (revised in Phase 8): hide v3 nav on mobile.
   Phase 8 added .m-nav-only block to all 13 landing pages. Index has
   its own .hm-mobile. On mobile, hide the v3 desktop nav entirely so
   only the mobile .m-nav shows. */
@media (max-width: 768px) {
  body.v3 nav.nav { display: none !important; }
}

/* 2026-05-31 — Phase 8: .m-nav-only show/hide + mobile Book pill compact. */
.m-nav-only { display: none; }
@media (max-width: 768px) {
  .m-nav-only { display: block; }
}
.m-book {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #d4a843;
  color: #261810 !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid rgba(140, 101, 32, 0.35);
}
.m-book:hover { background: #c9a043; }



/* 2026-05-31 — Phase 9: footer brand visibility + clinic compare-grid mobile + index bilingual cleanup */

/* Issue 2: m-footer has cream text color (rgba(245,235,214,0.78)) and the
   m-brand SVG inherits color via currentColor → rects+circles render cream
   on the cream pill = invisible. Force dark color on the brand subtree. */
.m-footer .m-brand,
.m-footer .m-brand svg {
  color: var(--m-ink, #261810) !important;
}
.m-footer .m-brand .m-brand-primary,
.m-footer .m-brand .m-brand-sub {
  color: var(--m-ink, #261810) !important;
}

/* Issue 3: clinic.html .compare-grid collapses to single column on mobile
   (each cell on its own row → unreadable list). Make it horizontally
   scrollable instead so the comparison table stays intact. */
@media (max-width: 768px) {
  .compare-grid {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-grid-wrap {
    overflow-x: auto;
  }
  .compare-grid > * {
    display: inline-block;
    vertical-align: top;
  }
}

/* Better mobile pattern: stacked cards per service.
   Override the inline mobile rule that hides the first head cell. */
@media (max-width: 768px) {
  .compare-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  .compare-grid > .compare-head:first-child { display: none !important; }
  .compare-grid > .compare-head {
    display: block;
    background: var(--v3-ink, #261810);
    color: #F5EBD6;
    padding: 12px 16px;
    margin-top: 18px;
    font-weight: 700;
    border-radius: 6px 6px 0 0;
  }
  .compare-grid > .compare-head:nth-child(2) { margin-top: 0; }
  .compare-grid > .compare-label {
    display: block;
    background: rgba(140, 101, 32, 0.08);
    padding: 8px 16px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(38, 24, 16, 0.6);
    border-bottom: 1px solid rgba(140, 101, 32, 0.15);
  }
  .compare-grid > .compare-cell:not(.compare-head):not(.compare-label) {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(140, 101, 32, 0.1);
  }
}

/* Issue 4: index mobile cards + hero show both EN and ZH text simultaneously.
   .m-house-cn / .m-house-desc-cn / .m-hero-zh = Chinese text.
   .m-house-en / .m-house-desc-en / .m-hero-sub = English text.
   Hide the opposite-language one based on body class. */
body.lang-en .m-house-cn,
body.lang-en .m-house-desc-cn,
body.lang-en .m-hero-zh { display: none !important; }
body.lang-zh .m-house-en,
body.lang-zh .m-house-desc-en,
body.lang-zh .m-hero-sub { display: none !important; }



/* 2026-05-31 — Phase 10: clinic per-service mobile cards (supersedes Phase 9 compare-grid mobile hack). */

.mobile-services { display: none; }

@media (max-width: 768px) {
  .compare-grid { display: none !important; }
  .mobile-services { display: block; }
  .ms-card {
    background: #fbf7ee;
    border: 1px solid rgba(140, 101, 32, 0.18);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(38, 24, 16, 0.05);
  }
  .ms-name {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--v3-ink, #261810);
    color: #F5EBD6;
    border-radius: 8px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 600;
  }
  .ms-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(140, 101, 32, 0.12);
  }
  .ms-row:last-child { border-bottom: none; }
  .ms-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(38, 24, 16, 0.55);
    margin-bottom: 4px;
  }
  .ms-val {
    font-size: 14px;
    line-height: 1.45;
    color: var(--v3-ink, #261810);
  }
}



/* 2026-05-31 — Phase 11: sticky mobile nav + bulletproof v3 nav hide. */

/* Make the wrapper itself sticky so the .m-nav inside doesn't scroll
   away with its parent. High z-index to sit above content. */
.m-nav-only {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--m-ink, #261810);
}

@media (max-width: 768px) {
  /* Bulletproof: hide v3 nav AND its nav-auth-slot in case any sub-element
     was leaking through (e.g. position: fixed on the Sign In pill made it
     visible at top-left despite parent display:none). */
  body.v3 nav.nav,
  body.v3 nav.nav #nav-auth-slot,
  body.v3 nav.nav .btn-signin {
    display: none !important;
    visibility: hidden !important;
  }
}



/* 2026-05-31 — Phase 12: horizontal doctor cards + fixed mobile nav + bulletproof bilingual hide */

/* Item 1: doctor-card horizontal on mobile — avatar left, text right. */
@media (max-width: 768px) {
  .doctor-row {
    display: block !important;
  }
  .doctor-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px;
  }
  .doctor-avatar {
    flex-shrink: 0;
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
  }
  .doctor-card > div:not(.doctor-avatar) {
    flex: 1;
    min-width: 0;
  }
  .doctor-name { font-size: 15px; margin-top: 0 !important; }
  .doctor-spec { font-size: 12px; }
}

/* Item 3: switch .m-nav-only from sticky to fixed (sticky breaks under
   ancestor overflow). Add body padding-top on mobile to compensate
   for the fixed nav so content doesn't slide under it on load. */


/* Item 2: bulletproof bilingual hide for ALL mobile elements that may
   contain "EN · ZH" or "ZH · EN" text. The lang-switcher's regex/wrap
   path can fail; explicit lang spans (added in HTML) + these CSS rules
   are the no-JS-fallback. */
body.lang-en [lang="zh"],
body.lang-en [lang="zh-CN"],
body.lang-en [lang="zh-TW"],
body.lang-en .hm-lang-zh { display: none !important; }
body.lang-zh [lang="en"],
body.lang-zh .hm-lang-en { display: none !important; }
body.lang-en .hm-lang-sep,
body.lang-zh .hm-lang-sep { display: none !important; }



/* 2026-05-31 — Phase 13: doctor card grid + signin nuke + hero handling */

/* Item 1 nuke: hide ANY .btn-signin or #nav-auth-slot that lives OUTSIDE
   the mobile .m-nav-only or .m-menu drawer. The v3 nav's Sign In pill
   was leaking despite Phase 11 hide rules. Higher specificity. */
@media (max-width: 768px) {
  body.v3 nav.nav,
  body.v3 nav.nav * { display: none !important; visibility: hidden !important; }

}

/* Item 3 rewrite: doctor-card grid layout (avatar left, content stacks right). */
@media (max-width: 768px) {
  .doctor-row {
    display: block !important;
  }
  .doctor-card {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto;
    gap: 4px 14px;
    align-items: start;
    margin-bottom: 12px;
    padding: 14px;
  }
  .doctor-card .doctor-avatar {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
    align-self: start;
  }
  .doctor-card > *:not(.doctor-avatar) {
    grid-column: 2;
  }
  .doctor-card .doctor-name { font-size: 15px; margin: 0 !important; line-height: 1.3; }
  .doctor-card .doctor-spec { font-size: 12px; margin: 4px 0 !important; }
  .doctor-card .doctor-meta { display: inline-flex; gap: 6px; margin: 4px 0 !important; }
  .doctor-card .doctor-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 10px;
    border: 1px solid rgba(140, 101, 32, 0.25);
    border-radius: 10px;
    background: rgba(245, 235, 214, 0.5);
  }
}