/* ==========================================================================
   加拿大溫哥華禺山總公所 · Yue Shan Society of Vancouver
   Warm heritage palette: vermilion, gold, ivory, walnut ink
   ========================================================================== */

:root {
  --cream: #F6EFE3;
  --paper: #FCF8F1;
  --sand: #EEE4D2;
  --sand-2: #E4D7C1;
  --ink: #2A1C15;
  --ink-2: #53443A;
  --muted: #8B7B6C;
  --line: rgba(84, 60, 40, .14);

  --red: #B3261E;
  --red-deep: #8C1B15;
  --red-soft: #F4E0DA;
  --gold: #C9A24B;
  --gold-2: #E5CB84;
  --gold-deep: #A3822F;
  --jade: #3E7C6B;

  --serif: 'Noto Serif TC', 'Songti TC', 'STSong', 'PMingLiU', serif;
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(.22, .72, .18, 1);
  --shadow-warm: 0 30px 60px -28px rgba(96, 48, 22, .45), 0 8px 20px -12px rgba(96, 48, 22, .25);
  --radius: 6px;
  --plum-core: var(--cream);
}

*, *::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(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: .02em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.i { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--red); color: #fff; padding: 8px 14px; z-index: 10000; border-radius: 4px; }
.skip-link:focus { left: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .08em;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .45s var(--ease);
  white-space: nowrap;
}
.btn .i { transition: transform .4s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px rgba(179, 38, 30, .7); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(179, 38, 30, .7); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(246, 239, 227, .5); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(246, 239, 227, .08); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }

.text-link { display: inline-flex; align-items: center; gap: .45em; color: var(--red); font-weight: 500; letter-spacing: .06em; border-bottom: 1px solid rgba(179, 38, 30, .35); padding-bottom: 2px; }
.text-link .i { transition: transform .4s var(--ease); }
.text-link:hover .i { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 18px 0;
  color: var(--cream);
  transition: background .5s var(--ease), padding .5s var(--ease), color .5s, box-shadow .5s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(252, 248, 241, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .5s var(--ease);
}
.site-header.is-scrolled { color: var(--ink); padding: 10px 0; }
.site-header.is-scrolled::before { opacity: 1; }
.header-inner { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-emblem { width: 46px; height: 53px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); transition: width .5s var(--ease), height .5s var(--ease); }
.is-scrolled .brand-emblem { width: 38px; height: 44px; filter: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .18em; }
.brand-text small { font-family: var(--display); font-size: 12.5px; letter-spacing: .12em; opacity: .8; }

.site-nav { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.site-nav a:not(.btn) {
  position: relative; padding: 8px 13px; font-size: 14.5px; letter-spacing: .12em; font-weight: 500;
  opacity: .88; transition: opacity .3s;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.site-nav a:not(.btn):hover, .site-nav a.is-active { opacity: 1; }
.site-nav a:not(.btn):hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-nav .nav-cta { display: none; }
.header-cta { padding: 11px 22px; font-size: 14px; }
.site-header:not(.is-scrolled) .header-cta { background: var(--cream); color: var(--red); box-shadow: none; }
.site-header:not(.is-scrolled) .header-cta:hover { background: #fff; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; align-items: center; padding: 0; color: inherit;
}
.nav-toggle span { width: 24px; height: 1.6px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--cream); overflow: hidden; isolation: isolate;
  padding: 130px 0 120px;
}
.hero-media-wrap { position: absolute; inset: 0; z-index: -2; }
.hero-media { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.06); will-change: transform; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(42, 28, 21, .55) 0%, rgba(42, 28, 21, .05) 30%, rgba(42, 28, 21, 0) 55%, var(--cream) 100%),
    linear-gradient(100deg, rgba(42, 28, 21, .88) 0%, rgba(42, 28, 21, .62) 38%, rgba(42, 28, 21, .18) 72%, rgba(42, 28, 21, .05) 100%);
}
.hero-inner { position: relative; }
.hero-inner > * { max-width: 780px; }
.eyebrow { font-family: var(--sans); font-size: 13.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 26px; }
.eyebrow::before { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 14px; }
.hero-title {
  font-size: clamp(54px, 9vw, 132px); font-weight: 900; letter-spacing: .12em; line-height: 1.05;
  margin-left: -.04em; color: var(--cream); white-space: nowrap; max-width: none;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.hero-en { font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; font-style: italic; letter-spacing: .08em; color: var(--gold-2); margin: 14px 0 26px; }
.hero-motto { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; font-family: var(--serif); font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .28em; margin-bottom: 22px; color: rgba(246, 239, 227, .95); }
.hero-motto i { display: inline-block; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); margin: 0 18px; }
.hero-lead { font-size: clamp(16px, 1.35vw, 18.5px); font-weight: 300; line-height: 1.95; max-width: 560px; color: rgba(246, 239, 227, .9); margin-bottom: 40px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-vertical {
  position: absolute; right: clamp(16px, 4vw, 60px); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--serif); font-size: 15px; letter-spacing: .5em;
  color: rgba(246, 239, 227, .7); margin: 0; padding-top: 24px;
}
.hero-vertical::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 14px; background: var(--gold); }

