/* =========================================================================
   Wah On Funeral Home — site stylesheet
   Palette and type are defined once as custom properties. Cultural note for
   anyone editing: white, ivory, gold/brass and jade are appropriate for a
   Chinese funeral home; red is a celebration colour and must never be used
   as an accent here.
   ========================================================================= */

/* ---- Self-hosted Latin webfonts (SIL OFL) ------------------------------ */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/source-sans-3-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink: #1e2328;
  --ink-2: #39424b;
  --muted: #646d79;
  --paper: #f7f3ec;
  --paper-2: #efe8db;
  --card: #fffdf9;
  --brass: #96783a;
  --brass-2: #b8975a;
  --brass-soft: #e6d5b0;
  --brass-tint: #f3ebdb;
  --jade: #4f7c6a;
  --line: #e3dacb;
  --line-2: #cfc3ad;
  --focus: #2f6fdd;

  --serif: 'Cormorant Garamond', 'Noto Serif TC', 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU', Georgia, serif;
  --sans: 'Source Sans 3', 'Noto Sans TC', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1140px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --radius: 6px;
  --header-h: 76px;
}
html.lang-zh-hans {
  --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'SimSun', Georgia, serif;
  --sans: 'Source Sans 3', 'Noto Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang^="zh"] body { line-height: 1.85; letter-spacing: 0.01em; }
img, svg, iframe { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration-color: var(--brass-2); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}
html[lang^="zh"] :is(h1, h2, h3, h4) { line-height: 1.3; letter-spacing: 0.04em; font-weight: 600; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.lead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); color: var(--ink-2); max-width: 62ch; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}
html[lang^="zh"] .eyebrow { letter-spacing: 0.2em; font-size: 0.85rem; }
.zh { font-family: var(--serif); }
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.section-tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.bg-paper-2 { background: var(--paper-2); }
.bg-card { background: var(--card); }
.bg-ink { background: var(--ink); color: var(--paper); }
.bg-ink :is(h1, h2, h3) { color: var(--paper); }
.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head h2 { margin-bottom: 0.4em; }
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 0.95em 1.5em; border-radius: var(--radius);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-brass { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn-brass:hover { background: #7f652f; border-color: #7f652f; }
.btn-ghost-light { background: transparent; color: var(--paper); border-color: rgba(247,243,236,0.5); }
.btn-ghost-light:hover { border-color: var(--paper); }
.btn-lg { font-size: 1.1rem; padding: 1.05em 1.7em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }
.text-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--brass-2); padding-bottom: 1px; }
.text-link:hover { border-color: var(--ink); }
.text-link::after { content: ' →'; font-weight: 400; }

