/* =========================================================
   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;
  }
}
/* Reading columns share the page's left edge rather than centring
   themselves — a centred column put body text 160px right of the page
   heading above it, which read as a mistake.
   The wrapper keeps the normal 1120px page grid so its left edge stays
   on 108px with everything else; only its CONTENT is narrowed to a
   readable measure. Narrowing the wrapper itself would pin it to the
   viewport edge instead of the grid. Blocks that are genuinely centred
   (the closing calls to action) carry .center and re-centre. */
.wrap-narrow > * { max-width: 800px; }
.wrap-narrow.center > * { margin-left: auto; margin-right: auto; }
.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; }

/* Available to screen readers and to search engines, not shown on screen.
   Used for the home page <h1>, where the title is carried visually by the
   brand card image — the same words appear in that image's alt text. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 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; }

/* Home page: the brand card sits above the fold and does the work the
   headline used to. Tighter top padding so it is not pushed down. */
.hero--card { padding-top: clamp(30px, 4vw, 52px); }
.hero__brand { margin: 0 0 clamp(34px, 4.5vw, 56px); }
.hero__brand img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(26,24,21,.05), 0 22px 60px -34px rgba(26,24,21,.45);
}

/* When the quote leads the page it needs more presence than the small
   pull-quote treatment used elsewhere. */
.hero__quote--lead {
  font-size: clamp(1.1rem, 2.1vw, 1.34rem);
  line-height: 1.6;
  border-left-width: 3px;
  padding-left: 26px;
  margin-bottom: 26px;
}
.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 h2, .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 h2, .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;
}
/* Stacked variant, for when the panels sit in a narrow column beside an image */
.panel-grid--stack { grid-template-columns: 1fr; }
@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; }
/* A notice can carry instructions rather than prose — the filming steps on
   the appointment page. Same accent bullet used in the symptom panels. */
.notice ul { list-style: none; padding: 0; margin: 0; }
.notice li {
  position: relative; padding-left: 19px; margin-bottom: .5em;
  font-size: .99rem; color: var(--ink-2); line-height: 1.7;
}
.notice li:last-child { margin-bottom: 0; }
.notice li::before {
  content: ""; position: absolute; left: 1px; top: .68em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .55;
}
@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);
}
/* Figures deliberately fill their column even though the supplied slides
   are only 900px wide (638px for the one whose black bars were cropped).
   Capping them at natural size was tried and rejected: it left figures
   short of the grid edge at ragged, inconsistent widths, which looked
   like a mistake. The upscale is 1.18–1.25x on photographs — invisible,
   and worth it for a straight right-hand edge. */
.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; }
/* Top-align a split when the shorter column should start level with the
   heading opposite it, rather than floating in the vertical middle. */
.split--top { align-items: start; }

/* Embedded map. Fixed ratio so the column height is predictable, and lazy
   so it costs nothing until scrolled to — the iframe is the heaviest thing
   on the page by some margin. */
.map-embed { margin: 24px 0 0; }
.map-embed a { display: block; }
.map-embed img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper-2);
}
.map-embed a:hover img { border-color: var(--accent); }
.map-embed__attr { display: block; margin-top: 4px; font-size: .76rem; color: var(--muted-2); }
.map-embed figcaption {
  margin-top: 11px; font-size: .87rem; line-height: 1.6; color: var(--muted);
}
.map-embed figcaption a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(138,62,43,.32);
}
.map-embed figcaption a:hover { border-bottom-color: var(--accent); }
/* A supporting image beside a block of content — the Taiwan map next to the
   two travel routes. Centred against the routes: the stacked route panels are
   taller than the map, and top-aligning left a block of dead space under it. */
.split--aside { grid-template-columns: .82fr 1.18fr; align-items: center; }

/* The hospital photograph sits directly under the page heading, so it needs
   breathing room above and below rather than butting against the rule. */