.hero-stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(201, 162, 75, .45);
  padding: 22px 0 0;
}
.hero-stats li { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.hero-stats b { font-family: var(--display); font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; color: var(--red); line-height: 1; letter-spacing: .02em; }
.hero-stats span:last-child { font-size: 14px; letter-spacing: .14em; color: var(--ink-2); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, .6); color: var(--gold);
  display: grid; place-items: center; animation: bob 2.4s var(--ease) infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ---------- ticker ---------- */
.ticker { background: var(--red); color: var(--gold-2); overflow: hidden; padding: 14px 0; border-block: 1px solid rgba(229, 203, 132, .25); }
.ticker-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 46s linear infinite; font-family: var(--serif); font-size: 16px; letter-spacing: .32em; }
.ticker .plum { width: 14px; height: 14px; color: var(--gold-2); --plum-core: var(--red); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .scroll-cue { animation: none; } }

/* ---------- sections ---------- */
.section { padding: clamp(84px, 9vw, 140px) 0; position: relative; }
main section[id] { scroll-margin-top: 64px; }
.section-label {
  display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: var(--ink-2); margin-bottom: 26px;
}
.section-label em { font-family: var(--display); font-style: italic; font-size: 16px; letter-spacing: .1em; color: var(--muted); }
.section-label em::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 12px; }
.seal {
  display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--red); color: #fff;
  font-size: 15px; letter-spacing: 0; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 2px 6px rgba(179, 38, 30, .35);
  font-weight: 700;
}
h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; letter-spacing: .06em; line-height: 1.22; margin-bottom: 28px; }
.lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.95; color: var(--ink-2); }
.section-head { max-width: 860px; margin-bottom: clamp(44px, 5vw, 72px); }

/* ---------- about ---------- */
.about { background: var(--cream); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-figure { position: relative; }
.split-figure a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); position: relative; }
.split-figure img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.split-figure a:hover img { transform: scale(1.03); }
.split-figure::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); border-radius: var(--radius); z-index: -1; opacity: .7; }
.split-figure figcaption { font-size: 13.5px; color: var(--muted); letter-spacing: .04em; margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--gold); line-height: 1.7; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(64px, 7vw, 100px); }
.pillars li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px 28px; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.pillars li:hover { transform: translateY(-5px); box-shadow: var(--shadow-warm); border-color: rgba(201, 162, 75, .55); }
.plum-lg { width: 30px; height: 30px; color: var(--red); --plum-core: var(--paper); margin-bottom: 18px; }
.pillars h3 { font-size: 21px; letter-spacing: .16em; margin-bottom: 10px; }
.pillars p { font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.85; }

.creed { margin: clamp(64px, 7vw, 100px) auto 0; max-width: 900px; text-align: center; position: relative; padding: 50px 30px 40px; }
.creed::before, .creed::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: var(--gold); }
.creed::before { top: 0; } .creed::after { bottom: 0; }
.creed p { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); line-height: 2; letter-spacing: .08em; color: var(--ink); margin-bottom: 18px; }
.creed footer { font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: var(--red); }

/* ---------- news ---------- */
.news { background: var(--paper); border-block: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.news-item + .news-item { margin-top: clamp(64px, 7vw, 110px); padding-top: clamp(64px, 7vw, 110px); border-top: 1px solid var(--line); }
.news-item-alt .news-media { order: 2; }
.news-media { position: relative; }
.news-photo { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); }
.news-photo img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform 1.2s var(--ease); }
.news-photo:hover img { transform: scale(1.03); }
.news-photo-sm { position: absolute; right: -18px; bottom: -36px; width: 46%; border: 5px solid var(--paper); }
.news-item:first-of-type .news-media { margin-bottom: 36px; }
.news-date { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.news-date b { font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--red); letter-spacing: .06em; }
.news-date span { font-size: 14px; letter-spacing: .12em; color: var(--muted); }
.news-body h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .08em; line-height: 1.4; margin-bottom: 18px; }
.news-body p { color: var(--ink-2); }
.news-by { font-family: var(--serif); font-size: 14.5px; letter-spacing: .14em; color: var(--gold-deep) !important; margin: 0; }
.news-video { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: end; margin: 8px 0 22px; }
.news-video video { width: 150px; aspect-ratio: 320 / 568; border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow-warm); display: block; }
.news-video span { font-size: 13.5px; letter-spacing: .08em; color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid var(--gold); justify-self: start; }

