:root {
  color-scheme: light;
  --p-bg: #eeecea;
  --p-surface: #e4e1dd;
  --p-ink: #333231;
  --p-muted: #625f5b;
  --p-accent: #5c6b54;
  --p-accent-ink: #fff;
  --p-action: #5c6b54;
  --p-action-ink: #fff;
  --line: #bcb8b2;
  --paper: #f7f6f3;
  --font-display: Georgia, "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  --font-text: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --nav: 76px;
  --gut: clamp(24px, 5.55vw, 80px);
  --section-space: clamp(56px, 7.8vw, 112px);
  --r-sm: 8px;
  --r-lg: 20px;
  font-family: var(--font-text);
  line-height: 1.65;
  color: var(--p-ink);
  background: var(--p-bg);
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--nav); }
body { margin: 0; padding-top: var(--nav); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--p-action); outline-offset: 4px; }
main:focus { outline: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5.1vw, 5rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.55rem); }
h3 { font-size: clamp(1.125rem, 1.7vw, 1.45rem); line-height: 1.35; font-weight: 650; }
.lead { font-size: clamp(1.0625rem, 1.48vw, 1.32rem); line-height: 1.62; }
.meta, .identity, .language-note { font-size: .875rem; color: var(--p-muted); }
.wrap { width: min(100% - 2 * var(--gut), 1280px); margin-inline: auto; }
.m-arrow { flex: none; width: 20px; height: 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 18px;
  font-size: .9375rem;
  line-height: 1.35;
  font-weight: 550;
  text-decoration: none;
}
.btn--primary { background: var(--p-action); color: var(--p-action-ink); }
.btn--secondary { background: transparent; color: var(--p-ink); border-color: var(--line); }
.link, .nav__link { text-decoration-color: transparent; }
.link { text-decoration-color: var(--line); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: var(--nav);
  background: var(--p-bg);
  border-bottom: 1px solid var(--line);
}
.nav__bar { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 20px; }
.skip-link { position: absolute; inset: 8px auto auto var(--gut); padding: 8px 16px; background: var(--paper); }
.skip-link:not(:focus) { clip-path: inset(50%); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--p-accent);
  border-radius: 6px;
  color: var(--p-accent);
  font: 1.3rem "Songti SC", "Noto Serif CJK SC", SimSun, serif;
}
.primary-nav, .header-actions { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 24px); }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; white-space: nowrap; }
.nav__link[aria-current="page"] { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.site-menu { display: none; }
.site-menu summary { cursor: pointer; list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.menu-icon { display: block; width: 14px; height: 9px; border-block: 1px solid currentColor; }
.mobile-nav {
  position: fixed;
  inset: var(--nav) 0 0;
  background: var(--p-bg);
  overflow: auto;
  padding-block: 24px;
}
.mobile-nav-inner { display: grid; gap: 8px; }
.mobile-nav .nav__link { min-height: 56px; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
.mobile-nav .btn { justify-self: start; margin-top: 16px; }

.hero { padding-block: clamp(40px, 5.4vw, 76px) clamp(48px, 6vw, 88px); }
.hero--split { padding-top: 44px; }
.hero-grid, .detail-with-portrait, .detail-with-stage-links, .contact-grid, .reading-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.hero-copy, .detail-copy { display: grid; justify-items: start; gap: 20px; }
.hero-copy .identity, .detail-copy .identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-copy .identity::before, .detail-copy .identity::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--p-accent);
  transform: translateY(-2px);
}
.hero-copy h1 { max-width: 13ch; }
:lang(zh-Hans) .hero-copy h1 { max-width: 7em; }
.hero-copy .lead { max-width: 40ch; }
.hero-copy .language-note, .detail-copy .language-note { margin-top: -8px; }
.hero-paths {
  display: grid;
  width: min(100%, 28rem);
  margin-top: 8px;
}
.service-path {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 550;
  text-decoration: none;
}
.service-path:first-child { border-top: 1px solid var(--line); }
.service-path .m-arrow, .service-row .m-arrow { color: var(--p-accent); }
.portrait-frame, .detail-portrait { overflow: hidden; border-radius: var(--r-lg); background: var(--p-surface); }
.portrait-frame { height: clamp(440px, 72svh, 680px); }
.portrait-frame picture, .detail-portrait picture { display: block; width: 100%; height: 100%; }
.portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 7%; }
.detail-portrait { height: clamp(320px, 48svh, 520px); }
.detail-hero:not(:has(.detail-with-portrait)) .detail-copy { max-width: 53rem; }
.detail-copy .lead, .detail-copy > p:not(.identity, .language-note) { max-width: 58ch; }
.detail-copy .reading-copy { max-width: 65ch; }
.detail-hero h1 { max-width: 22ch; }
.stage-index { align-self: center; width: min(100%, 28rem); }
.stage-index > p { margin-bottom: 8px; font-weight: 650; }

