/* =========================================================
   A Tempo Regeneration Center for Musicians
   Daniel Chiung Jui Su, MD, RMSK, CIPS

   Design system — adapted from the Traditional Chinese site
   at drdanielsu.com so the two read as one practice.

   Palette: warm paper + ink + cello-varnish accent.
   Every token lives in :root below. Change it there, not
   further down the file.
   ========================================================= */

:root {
  /* Surfaces — carried over from the original blog's warm apricot */
  --paper:      #FDF5EE;
  --paper-2:    #F6D4BF;   /* alternating deeper band */
  --paper-3:    #EFC5AB;
  --white:      #FFFCF8;

  /* Ink */
  --ink:        #1F1813;
  --ink-2:      #3F342B;
  --muted:      #6A5B4E;
  --muted-2:    #7E6A52;

  /* Accents */
  --accent:     #8A3E2B;   /* cello varnish */
  --accent-2:   #A85333;
  --accent-wash:#FBE8DC;
  --deep:       #3B2C22;   /* warm dark brown */
  --gold:       #9D7040;

  /* Lines */
  --line:       #E7D2C0;
  --line-soft:  #F1E1D4;

  /* Type — English-first stacks. The Chinese site's CJK faces
     are deliberately absent; this site never sets Chinese text
     beyond the taxi card on the appointment page, which opts in
     via .cjk. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, sans-serif;
  --cjk:  "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* Metrics */
  --wrap: 1120px;
  --prose: 40rem;      /* ~72 characters at the 20px base — the readable measure */
  --nav-h: 124px;
  --r: 3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Master type scale for the whole site. 125% = 20px base — deliberately
   matched to the Chinese site at drdanielsu.com so the two read as one
   practice and neither feels small. Change this one number to scale the
   entire site: 131.25% = 21px if it should be larger still, 118.75% = 19px
   if it should be a little tighter. */
html {
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* long URLs and email addresses must not blow out the layout */
  overflow-wrap: break-word;
}
.clinic-line dd, .foot li a, .callout a, .acard { overflow-wrap: anywhere; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
::selection { background: var(--accent-wash); color: var(--accent); }
.cjk { font-family: var(--cjk); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* Skip layout and paint for sections still off-screen. The first section
   is excluded so the top of the page is never deferred. `auto` in
   contain-intrinsic-size makes the browser remember each section's real
   height once measured, so the scrollbar does not jump around.
   Long pages (treatment, about) benefit most. */
@supports (content-visibility: auto) {
  main > .section + .section {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
}
.wrap-narrow { max-width: 800px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--paper2 { background: var(--paper-2); }
.section--deep { background: var(--deep); color: #F1E7DB; }
.section--deep a { color: #F2CDB4; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Header / Nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 245, 238, .90);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
/* Two rows: brand on the first, navigation on the second, so the
   menu can stay legible instead of shrinking to fit one line. */
.site-head__inner {
  min-height: var(--nav-h);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0 20px;
  padding-block: 14px 6px;
}
.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; white-space: nowrap; }
.brand__name { font-family: var(--serif); font-size: 1.34rem; font-weight: 600; letter-spacing: .04em; font-style: italic; }
.brand__tag {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500;
}
/* The nav box must start exactly where page content starts, because its
   top border is a visible hairline running across the header — a negative
   margin here makes that rule overhang the content edge. Instead the box
   stays aligned and the FIRST link drops its left padding, so its text
   still lines up with the brand and the h1 below. */
.nav {
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 7px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.nav > a:first-of-type { padding-left: 0; }
.nav > a:first-of-type::after { left: 0; }
.nav a {
  position: relative;
  display: inline-block;
  padding: 9px 8px;
  font-size: .95rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .2s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Language switch across to the Chinese site */
.nav a.nav__lang {
  margin-left: 6px; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; letter-spacing: .06em;
  color: var(--muted);
}
.nav a.nav__lang::after { display: none; }
.nav a.nav__lang:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

/* The one action that matters — visually separated from navigation */
.nav a.nav__cta {
  margin-left: auto; background: var(--accent); color: #FFF8F4;
  border-radius: var(--r); padding: 9px 18px; font-weight: 600;
  font-size: .85rem; letter-spacing: .03em;
}
.nav a.nav__cta::after { display: none; }
.nav a.nav__cta:hover { background: #73321F; color: #FFF8F4; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px; color: var(--ink);
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  margin: 5px 0; transition: transform .3s ease, opacity .3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  /* Phone / tablet: single row, menu collapses to a hamburger */
  :root { --nav-h: 70px; }
  .site-head__inner { padding-block: 0; min-height: var(--nav-h); flex-wrap: nowrap; }
  .nav-toggle { display: block; margin-right: 0; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex: 0 0 auto; margin: 0; padding-top: 0; border-top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 12px 28px 26px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 15px 0; font-size: 1.08rem; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  .nav a.nav__lang { margin: 16px 0 0; text-align: center; border-bottom: 1px solid var(--line); }
  .nav a.nav__cta { margin: 14px 0 0; text-align: center; }
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 20px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after, .eyebrow--center::before { content: ""; width: 44px; flex: none; height: 1px; background: var(--line); }

.h-display {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 4.6vw, 3.1rem);
  line-height: 1.18; font-weight: 600; letter-spacing: -.01em;
  text-wrap: balance;
}
.h-section {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  line-height: 1.25; margin-bottom: 1rem; letter-spacing: -.005em;
  text-wrap: balance;
}
.h-sub {
  font-size: 1.08rem; font-weight: 600; margin: 2.4rem 0 .8rem;
  padding-left: 13px; border-left: 2.5px solid var(--accent);
}
.lede { font-size: 1.15rem; color: var(--ink-2); line-height: 1.75; text-wrap: pretty; }
.small { font-size: .93rem; color: var(--muted); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  font-size: .94rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #FFF8F4; }
.btn--primary:hover { background: #73321F; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.btn--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #FFF; }
.btn--light:hover { background: #FFF; color: var(--deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.btn-row--center { justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 118px) 0 clamp(56px, 7vw, 92px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60rem 34rem at 78% -12%, rgba(138,62,43,.07), transparent 62%),
    radial-gradient(48rem 30rem at 8% 108%, rgba(34,51,59,.06), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.28fr .82fr; gap: 60px; align-items: center; }
.hero__title { margin-bottom: 22px; }
.hero__title .sup {
  display: block; font-size: .76rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; font-family: var(--sans); margin-bottom: 20px;
}
.hero__creds {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px;
  padding: 0; list-style: none;
}
.hero__creds li {
  margin: 0;
  font-size: .76rem; letter-spacing: .03em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; background: var(--white);
}
.hero__quote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.04rem; font-style: italic; line-height: 1.7;
  color: var(--ink-2);
}
.hero__quote footer {
  margin-top: 10px; font-family: var(--sans); font-style: normal;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}

.hero__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 30px 26px;
  box-shadow: 0 1px 2px rgba(26,24,21,.03), 0 14px 40px -22px rgba(26,24,21,.22);
}
.hero__card h2 {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px; font-weight: 600;
}
.clinic-line { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .97rem; }
.clinic-line:last-of-type { border-bottom: 0; }
.clinic-line dt { flex: 0 0 5.4em; color: var(--muted); margin: 0; font-size: .84rem; }
.clinic-line dd { margin: 0; flex: 1; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.stat { background: var(--paper); padding: 32px 24px; text-align: center; }
.stat__n {
  font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: 10px;
}
.stat__l { font-size: .82rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) { .stats, .stats--3 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px 30px;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px -26px rgba(138,62,43,.5);
}
.card__num {
  font-family: var(--serif); font-size: .8rem; letter-spacing: .16em;
  color: var(--accent); margin-bottom: 16px; display: block;
}
.card h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 12px; line-height: 1.35; }
.card p { font-size: 1rem; color: var(--ink-2); line-height: 1.72; margin-bottom: 1em; }
.card__more {
  margin-top: auto; padding-top: 12px;
  font-size: .83rem; font-weight: 600; letter-spacing: .04em; color: var(--accent);
}
.card__more::after { content: " →"; transition: margin .22s ease; display: inline-block; }
a.card:hover .card__more::after { margin-left: 5px; }
@media (max-width: 940px) { .card-grid, .card-grid--2 { grid-template-columns: 1fr; } }

/* ---------- Feature list (publications etc.) ---------- */
.feat { border-top: 1px solid var(--line); }
.feat__item { display: grid; grid-template-columns: 3.4rem 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.feat--compact .feat__item { padding: 13px 0; gap: 18px; align-items: baseline; }
.feat--compact .feat__n { font-size: 1.15rem; }
.feat__n { font-family: var(--serif); font-size: 1.5rem; color: var(--accent-2); line-height: 1.2; }
.feat__b h3 { font-size: 1.05rem; margin-bottom: 10px; line-height: 1.45; }
.feat__b p { font-size: 1rem; color: var(--ink-2); margin-bottom: .7em; line-height: 1.72; }
.journal {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; letter-spacing: .03em;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(138,62,43,.3); padding-bottom: 1px;
}
.journal:hover { border-bottom-color: var(--accent); }
.journal__where { color: var(--muted); font-style: italic; }
@media (max-width: 620px) { .feat__item { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Prose ---------- */
.prose { max-width: var(--prose); }
.prose h2 { font-family: var(--serif); font-size: 1.55rem; margin: 2.8rem 0 1rem; line-height: 1.3; }
.prose h3 { font-size: 1.12rem; margin: 2.2rem 0 .7rem; padding-left: 13px; border-left: 2.5px solid var(--accent); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 20px; }
.prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55;
}
.prose a:not(.btn):not(.journal) { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(138,62,43,.32); }
.prose a:not(.btn):not(.journal):hover { border-bottom-color: var(--accent); }
.prose blockquote {
  margin: 2rem 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-style: italic; font-size: 1.08rem;
  color: var(--ink-2); line-height: 1.7;
}

/* ---------- Symptom panels ---------- */
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px 28px 22px;
}
.panel h3 {
  font-size: 1.04rem; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.panel h3 .ico { color: var(--accent); flex: none; }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li {
  position: relative; padding-left: 19px; margin-bottom: .5em;
  font-size: .98rem; color: var(--ink-2); line-height: 1.7;
}
.panel li::before {
  content: ""; position: absolute; left: 1px; top: .68em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .5;
}
@media (max-width: 820px) { .panel-grid { grid-template-columns: 1fr; } }

/* ---------- Region / topic blocks ---------- */
.region { border-top: 1px solid var(--line); padding: 34px 0; }
.region:last-child { border-bottom: 1px solid var(--line); }
.region__head { display: grid; grid-template-columns: 2.6rem 1fr; gap: 20px; align-items: start; }
.region__n { font-family: var(--serif); color: var(--accent-2); font-size: 1.25rem; line-height: 1.5; }
.region h3 { font-size: 1.16rem; margin-bottom: 10px; }
.region p { font-size: 1rem; color: var(--ink-2); line-height: 1.72; }
@media (max-width: 620px) { .region__head { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Process / numbered steps ----------
   Used for "what happens after you email" on the appointment page.
   Because this site publishes no prices, this sequence is doing the
   reassurance work a price range would normally do — keep it
   prominent and keep every step concrete. */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 18px 0 18px 60px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; line-height: 1.7;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: .95rem;
  color: var(--accent); background: var(--accent-wash);
  border: 1px solid rgba(138,62,43,.18);
}
.steps strong { display: block; margin-bottom: 2px; }
.steps .note {
  display: block; margin-top: 4px;
  font-size: .88rem; color: var(--muted-2); line-height: 1.65;
}

/* ---------- Journey / travel route ---------- */
.route { list-style: none; padding: 0; margin: 0; }
.route li {
  position: relative; padding: 0 0 26px 34px; margin: 0;
  font-size: 1rem; line-height: 1.75; color: var(--ink-2);
}
.route li::before {
  content: ""; position: absolute; left: 5px; top: .6em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
/* connecting line between stops, but not trailing off the last one */
.route li::after {
  content: ""; position: absolute; left: 9px; top: 1.5em; bottom: -.2em;
  width: 1px; background: var(--line);
}
.route li:last-child { padding-bottom: 0; }
.route li:last-child::after { display: none; }
.route .leg {
  display: block; font-size: .84rem; color: var(--muted);
  letter-spacing: .04em; margin-top: 2px;
}

/* ---------- Hours table ---------- */
.hours { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.hours th, .hours td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 600; color: var(--ink); width: 12rem; }
.hours td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .hours th, .hours td { display: block; border-bottom: 0; padding: 3px 0; }
  .hours tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hours th { width: auto; }
}

/* ---------- Data table ----------
   Used for the graded return-to-practice schedule. Rendered as a real
   table rather than a screenshot so it is readable by screen readers,
   selectable, and indexable. Wide tables scroll inside .table-scroll
   rather than forcing the page to scroll sideways. */
.table-scroll { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.data-table caption {
  caption-side: top; text-align: left; padding-bottom: 12px;
  font-size: .86rem; color: var(--muted); line-height: 1.6;
}
.data-table th, .data-table td {
  padding: 9px 12px; text-align: center;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
}
.data-table tbody th {
  text-align: left; white-space: nowrap;
  color: var(--ink); font-weight: 600;
  background: var(--paper-2);
}
.data-table td { color: var(--ink-2); background: var(--white); }
.data-table td:empty { background: var(--paper); }
.data-table .rest { color: var(--muted); }

/* ---------- Notice / warning ---------- */
.notice {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 22px 26px;
  margin: 28px 0;
}
.notice__ico { color: var(--accent); margin-top: .15em; }
.notice h3 { font-size: 1rem; margin-bottom: 8px; }
.notice p { font-size: .99rem; color: var(--ink-2); line-height: 1.7; margin-bottom: .6em; }
.notice p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .notice { grid-template-columns: 1fr; gap: 8px; } .notice__ico { display: none; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-size: 1.03rem; font-weight: 600; color: var(--ink);
  transition: color .2s ease; line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .28s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 26px; color: var(--ink-2); font-size: .99rem; line-height: 1.85; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- CV ---------- */
.cv { border-top: 1px solid var(--line); }
.cv__row { display: grid; grid-template-columns: 12rem 1fr; gap: 34px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.cv__k { font-family: var(--serif); font-size: 1.14rem; color: var(--ink); line-height: 1.35; }
.cv__v ul { list-style: none; padding: 0; margin: 0; }
.cv__v li { position: relative; padding-left: 18px; margin-bottom: .5em; font-size: 1rem; color: var(--ink-2); line-height: 1.7; }
.cv__v li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .5; }
@media (max-width: 820px) { .cv__row { grid-template-columns: 1fr; gap: 14px; } }

.cols-2 { columns: 2; column-gap: 40px; }
.cols-2 li { break-inside: avoid; }
@media (max-width: 700px) { .cols-2 { columns: 1; } }

/* ---------- Photography ---------- */
.fig { margin: 0; }
.fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r);
  background: var(--paper-3);
}
.fig figcaption {
  margin-top: 12px;
  font-size: .89rem; line-height: 1.7; color: var(--muted);
}
.fig figcaption b { color: var(--ink-2); font-weight: 600; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.photo-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .photo-grid, .photo-grid--2 { grid-template-columns: 1fr; gap: 28px; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--wide-img { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) { .split, .split--wide-img { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Article feed ---------- */
.article-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-feed--list { grid-template-columns: 1fr; gap: 0; }

.acard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 26px 22px;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.acard:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px -26px rgba(138,62,43,.45);
}
.acard__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 13px;
  font-size: .73rem; letter-spacing: .08em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.acard__tag {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; letter-spacing: .05em; color: var(--muted);
}
.acard h3 {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.45;
  margin-bottom: 10px; color: var(--ink);
}
.acard p { font-size: .95rem; color: var(--muted); line-height: 1.7; margin-bottom: 1em; }
.acard__more {
  margin-top: auto; padding-top: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--accent);
}
.acard__more::after { content: " →"; display: inline-block; transition: margin .22s ease; }
.acard:hover .acard__more::after { margin-left: 5px; }

.article-feed--list .acard {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 26px 0; background: transparent;
}
.article-feed--list .acard:hover { transform: none; box-shadow: none; border-bottom-color: var(--accent); }
.article-feed--list .acard h3 { font-size: 1.24rem; }

@media (max-width: 940px) { .article-feed, .article-feed--2 { grid-template-columns: 1fr; } }

/* ---------- Article body ---------- */
.article-head { padding: clamp(50px, 7vw, 82px) 0 clamp(26px, 3vw, 40px); }
.article-head h1 {
  font-family: var(--serif); font-size: clamp(1.95rem, 4.4vw, 2.8rem);
  line-height: 1.22; margin-bottom: 20px; text-wrap: balance;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: .82rem; letter-spacing: .04em; color: var(--muted);
  padding-top: 18px; border-top: 1px solid var(--line);
}
.article-body { font-size: 1.04rem; line-height: 1.85; }
.article-body > p:first-of-type { font-size: 1.12rem; color: var(--ink-2); line-height: 1.7; }
.article-foot {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted); line-height: 1.7;
}

/* ---------- Language strip ----------
   A plain, unmissable pointer to the Traditional Chinese site for
   patients who read Chinese. The nav carries a 中文 pill on every page;
   this is the explicit version, used on the two entry pages. */
.lang-strip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.lang-strip p {
  margin: 0;
  font-size: .92rem; line-height: 1.6; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.lang-strip a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(138,62,43,.35);
}
.lang-strip a:hover { border-bottom-color: var(--accent); }
.lang-strip .en { color: var(--muted); }

/* ---------- Callout ---------- */
.callout {
  background: var(--accent-wash);
  border: 1px solid rgba(138,62,43,.16);
  border-radius: var(--r);
  padding: 26px 30px;
}
.callout h3 { font-size: 1rem; margin-bottom: 10px; color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Page header ---------- */
.page-head { padding: clamp(50px, 7vw, 84px) 0 clamp(34px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.2; margin-bottom: 18px; text-wrap: balance; }
.page-head .sup { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; }
.page-head .lede { max-width: 48rem; }

/* ---------- Footer ---------- */
.site-foot { background: var(--deep); color: #E3D6C8; padding: 68px 0 34px; }
.site-foot a { color: #EFE3D5; text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.foot__brand .n { font-family: var(--serif); font-size: 1.3rem; color: #FFF; letter-spacing: .04em; font-style: italic; }
.foot__brand .tag { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #B09A83; margin-top: 8px; }
.foot__brand p { font-size: .89rem; color: #C3B3A2; margin-top: 18px; line-height: 1.72; max-width: 30rem; }
.foot h4 { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #BFAB95; margin-bottom: 16px; font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .6em; font-size: .97rem; }
.foot-bottom {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .8rem; color: #B3A18D;
}
.foot-legal { max-width: 46rem; font-size: .78rem; color: #9C8B78; line-height: 1.7; margin-top: 14px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Bigger tap targets on phones */
@media (max-width: 760px) {
  .foot li { margin-bottom: 0; }
  .foot li a { display: inline-block; padding: 10px 0; }
  .clinic-line a { display: inline-block; padding: 7px 0; }
  .foot-bottom { gap: 8px; }
  .btn { padding: 15px 26px; }
  .filter button { padding: 11px 18px; }
}
.mt-l { margin-top: 44px; } .mb-l { margin-bottom: 44px; }
.mb-m { margin-bottom: 28px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Very narrow phones (iPhone SE and similar, under ~380px) */
@media (max-width: 380px) {
  .wrap { padding: 0 20px; }
  .brand__tag { display: none; }
  .brand__name { font-size: 1.15rem; }
  .nav-toggle { padding: 10px 6px; margin-right: -6px; }
  .eyebrow { display: block; font-size: .66rem; letter-spacing: .13em; line-height: 1.7; }
  .eyebrow::before, .eyebrow::after { display: none; }
  .page-head .sup, .hero__title .sup { letter-spacing: .16em; }
  .hero__card { padding: 24px 20px 22px; }
  .section { padding: 62px 0; }
  .stats, .stats--3 { grid-template-columns: 1fr; }
  .stat { padding: 26px 18px; }
}

/* ---------- Print ---------- */
@media print {
  .site-head, .site-foot, .btn-row, .nav-toggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding: 18px 0; }
  .route li::after { background: #ccc; }
}