/* ---------- history ---------- */
.history { background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%); }
.history::before {
  content: "禺山"; position: absolute; right: -.05em; top: 60px; font-family: var(--serif); font-weight: 900;
  font-size: clamp(160px, 26vw, 380px); line-height: 1; color: rgba(179, 38, 30, .045); pointer-events: none; letter-spacing: .05em;
  writing-mode: vertical-rl;
}
.timeline { position: relative; max-width: 960px; }
.timeline::before { content: ""; position: absolute; left: 150px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold) 0%, rgba(201, 162, 75, .35) 100%); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 40px; padding: 26px 0; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: 150px; top: 44px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg);
  background: var(--cream); border: 1.5px solid var(--gold); transition: background .4s, transform .5s var(--ease);
}
.timeline li:hover::before, .timeline li.is-now-year::before { background: var(--red); border-color: var(--red); transform: translateX(-50%) rotate(45deg) scale(1.25); }
.tl-year span { font-family: var(--display); font-size: clamp(38px, 4.2vw, 56px); font-weight: 500; color: var(--red); line-height: 1; letter-spacing: .02em; display: block; padding-top: 6px; }
.timeline li.is-now .tl-year span { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: .14em; padding-top: 10px; }
.tl-body { padding-left: 4px; }
.tl-body h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: .1em; margin-bottom: 8px; padding-top: 14px; }
.tl-body p { color: var(--ink-2); margin: 0; max-width: 620px; }

/* ---------- building ---------- */
.building { background: var(--sand); }
.building-photos { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; margin-bottom: clamp(48px, 5vw, 72px); align-items: end; }
.building-photos a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); }
.building-photos img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.building-photos figure:last-child img { aspect-ratio: 4 / 3; }
.building-photos a:hover img { transform: scale(1.03); }
.building-photos figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); letter-spacing: .04em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.building-photos figcaption b { font-family: var(--display); font-size: 20px; color: var(--red); font-weight: 600; }
.lic { font-family: var(--display); font-size: 12px; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--muted); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fact { background: var(--paper); border-radius: var(--radius); padding: 30px 26px 26px; border-top: 3px solid var(--gold); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.fact:hover { transform: translateY(-5px); box-shadow: var(--shadow-warm); }
.fact-num { font-family: var(--display); font-size: 15px; letter-spacing: .14em; color: var(--red); display: block; margin-bottom: 10px; }
.fact h3 { font-size: 19px; letter-spacing: .1em; margin-bottom: 10px; }
.fact p { font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.85; }

.plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: clamp(48px, 5vw, 72px); }
.plaque { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.plaque-board {
  aspect-ratio: 2.4 / 1; display: grid; place-items: center; background: linear-gradient(160deg, #F9F3E8, #EFE5D3);
  border: 6px solid #B8863B; outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -8px; box-shadow: inset 0 0 0 1px rgba(184, 134, 59, .5), 0 8px 18px -10px rgba(96, 48, 22, .5);
}
.plaque-board span { font-family: var(--serif); font-weight: 900; font-size: clamp(22px, 2vw, 30px); letter-spacing: .16em; color: #1e1512; direction: rtl; unicode-bidi: bidi-override; }
.plaque h3 { font-size: 20px; letter-spacing: .1em; margin-bottom: 10px; }
.plaque p { font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.85; }
.plaque b { color: var(--red); font-weight: 700; }

/* ---------- services ---------- */
.services { background: var(--cream); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 30px 32px; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-warm); border-color: rgba(201, 162, 75, .5); }
.card:hover::before { transform: scaleY(1); }
.card-idx { font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--gold-deep); display: block; margin-bottom: 18px; }
.card h3 { font-size: 23px; letter-spacing: .14em; margin-bottom: 12px; }
.card p { font-size: 15.5px; color: var(--ink-2); margin: 0; }

/* ---------- board ---------- */
.board { background: var(--ink); color: var(--cream); }
.board .section-label { color: rgba(246, 239, 227, .8); }
.board .section-label em { color: rgba(246, 239, 227, .55); }
.board .lead { color: rgba(246, 239, 227, .78); }
.board h2 { color: var(--cream); }
.board-hero a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.board-hero img { transition: transform 1.4s var(--ease); }
.board-hero a:hover img { transform: scale(1.02); }
.board-hero figcaption, .board-grid figcaption { margin-top: 16px; font-size: 13.5px; letter-spacing: .12em; color: var(--gold-2); font-family: var(--serif); }
.roster-wrap { display: grid; grid-template-columns: 1.55fr .75fr; gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 4vw, 60px); align-items: start; }
.roster { border: 1px solid rgba(201, 162, 75, .35); border-radius: var(--radius); padding: clamp(26px, 3vw, 40px); background: rgba(255, 255, 255, .03); }
.roster h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: .14em; color: var(--gold-2); margin-bottom: 6px; }
.roster-sub { font-size: 14px; letter-spacing: .1em; color: rgba(246, 239, 227, .6); margin-bottom: 18px; }
.roster-list li { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; padding: 13px 0; border-top: 1px solid rgba(246, 239, 227, .12); }
.roster-list li > div { display: grid; grid-template-columns: 6.2em 1fr; gap: 12px; align-items: baseline; }
.roster-list span { font-size: 13.5px; letter-spacing: .12em; color: rgba(246, 239, 227, .6); white-space: nowrap; }
.roster-list b { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .12em; color: var(--cream); }
.roster-list li.is-chief b { color: var(--gold-2); }
.roster-list li.is-chief > div:first-child b { font-size: 21px; font-weight: 700; }
.notice a { display: block; border-radius: var(--radius); overflow: hidden; background: #fff; padding: 8px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8); transition: transform .6s var(--ease); }
.notice a:hover { transform: translateY(-4px) rotate(-.4deg); }
.notice figcaption { margin-top: 16px; font-size: 13.5px; letter-spacing: .12em; color: var(--gold-2); font-family: var(--serif); }
.board-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 4vw, 60px); align-items: start; }
.board-grid a { display: block; border-radius: var(--radius); overflow: hidden; }
.board-grid img { aspect-ratio: 16 / 10; object-fit: cover; }
.board-duties { border: 1px solid rgba(201, 162, 75, .35); border-radius: var(--radius); padding: 34px 30px; background: rgba(255, 255, 255, .03); }
.board-duties h3 { font-size: 22px; letter-spacing: .14em; margin-bottom: 20px; color: var(--gold-2); }
.board-duties li { padding: 12px 0; border-top: 1px solid rgba(246, 239, 227, .12); font-size: 15px; color: rgba(246, 239, 227, .85); line-height: 1.8; }
.board-duties li b { color: var(--cream); font-family: var(--serif); letter-spacing: .1em; }
.board-duties .btn { margin-top: 24px; }