.services-section, .reading-section, .contact-section { padding-block: var(--section-space); }
.services-section, .service-stages { background: var(--paper); }
.section-head p { margin-top: 16px; max-width: 40ch; }
.service-list, .stage-list { padding: 0; list-style: none; }
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.service-list li:first-child .service-row { border-top: 1px solid var(--line); }
.service-row h3 { margin-bottom: 7px; }
.service-row--secondary h3 { font-weight: 500; }
.reading-copy > * + * { margin-top: 20px; }
.home-about .reading-copy { max-width: 58ch; }
.stage-item { padding-block: 24px; border-bottom: 1px solid var(--line); }
.stage-item[id] { scroll-margin-top: 12px; }
.stage-item:first-child { border-top: 1px solid var(--line); }
.stage-copy { margin-top: 12px; }
.outcome { padding: 12px 16px; margin-top: 16px; background: var(--p-bg); border-radius: var(--r-sm); }
.outcome strong { display: block; margin-bottom: 4px; }
.faq-list > div + div { margin-top: 24px; }
.faq-list dt { font-size: 1.125rem; font-weight: 650; margin-bottom: 6px; }

.contact-section { background: var(--p-surface); }
.contact-grid { align-items: center; }
.contact-copy .language-note { margin-top: 10px; }
.contact-channel, .contact-prep { margin-top: 24px; }
.contact-channel h3, .contact-prep h3 { margin-bottom: 8px; }
.contact-prep ul { padding-inline-start: 1.25rem; }
.contact-channel .actions { margin-top: 12px; }
.phone { display: inline-block; min-height: 44px; font-size: clamp(1.35rem, 2.8vw, 2.3rem); font-weight: 550; font-variant-numeric: tabular-nums; }
.qr-frame { width: min(100%, 18rem); }
.qr-frame p { margin-bottom: 12px; }
.qr { width: 100%; border-radius: var(--r-sm); }
#copy-status:not(:empty) { margin-top: 8px; font-size: .875rem; }
.footer-inner, .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.footer-inner { min-height: 118px; justify-content: space-between; padding-block: 24px; }
.footer-inner .meta { margin-top: 8px; }

@media (max-width: 1023px) {
  :root { --nav: 66px; }
  .primary-nav { display: none; }
  .site-menu { display: block; }
  body:has(.site-menu[open]) { overflow: hidden; }
}

@media (max-width: 899px) {
  .hero-grid, .detail-with-portrait, .detail-with-stage-links { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy h1, :lang(zh-Hans) .hero-copy h1 { max-width: 20ch; }
  .portrait-frame { height: clamp(280px, 34svh, 400px); }
  .detail-portrait { height: clamp(260px, 36svh, 380px); }
}

@media (max-width: 639px) {
  :root { --nav: 62px; }
  .nav__bar { gap: 12px; }
  .header-actions { gap: 10px; }
  .header-actions > .btn--primary { display: none; }
  .site-menu summary { padding-inline: 10px; }
  .brand-mark { width: 30px; height: 30px; font-size: 1.1rem; }
  .brand { gap: 7px; font-size: .9375rem; }
  .language-switch { font-size: .875rem; }
  .mobile-nav .btn { width: 100%; }
  .hero { padding-block: 28px 24px; }
  .hero-grid, .detail-with-portrait, .detail-with-stage-links, .reading-grid, .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-grid { gap: 18px; }
  .hero-copy, .detail-copy { gap: 14px; }
  html[lang="en"] .hero-copy { gap: 12px; }
  h1 { font-size: clamp(2.05rem, 10vw, 3.1rem); }
  .hero-copy .lead, .detail-copy .lead { font-size: 1.0625rem; }
  .hero-copy .language-note, .detail-copy .language-note { margin-top: 0; }
  .hero-copy .actions, .detail-copy .actions { width: 100%; }
  .hero-copy .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .hero-copy .actions .btn { min-width: 0; padding-inline: 12px; }
  .detail-copy .actions .btn { flex: 1 1 auto; }
  .hero-paths { margin-top: 4px; }
  .portrait-frame, .detail-portrait { height: clamp(218px, 31svh, 260px); }
  .portrait-frame .portrait, .detail-portrait .portrait { object-position: center 4%; }
  .qr-frame { justify-self: start; }
}