/* ---- Skip link --------------------------------------------------------- */
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; border-radius: var(--radius); z-index: 100; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 243, 236, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--ink); margin-right: auto; flex: none; }
.brand-text { white-space: nowrap; }
.brand-mark { width: 44px; height: 44px; color: var(--brass); flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-logo { height: 46px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-zh { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.12em; }
.brand-en { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--ink-2); }
html.lang-en .brand-en { order: -1; font-size: 1.25rem; color: var(--ink); letter-spacing: 0.03em; }
html.lang-en .brand-zh { font-size: 1rem; color: var(--ink-2); letter-spacing: 0.18em; margin-top: 2px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--ink-2); padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass-2); }
.lang-switch { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; background: var(--card); }
.lang-switch a { text-decoration: none; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px; color: var(--ink-2); font-family: var(--sans); line-height: 1; }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.lang-switch a:hover:not([aria-current="true"]) { color: var(--ink); }
.header-phone { white-space: nowrap; }
.header-phone .phone-num { font-variant-numeric: tabular-nums; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line-2); border-radius: var(--radius); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 1080px) {
  .site-nav ul { gap: 1.1rem; }
  .site-nav a { font-size: 0.95rem; }
  .header-phone { padding-left: 1em; padding-right: 1em; }
}
@media (max-width: 900px) {
  .header-inner { gap: 0.6rem; min-height: 64px; }
  .brand { gap: 0.6rem; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-logo { height: 38px; }
  .brand-zh { font-size: 1.1rem; letter-spacing: 0.1em; }
  .brand-en { font-size: 0.82rem; }
  html.lang-en .brand-en { font-size: 1rem; }
  html.lang-en .brand-zh { font-size: 0.78rem; letter-spacing: 0.16em; }
  .nav-toggle { display: inline-flex; flex: none; }
  .header-phone .phone-label, .header-phone .phone-num { display: none; }
  .header-phone { padding: 0.7em; flex: none; }
  .header-phone svg { width: 1.25em; height: 1.25em; }
  .lang-switch { flex: none; }
  .hero-media .photo { aspect-ratio: 3 / 2; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(30, 35, 40, 0.35);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) 1rem; }
  .site-nav a { display: block; padding: 0.9rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--brass); }
}
@media (max-width: 600px) {
  .header-phone { display: none; }
  .lang-switch a { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
  .nav-toggle { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  html.lang-en .brand-zh { display: none; }
  .brand-en { display: none; }
  html.lang-en .brand-en { display: inline; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5.5rem); }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero .lead { margin-bottom: 1.8rem; }
.hero .motif { position: absolute; right: -6%; top: -18%; width: clamp(320px, 42vw, 640px); color: var(--brass); opacity: 0.12; pointer-events: none; }
.hero .motif svg { width: 100%; height: auto; display: block; }
.hero-copy { position: relative; }
.hero-note { margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.hero-note svg { width: 1em; height: 1em; color: var(--brass); }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 520px; }
  .hero .motif { width: 380px; right: -30%; top: auto; bottom: -20%; }
}

/* ---- Photo placeholders ------------------------------------------------ */
.photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Both portrait photos are shown landscape in places: keep the sign / the hearse and staff in frame. */
.hero-media .photo img { object-position: 50% 72%; }
.split .photo-4x3 img { object-position: 50% 85%; }
.photo-4x5 { aspect-ratio: 4 / 5; }
.photo-4x3 { aspect-ratio: 4 / 3; }
.photo-3x2 { aspect-ratio: 3 / 2; }
.photo-1x1 { aspect-ratio: 1 / 1; }
.photo-ph {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem;
  background: linear-gradient(160deg, #eee6d6 0%, #dfd3bb 55%, #d1c3a6 100%);
}
.photo-ph::before { content: ''; position: absolute; inset: 0; background: url('../img/mum.svg') no-repeat center / 70%; opacity: 0.16; color: var(--brass); }
.photo-ph span { position: relative; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); background: rgba(255, 253, 249, 0.85); padding: 0.35rem 0.6rem; border-radius: 4px; }

/* ---- Immediate-need band ---------------------------------------------- */
.urgent { background: var(--ink); color: var(--paper); }
.urgent-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
.urgent h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--paper); margin-bottom: 0.5rem; }
.urgent p { color: rgba(247, 243, 236, 0.85); max-width: 56ch; }
.urgent-phone { text-align: right; }
.urgent-phone a { display: inline-block; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); color: #e2c88f; letter-spacing: 0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.urgent-phone a:hover { color: #f1dfb6; }
.urgent-phone small { display: block; margin-top: 0.4rem; color: rgba(247, 243, 236, 0.7); font-size: 0.95rem; }
@media (max-width: 800px) { .urgent-inner { grid-template-columns: 1fr; } .urgent-phone { text-align: left; } }

/* ---- Pillars ----------------------------------------------------------- */
.pillar { border-top: 2px solid var(--brass-soft); padding-top: 1.4rem; }
.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { color: var(--ink-2); }

/* ---- Cards ------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--ink-2); }
.card .text-link { margin-top: auto; padding-top: 1rem; align-self: flex-start; }
.card-tint { background: var(--brass-tint); border-color: var(--brass-soft); }
.card-icon { width: 40px; height: 40px; color: var(--brass); margin-bottom: 1rem; }
.card-icon svg { width: 100%; height: 100%; }

/* ---- Steps ------------------------------------------------------------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 3rem; line-height: 1; color: var(--brass-2); display: block; margin-bottom: 0.6rem; }
.step::after { content: ''; position: absolute; top: 0; left: 0; width: 2.5rem; height: 1px; background: var(--brass-2); }
.step h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.step p { color: var(--ink-2); }

/* ---- Split (image + text) --------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

/* ---- Contact block ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.1rem; }
.contact-list li { display: grid; grid-template-columns: 28px 1fr; gap: 0.9rem; align-items: start; }
.contact-list svg { width: 22px; height: 22px; color: var(--brass); margin-top: 3px; }
.contact-list .label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.1rem; }
html[lang^="zh"] .contact-list .label { letter-spacing: 0.2em; }
.contact-list .value { font-size: 1.1rem; }
.contact-list .value a { text-decoration: none; font-weight: 600; }
.contact-list .value a:hover { text-decoration: underline; }
.contact-list .note { display: block; color: var(--muted); font-size: 0.92rem; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-link { display: inline-block; margin-top: 0.6rem; font-size: 0.92rem; }

/* ---- Page head (inner pages) ------------------------------------------ */
.page-head { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); background: var(--paper); }
.page-head .motif { position: absolute; right: -4%; top: -40%; width: clamp(280px, 30vw, 460px); color: var(--brass); opacity: 0.10; pointer-events: none; }
.page-head .motif svg { width: 100%; height: auto; display: block; }
.page-head h1 { margin-bottom: 0.8rem; max-width: 20ch; }
.page-head .container { position: relative; }