/* ---------- gallery ---------- */
.gallery { background: var(--cream); }
.gallery .section-head { margin-bottom: 40px; }
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 16px; }
.tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), filter .6s; }
.tile:hover img { transform: scale(1.05); }
.tile-wide { grid-column: span 2; grid-row: span 2; }
.tile:nth-child(4) { grid-column: span 2; }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: var(--cream); font-size: 13.5px; letter-spacing: .12em; font-family: var(--serif);
  background: linear-gradient(180deg, rgba(42, 28, 21, 0), rgba(42, 28, 21, .75)); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease);
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }

/* ---------- contact ---------- */
.contact { background: linear-gradient(180deg, var(--cream), var(--sand)); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.join-steps { counter-reset: step; margin-top: 30px; }
.join-steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; row-gap: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.join-steps li::before { grid-row: 1 / span 2; }
.join-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 26px; color: var(--red); line-height: 1.1; font-weight: 500; }
.join-steps li > b, .join-steps li > span { grid-column: 2; }
.join-steps b { display: block; font-family: var(--serif); font-size: 18px; letter-spacing: .1em; margin-bottom: 2px; }
.join-steps span { font-size: 15px; color: var(--ink-2); }

.contact-card { background: var(--paper); border-radius: var(--radius); padding: 40px 36px; box-shadow: var(--shadow-warm); border: 1px solid var(--line); position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201, 162, 75, .35); border-radius: 4px; pointer-events: none; }
.contact-emblem { width: 72px; height: 84px; margin-bottom: 20px; }
.contact-card h3 { font-size: 24px; letter-spacing: .12em; margin-bottom: 4px; }
.contact-en { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--muted); margin-bottom: 26px; letter-spacing: .06em; }
.contact-list li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.contact-list .i { width: 22px; height: 22px; color: var(--red); margin-top: 4px; }
.contact-list b { display: block; font-family: var(--serif); letter-spacing: .14em; font-size: 15px; margin-bottom: 2px; }
.contact-list span { font-size: 15px; color: var(--ink-2); line-height: 1.75; }
.contact-list a { color: var(--red); border-bottom: 1px solid rgba(179, 38, 30, .3); }
.contact-card .btn { margin-top: 24px; }

