/* Typography V1 — one local font system for all public pages. */
:root {
  --font-reading: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-display: "Noto Serif TC", "Songti TC", serif;
  --type-body: 1.0625rem;
  --type-small: .875rem;
  --type-label: .75rem;
  --type-page: clamp(2.125rem, 3.8vw, 3rem);
  --type-section: clamp(1.625rem, 2.6vw, 2.125rem);
  --type-item: 1.5rem;
  --text-secondary: #526257;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-reading);
  font-size: var(--type-body);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.9;
  letter-spacing: .015em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
button, select, input, textarea { font-family: var(--font-reading); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.5;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--type-page); margin: 0 0 24px; }
h2 { font-size: var(--type-section); margin: 0 0 24px; }
h3 { font-size: var(--type-item); margin: 0 0 14px; }
p { margin: 0 0 20px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
.lead, .item p, .story-slot p, .check span, details p,
.service-row p, .tribute-content .tribute-note {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.9;
  color: var(--text-secondary);
}
.eyebrow, .guide-tag {
  display: block;
  font-family: var(--font-reading);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: #64705f;
  margin: 0 0 16px;
}
.number {
  font-family: var(--font-reading);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  letter-spacing: .08em;
}

/* Navigation and controls have one size and one reading face. */
header nav, header nav a {
  font-family: var(--font-reading);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .04em;
}
header nav a[aria-current="page"] { font-weight: 500; }
.mobile-menu > summary, .mobile-menu nav a {
  font-family: var(--font-reading);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}
.button, .mobile-dock a {
  font-family: var(--font-reading);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.button { min-height: 48px; padding: 12px 22px; }
.back { font-size: var(--type-small); line-height: 1.7; letter-spacing: .02em; }
.preview { font-size: var(--type-label); line-height: 1.6; letter-spacing: .03em; }

/* Homepage: deliberate phrase breaks and a smaller, consistent action row. */
.home-page .intro h1 {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .04em;
  margin: 0 0 24px;
  text-wrap: initial;
}
.intro .hero-message {
  font-family: var(--font-reading);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .02em;
  color: #405348;
  margin: 0;
  max-width: 31em;
  text-wrap: initial;
}
br.mobile-break { display: none; }
.intro .hero-message .mobile-break { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.intro .hero-actions .button { margin: 0; }
.home-services h2 { margin-top: 0; }
.service-index a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .04em;
}
.service-index a span:last-child {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
}
.caption, .mobile-hero-image figcaption {
  font-family: var(--font-reading);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .015em;
}

/* Inner pages share the same editorial hierarchy. */
.page-heading h1 { font-size: var(--type-page); letter-spacing: .045em; margin: 12px 0 16px; }
.page-heading .lead { font-size: var(--type-body); margin: 0; }
.page-heading .eyebrow { margin: 24px 0 0; }
.section h2, .guide-feature h2 { font-size: var(--type-section); letter-spacing: .035em; line-height: 1.55; }
.guide-feature h3 { font-size: var(--type-section); margin: 0 0 20px; line-height: 1.55; }
.item h3, .story-slot h3, .steps h3, .service-row h3 {
  font-size: var(--type-item);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .035em;
}
.item h3 { margin: 12px 0; }
.steps h3 { margin: 0 0 10px; }
.steps p { margin: 0; }
.service-row { align-items: start; }
.service-row .number { padding-top: 8px; }
.service-row h3 { margin: 0; }
.service-row p { margin: 0; }
.tribute-items { font-size: var(--type-body); line-height: 1.9; margin: 20px 0; }
.tribute-content .tribute-note { font-size: .9375rem; }
details:not(.mobile-menu) > summary {
  font-family: var(--font-reading);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .015em;
  padding: 12px 4px;
}
details:not(.mobile-menu) > p { margin: 8px 0 12px; padding: 0 4px; }
.article { max-width: 880px; }
.article h1 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); letter-spacing: .03em; line-height: 1.55; margin: 12px 0 24px; }
.article .eyebrow { font-size: var(--type-label); line-height: 1.6; letter-spacing: .14em; margin: 28px 0 0; }
.article h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.65; letter-spacing: .025em; margin: 40px 0 16px; }
.article p, .article li { font-size: var(--type-body); line-height: 2; letter-spacing: .015em; }
.article ul { padding-left: 1.4em; }
.article li { margin: 0 0 12px; padding-left: .2em; }
.article .note p { margin: 12px 0 0; }
.contact .section h2, .contact-page .contact h2 { font-size: var(--type-section); line-height: 1.55; letter-spacing: .035em; margin: 0 0 20px; }
.contact p, .contact-page .contact p { font-size: var(--type-body); line-height: 1.9; margin: 0 0 16px; }
.contact a.phone, .contact-page .contact a.phone {
  display: inline-block;
  font-family: var(--font-reading);
  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: .035em;
  margin: 0 0 16px;
}
footer { font-family: var(--font-reading); font-size: .8125rem; line-height: 1.8; letter-spacing: .02em; }

@media (max-width:700px) {
  :root { --type-page: 2.125rem; --type-section: 1.625rem; --type-item: 1.375rem; }
  h2 { margin-bottom: 20px; }
  .home-page .intro { padding: 26px 7% 28px; }
  .home-page .intro h1 { font-size: clamp(1.5rem, 7.1vw, 2rem); line-height: 1.6; letter-spacing: .025em; margin: 0 0 20px; }
  .intro .hero-message { font-size: 1rem; line-height: 1.95; letter-spacing: .02em; }
  br.mobile-break { display: block; }
  .intro .hero-message .mobile-break { display: block; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  .intro .hero-actions .button { font-size: .875rem; padding: 12px 16px; margin: 0; }
  .mobile-hero-image figcaption { text-align: left; padding: 9px 7%; }
  .page-heading h1 { margin: 8px 0 14px; }
  .page-heading .eyebrow { display: none; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section h2, .article h2 { overflow-wrap: break-word; }
  .service-index a { font-size: 1.3125rem; min-height: 66px; }
  .service-row { gap: 10px 14px; }
  .service-row .number { padding-top: 7px; }
  .service-row p { font-size: var(--type-body); }
  .tribute-content .tribute-note { font-size: 1rem; }
  .guide-feature { gap: 16px; }
  .article h1 br { display: none; }
  .article { padding-top: 32px; }
  .article h2 { margin-top: 32px; }
  .contact-page .contact .section { gap: 20px; }
  .steps li:before { font-size: .875rem; line-height: 1.65; letter-spacing: .05em; }
}

@media (max-width:360px) {
  :root { --type-body: 1rem; --type-section: 1.5rem; }
  .article h1 { font-size: 1.625rem; }
  .hero-actions { gap: 8px; }
  .intro .hero-actions .button { padding-left: 14px; padding-right: 14px; }
}