/* ---- Article / long-form ------------------------------------------- */
.article { max-width: 72ch; }
.article h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 2.4rem; }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--ink-2); }
.article .lead { color: var(--ink-2); }

/* ---- Services layout ------------------------------------------------- */
.services-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.toc-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; }
html[lang^="zh"] .toc-title { letter-spacing: 0.2em; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.toc a { display: block; padding: 0.45rem 0 0.45rem 1rem; text-decoration: none; color: var(--ink-2); font-size: 0.95rem; margin-left: -1px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--brass-2); }
.service { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.service:first-child { padding-top: 0; }
.service:last-child { border-bottom: 0; }
.service h2 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem); margin-bottom: 0.6rem; }
.service p { color: var(--ink-2); max-width: 68ch; }
.checklist { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.55rem; }
.checklist li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.checklist li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-2); }
html[lang^="zh"] .checklist li::before { top: 0.85em; }
.todo { color: var(--brass); font-weight: 600; }
@media (max-width: 860px) { .services-layout { grid-template-columns: 1fr; } .toc { position: static; } .toc ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; border-left: 0; } .toc a { padding: 0.3rem 0; border-left: 0; border-bottom: 1.5px solid var(--line-2); } }

/* ---- Team / gallery ------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.member { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; align-items: start; }
.member .avatar { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(160deg, #eee6d6, #d1c3a6); border: 1px solid var(--line); object-fit: cover; }
.member h3 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.member .role { color: var(--brass); font-weight: 600; font-size: 0.92rem; margin-bottom: 0.2rem; }
.member .langs { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.6rem; }
.member p { color: var(--ink-2); font-size: 0.98rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* ---- Forms ---------------------------------------------------------- */
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 0.75rem 0.9rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(150, 120, 58, 0.18); }
.form-note { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; }
.form-urgent { background: var(--brass-tint); border: 1px solid var(--brass-soft); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 1.4rem; font-size: 0.98rem; color: var(--ink-2); }
.form-urgent a { font-weight: 600; }
.form-success { display: none; background: #e9f1ec; border: 1px solid #c6dccf; color: #234a3a; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.form-success.is-visible { display: block; }
.form-error { display: none; background: var(--brass-tint); border: 1px solid var(--brass-soft); color: var(--ink-2); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.form-error.is-visible { display: block; }
.form-error a { font-weight: 600; white-space: nowrap; }
button[disabled] { opacity: 0.6; cursor: progress; }
.honey { position: absolute; left: -10000px; }

/* ---- Closing CTA ----------------------------------------------------- */
.closing { text-align: center; }
.closing h2 { margin-bottom: 0.6rem; }
.closing p { max-width: 58ch; margin-inline: auto; color: var(--ink-2); }
.closing .btn-row { justify-content: center; margin-top: 1.6rem; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(247, 243, 236, 0.8); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(247, 243, 236, 0.14); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand-text { color: var(--paper); margin-bottom: 0.9rem; }
.site-footer .footer-brand .brand-zh, .site-footer .footer-brand .brand-en, html.lang-en .site-footer .footer-brand .brand-zh, html.lang-en .site-footer .footer-brand .brand-en { color: var(--paper); }
.footer-brand p { max-width: 42ch; }
.footer-brand .footer-tagline { font-family: var(--serif); font-size: 1.2rem; color: #e2c88f; }
.footer h3 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 243, 236, 0.6); margin-bottom: 1rem; }
html[lang^="zh"] .footer h3 { letter-spacing: 0.2em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: #e2c88f; }
.footer-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 0.7rem; align-items: start; }
.footer-contact svg { width: 18px; height: 18px; color: #e2c88f; margin-top: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1.25rem; font-size: 0.88rem; color: rgba(247, 243, 236, 0.6); }
.footer-langs { display: flex; gap: 1rem; }
.footer-langs a { color: rgba(247, 243, 236, 0.8); }

/* ---- Mobile action bar ----------------------------------------------- */
.action-bar { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: 68px; }
  .action-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--line-2); border-top: 1px solid var(--line-2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .action-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 0.5rem; text-decoration: none; font-weight: 600; font-size: 1rem; }
  .action-bar a svg { width: 20px; height: 20px; }
  .action-bar .ab-call { background: var(--ink); color: var(--paper); }
  .action-bar .ab-dir { background: var(--card); color: var(--ink); }
}

/* ---- 404 ------------------------------------------------------------- */
.notfound { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.notfound p { max-width: 50ch; margin-inline: auto; color: var(--ink-2); }

/* ---- Print ----------------------------------------------------------- */
@media print {
  .site-header, .action-bar, .nav-toggle, .lang-switch, .map, .form { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  a { text-decoration: none; color: #000; }
}

/* =========================================================================
   Additions (October 2026): obituaries, guide and service pages, wider footer.
   Appended to the stylesheet above at build time. Same palette, same rules:
   no red anywhere.
   ========================================================================= */

/* ---- Header with six menu items ---------------------------------------- */
.site-nav a { white-space: nowrap; }
@media (min-width: 901px) { .site-nav ul { gap: 1.25rem; } .site-nav a { font-size: 0.97rem; } .header-inner { gap: 1.1rem; } }
@media (min-width: 901px) and (max-width: 1120px) { .site-nav ul { gap: 0.85rem; } .site-nav a { font-size: 0.9rem; } .header-phone .phone-num { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) {
  .header-inner { gap: 0.7rem; }
  .site-nav ul { gap: 0.6rem; }
  .site-nav a { font-size: 0.86rem; }
  .header-phone .phone-label { display: none; }
  .header-phone { padding: 0.7em; }
  .brand { gap: 0.6rem; }
  .brand-logo { height: 40px; }
  html.lang-en .brand-en { font-size: 1.1rem; }
  html.lang-en .brand-zh { font-size: 0.9rem; }
}

/* Small phones (360px and narrower): the menu button used to be pushed off the edge of the screen. */
@media (max-width: 400px) {
  .header-inner { gap: 0.4rem; }
  .brand { gap: 0.45rem; }
  .brand-logo { height: 32px; }
  html.lang-en .brand-en { font-size: 0.92rem; letter-spacing: 0.01em; }
  .lang-switch a { padding: 0.32rem 0.42rem; font-size: 0.76rem; }
}
@media (max-width: 340px) {
  .brand-logo { height: 28px; }
  html.lang-en .brand-en { font-size: 0.8rem; letter-spacing: 0; }
  .brand-zh { font-size: 1rem; }
}

/* ---- Footer with service and guide links ------------------------------- */
.footer-grid-5 { grid-template-columns: 1.35fr 1.05fr 0.7fr 1.1fr 1.25fr; gap: 1.75rem; }
.footer-grid-5 ul { font-size: 0.95rem; }
@media (max-width: 1080px) { .footer-grid-5 { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (max-width: 860px) { .footer-grid-5 { grid-template-columns: 1fr 1fr; } .footer-grid-5 .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid-5 { grid-template-columns: 1fr; } }

/* ---- Chinese terms inside English text ----------------------------------
   On the English pages a Chinese term such as 頭七 is kept on one line instead of being split
   between two lines. Whole passages of Chinese (marked lang="zh…") wrap normally. */
html.lang-en main { word-break: keep-all; overflow-wrap: anywhere; }
html.lang-en main [lang|="zh"] { word-break: normal; }

/* ---- Breadcrumb -------------------------------------------------------- */
.breadcrumb { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.9rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb span { margin: 0 0.4rem; }
.breadcrumb b { font-weight: 600; color: var(--ink-2); }

/* ---- Articles (guides, service pages) ---------------------------------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.article-layout aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.article-layout aside .toc { position: static; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-layout aside { position: static; order: -1; } .article-layout aside .card { display: none; } }
.article ul, .article ol { color: var(--ink-2); padding-left: 1.3rem; margin: 0.6rem 0 1rem; }
.article li { margin: 0.35rem 0; }
.article h3 { font-size: 1.25rem; margin-top: 1.6rem; }
.article table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 0.98rem; }
.article th, .article td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.article th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line-2); }
.article .table-wrap { overflow-x: auto; }
.article-layout > * { min-width: 0; }
@media (max-width: 900px) { .article-layout { grid-template-columns: minmax(0, 1fr); } }
/* The glossary reads as a list of entries on phones instead of a wide table. */
@media (max-width: 640px) {
  .article table.gloss thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .article table.gloss, .article table.gloss tbody, .article table.gloss tr, .article table.gloss td { display: block; }
  .article table.gloss tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .article table.gloss td { border: 0; padding: 0.05rem 0; }
  .article table.gloss .g-zh { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
  .article table.gloss .g-py { color: var(--muted); font-style: italic; }
  .article table.gloss .g-en { font-weight: 600; color: var(--ink); }
}
.article .note { background: var(--brass-tint); border: 1px solid var(--brass-soft); border-radius: var(--radius); padding: 0.9rem 1.1rem; font-size: 0.98rem; }
.reviewed { color: var(--muted); font-size: 0.9rem; margin-top: 2rem; }
.page-head.article-head h1 { max-width: 26ch; font-size: clamp(2rem, 1.35rem + 2.5vw, 3.2rem); }

/* ---- FAQ --------------------------------------------------------------- */
.faq { max-width: 72ch; }
.faq details { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brass); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--ink-2); margin: 0.6rem 0 0; }

/* ---- Link lists and cards for guides / services ------------------------ */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.article-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.article-card h3 { font-size: 1.25rem; margin: 0; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { text-decoration: underline; }
.article-card p { color: var(--ink-2); font-size: 0.98rem; margin: 0; flex: 1; }
.article-card .text-link { align-self: flex-start; }
.more-link { margin-top: 0.9rem; }
.group-h { margin: 2.2rem 0 1rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
.section-head + .group-h { margin-top: 0; }
.link-list { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.55rem 2rem; }
.link-list a { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--brass-2); }
.link-list a:hover { border-color: var(--ink); }

/* ---- Obituaries -------------------------------------------------------- */
.obit-tools { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: end; margin-bottom: 1.5rem; }
.obit-tools label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.4rem; }
.obit-tools input { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 0.65rem 0.9rem; width: min(100%, 22rem); }
.obit-tools input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(150, 120, 58, 0.18); }
.obit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.obit-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 104px 1fr; gap: 1.1rem; padding: 1.1rem; align-items: start; text-decoration: none; color: inherit; }
.obit-card:hover { border-color: var(--brass-2); }
.obit-card .obit-thumb { width: 104px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--paper-2) url('../img/mum.svg') no-repeat center / 76%; border: 1px solid var(--line); }
.obit-card .obit-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.obit-card h3 { font-size: 1.4rem; margin: 0 0 0.1rem; overflow-wrap: anywhere; }   /* a very long word in a name wraps instead of pushing the card off a small screen */
.obit-card .obit-zh { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 0.35rem; }
.obit-card .obit-dates { color: var(--muted); font-size: 0.93rem; margin: 0 0 0.5rem; }
.obit-card .obit-next { color: var(--ink-2); font-size: 0.93rem; margin: 0 0 0.55rem; }
.obit-card .text-link { font-size: 0.95rem; }
.obit-year { margin: 2.5rem 0 1rem; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
.obit-year:first-of-type { margin-top: 0; }
.obit-upcoming { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.8rem); margin-bottom: 2.5rem; }
.obit-upcoming h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-bottom: 0.8rem; }
.obit-upcoming ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.obit-upcoming li { display: grid; grid-template-columns: 26px 1fr; gap: 0.7rem; color: var(--ink-2); }
.obit-upcoming svg { width: 20px; height: 20px; color: var(--brass); margin-top: 4px; }
.obit-empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 72ch; }
.obit-empty p { color: var(--ink-2); }

.obit-head { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.obit-head .motif { position: absolute; right: -4%; top: -30%; width: clamp(280px, 30vw, 460px); color: var(--brass); opacity: 0.10; pointer-events: none; }
.obit-head .motif svg { width: 100%; height: auto; display: block; }
.obit-head .motif-img { aspect-ratio: 1 / 1; background: currentColor; -webkit-mask: url('../img/mum.svg') center / contain no-repeat; mask: url('../img/mum.svg') center / contain no-repeat; }
.obit-head .container { position: relative; }
.obit-hero { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.obit-hero.no-photo { grid-template-columns: 1fr; }
.obit-portrait { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: var(--card); padding: 8px; box-shadow: 0 18px 34px -26px rgba(30, 35, 40, 0.55); }
.obit-portrait img { width: 100%; height: auto; border-radius: 3px; }
.obit-in-memory { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--brass); margin: 0 0 0.4rem; }
html[lang^="zh"] .obit-in-memory { font-style: normal; letter-spacing: 0.3em; font-size: 1.1rem; }
/* The name at the top of an obituary is bold and larger than the other page titles. This is the
   standard for every obituary (Alan, October 2026). On a phone it is two steps up from the first
   design (2.2rem -> 2.8rem). On a computer it stops at 4.25rem, the largest size at which a name
   such as "Chun Shing (Eddie) Chow" still fits on one line beside the portrait.
   The bold cut of the heading typeface is only used here, so it is declared here. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); }
.obit-head h1, html[lang^="zh"] .obit-head h1 { font-size: clamp(2.8rem, 1.9rem + 3.8vw, 4.25rem); font-weight: 700; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
/* A name with a very long word (14 letters or more) is set smaller on phones, so that the word is
   never cut in two and never runs off the side of the screen. */
.obit-head h1.obit-name-long, html[lang^="zh"] .obit-head h1.obit-name-long { font-size: min(clamp(2.8rem, 1.9rem + 3.8vw, 4.25rem), 10.5vw); }
.obit-head .obit-name-alt { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: 0.08em; color: var(--ink-2); margin-top: 0.2rem; }
html.lang-en .obit-head .obit-name-alt { letter-spacing: 0.14em; }
.obit-life { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--ink-2); margin: 0.9rem 0 0; }
.obit-facts { color: var(--muted); margin: 0.35rem 0 0; }
/* Each date, and the age, stays in one piece when the dates line wraps on a narrow screen. */
.obit-life .nb, .obit-card .obit-dates .nb { display: inline-block; }
@media (max-width: 640px) { .obit-hero { grid-template-columns: 1fr; } .obit-portrait { max-width: 260px; } }

.obit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .obit-layout { grid-template-columns: 1fr; } .obit-layout aside { order: -1; } }
.obit-text p { color: var(--ink-2); }
.obit-text [lang] + [lang] { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.obit-text .obit-notes { margin-top: 1.6rem; }
.obit-services { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.75rem); }
.obit-services h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-bottom: 1rem; }
.obit-service { padding: 1rem 0; border-top: 1px solid var(--line); }
.obit-service:first-of-type { border-top: 0; padding-top: 0; }
.obit-service:last-of-type { padding-bottom: 0; }
.obit-service h3 { font-size: 1.25rem; margin: 0 0 0.3rem; }
.obit-service p { margin: 0.15rem 0 0; color: var(--ink-2); display: grid; grid-template-columns: 24px 1fr; gap: 0.5rem; }
.obit-service svg { width: 18px; height: 18px; color: var(--brass); margin-top: 5px; }
.obit-service a { font-weight: 600; }
.obit-service .obit-svc-note { display: block; color: var(--muted); font-size: 0.93rem; }
.obit-service.is-past { opacity: 0.62; }
.obit-time { white-space: nowrap; }
.obit-private { color: var(--ink-2); margin: 0; }
.obit-side-note { color: var(--muted); font-size: 0.93rem; margin: 1rem 0 0; }
.obit-share { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.obit-share .btn { font-size: 0.93rem; padding: 0.7em 1.1em; }
.obit-guides { margin-top: 1.5rem; }
.obit-guides h3 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
html[lang^="zh"] .obit-guides h3 { letter-spacing: 0.2em; }
.obit-guides ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.obit-posted { color: var(--muted); font-size: 0.9rem; margin-top: 2rem; }

/* ---- Remembrance date calculator --------------------------------------- */
.calc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.75rem); margin: 1.4rem 0; }
.calc-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.calc label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.4rem; }
.calc input, .calc select { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 0.65rem 0.9rem; }
.calc input:focus, .calc select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(150, 120, 58, 0.18); }
.calc-row > div { min-width: 0; max-width: 100%; }
.calc input, .calc select { max-width: 100%; }
.calc table { margin-bottom: 0; }
.calc-out { margin-top: 1.25rem; }

@media print {
  .obit-share, .obit-guides, .breadcrumb, .site-footer, .closing, .urgent { display: none !important; }
  .obit-layout { grid-template-columns: 1fr; }
}