.visit__hero { margin: clamp(34px, 4.5vw, 56px) 0 clamp(10px, 2vw, 20px); }
/* The map is portrait. Once the split stacks, letting it run to full width
   makes it taller than the phone screen and it swamps the routes it is
   meant to support — so cap and centre it. */
@media (max-width: 900px) {
  .split--aside > .fig { max-width: 340px; margin-inline: auto; }
}
@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 h2, .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 h2, .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;
}

/* ---------- 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; }
/* When a page's eyebrow, headline and lede have all been removed by choice,
   the page-head would otherwise render as an empty banded strip. */
.page-head--bare { padding: 0; border-bottom: 0; }

/* ---------- 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.35fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.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; }
}

/* ---------- Site search ----------
   The box sits on the brand row, right-aligned, level with "A Tempo".
   Ported from the Chinese site so the two behave identically. The results
   panel is absolutely positioned under the box on desktop, and pinned to
   the viewport on narrow screens where the box itself is too far right to
   anchor a wide panel. */
[data-search] { position: relative; margin-left: auto; }
[data-search] input {
  /* Sized to match .nav__cta exactly: same font-size and line-height, and
     padding that accounts for this element's 1px border, which the button
     does not have. Without pinning line-height the input inherits the body's
     1.8 and stands 4px taller than the button beside it. */
  width: 155px; padding: 8px 16px; text-align: center;
  font: inherit; font-size: .85rem; line-height: 1.4; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  outline: none; transition: width .22s ease, border-color .22s ease;
  -webkit-appearance: none; appearance: none;
}
/* Centre the placeholder explicitly. `text-align` on the input centres the
   typed value everywhere, but some browsers do not pass it down to the
   placeholder pseudo-element, which is all that is visible until someone
   types — so it has to be stated on both. */
[data-search] input::placeholder { color: var(--muted); text-align: center; }
[data-search] input::-webkit-input-placeholder { color: var(--muted); text-align: center; }
[data-search] input:focus { width: 240px; border-color: var(--accent); }

.search-results {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
  width: min(440px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 14px 40px rgba(34,24,16,.13);
  max-height: min(66vh, 460px); overflow-y: auto; padding: 6px;
  text-align: left;
}
.search-hit {
  display: block; padding: 11px 13px; border-radius: 8px;
  text-decoration: none; color: var(--ink-2);
  white-space: normal; font-size: 1rem; line-height: 1.55;
}
.search-hit:hover, .search-hit:focus { background: var(--accent-wash); outline: none; }
.search-hit__p { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.search-hit__h { display: block; font-weight: 600; color: var(--ink); font-size: .95rem; margin-bottom: 3px; }
.search-hit__s { display: block; font-size: .86rem; line-height: 1.65; color: var(--muted); }
.search-hit mark { background: rgba(138,62,43,.16); color: var(--accent); padding: 0 1px; border-radius: 2px; }
.search-msg { padding: 14px 13px; font-size: .88rem; color: var(--muted); }

@media (max-width: 1024px) {
  /* Phone/tablet: the box stays on the brand row, between the brand and the
     hamburger, and only widens once tapped so it does not crowd the header. */
  [data-search] { flex: 0 1 auto; min-width: 0; margin: 0 10px 0 auto; }
  [data-search] input { width: 132px; max-width: 132px; font-size: .8rem; padding: 6px 11px; }
  [data-search] input:focus { width: 190px; max-width: 190px; }
  /* Anchor the panel to the screen, or it gets pushed off the left edge. */
  .search-results {
    position: fixed; top: var(--nav-h); left: 14px; right: 14px; width: auto;
    max-height: calc(100vh - var(--nav-h) - 24px);
  }
}
@media (max-width: 430px) {
  /* Smallest screens: the brand's descriptor gives way to the search box. */
  .brand__tag { display: none; }
  [data-search] { margin-left: auto; margin-right: 6px; }
  [data-search] input { width: 104px; max-width: 104px; font-size: .78rem; padding: 6px 10px; }
  [data-search] input:focus { width: 168px; max-width: 168px; }
}