.map-wrap { margin-top: clamp(48px, 5vw, 72px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm); border: 1px solid var(--line); }
.map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; filter: sepia(.35) saturate(.85) contrast(1.02); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(246, 239, 227, .75); padding: 64px 0 40px; font-size: 14px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-emblem { width: 56px; height: 65px; }
.footer-brand strong { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: .14em; color: var(--cream); }
.footer-brand span { font-family: var(--display); letter-spacing: .1em; font-size: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; align-content: center; justify-content: flex-end; letter-spacing: .12em; }
.footer-nav a { opacity: .8; transition: opacity .3s; }
.footer-nav a:hover { opacity: 1; color: var(--gold-2); }
.footer-meta { grid-column: 1 / -1; border-top: 1px solid rgba(246, 239, 227, .12); padding-top: 26px; line-height: 1.8; }
.footer-meta p { margin: 0 0 6px; }
.footer-meta a { color: var(--gold-2); }
.credits { font-size: 12.5px; color: rgba(246, 239, 227, .5); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 9995; background: rgba(28, 18, 13, .94); display: grid; place-items: center; opacity: 0; transition: opacity .28s; }
.lightbox:not(.is-open) { pointer-events: none; }
.lightbox.is-open { opacity: 1; }
.lightbox figure { max-width: min(1400px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: 14px; }
.lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 20px; color: rgba(246, 239, 227, .8); font-size: 13.5px; letter-spacing: .06em; }
.lightbox-count { font-family: var(--display); color: var(--gold-2); white-space: nowrap; }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(246, 239, 227, .3); background: rgba(246, 239, 227, .06); color: var(--cream); cursor: pointer; display: grid; place-items: center; transition: background .3s, border-color .3s; }
.lightbox button:hover { background: rgba(246, 239, 227, .16); border-color: var(--gold); }
.lightbox button .i { width: 22px; height: 22px; }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  .header-cta { display: none; }
  .site-nav a:not(.btn) { padding: 8px 10px; font-size: 14px; letter-spacing: .08em; }
}

@media (max-width: 1100px) {
  .pillars, .facts { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  body { font-size: 16px; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0; background: var(--ink); color: var(--cream);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
    padding: 100px var(--gutter) 60px; transform: translateX(100%); transition: transform .6s var(--ease);
  }
  .site-nav a:not(.btn) { font-family: var(--serif); font-size: 28px; letter-spacing: .2em; padding: 10px 0; opacity: 1; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .nav-cta { display: inline-flex; margin-top: 26px; }
  body.nav-open .site-nav { transform: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { color: var(--cream); }
  body.nav-open .nav-toggle { position: relative; z-index: 2; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

  .hero { padding: 130px 0 150px; }
  .hero-vertical { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; padding-top: 18px; }
  .scroll-cue { display: none; }
  .news-item, .split, .building-photos, .plaques, .board-grid, .roster-wrap, .contact-grid, .footer-inner { grid-template-columns: 1fr; }
  .notice { max-width: 420px; }
  .news-item-alt .news-media { order: 0; }
  .news-photo-sm { right: 10px; }
  .split-figure { order: -1; }
  .split-figure::before { display: none; }
  .timeline::before { left: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .timeline li::before { left: 0; top: 22px; }
  .tl-body h3 { padding-top: 0; }
  .masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .tile-wide { grid-column: span 2; grid-row: span 2; }
  .tile:nth-child(4) { grid-column: span 2; }
  .footer-nav { justify-content: flex-start; }
  .map-wrap iframe { height: 320px; }
  .plaque { grid-template-columns: 1fr; }
  .plaque-board { max-width: 280px; }
}

@media (max-width: 560px) {
  .pillars, .facts, .cards { grid-template-columns: 1fr; }
  .eyebrow { letter-spacing: .18em; font-size: 12.5px; }
  .eyebrow::before { width: 22px; margin-right: 10px; }
  .hero-title { letter-spacing: .08em; }
  .hero-motto { letter-spacing: .18em; font-size: 15px; }
  .hero-motto i { margin: 0 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .masonry { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .tile-wide, .tile:nth-child(4) { grid-column: auto; grid-row: auto; }
  .tile-cap { opacity: 1; transform: none; }
  .roster-list li { grid-template-columns: 1fr; gap: 6px; }
  .brand-text small { display: none; }
  .contact-card { padding: 30px 24px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; }
}