/* Golden Stef — shared site chrome: header, footer, buttons, badges, form fields, reveals.
   Recreates the Golden Stef design-system primitives (Button, Badge, SectionHeader, StatBlock,
   Input, Select) as plain CSS so pages need no framework. */

body { margin: 0; background: var(--gs-black); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}
.section { padding: var(--section-y) 0; }

/* ---------- Icon (Font Awesome 6 Solid) ---------- */
.icon { width: 1.15em; text-align: center; line-height: 1; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  font: 600 12px/1 var(--font-body); letter-spacing: var(--ls-button); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn .icon { font-size: 14px; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon--right { transform: translateX(4px); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 11px; }
.btn--sm .icon { font-size: 13px; }
.btn--lg { height: 58px; padding: 0 32px; font-size: 13px; }
.btn--lg .icon { font-size: 15px; }
.btn--full { display: flex; width: 100%; }
.btn--ghost { background: transparent; padding: 0 4px; color: #fff; }
.btn--ghost:hover { background: transparent; color: var(--accent); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-xs);
  font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--accent); color: #fff;
}
.badge--ev { background: var(--gs-ev); color: #fff; }

/* ---------- SectionHeader ---------- */
.section-header { max-width: 760px; }
.section-header__eyebrow {
  font: 600 12px/1 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.section-header__title {
  margin: 0; font: 700 clamp(32px,3.6vw,52px)/1.06 var(--font-display);
  font-stretch: var(--stretch-wide); letter-spacing: var(--ls-display);
  color: var(--text-strong); text-wrap: balance;
}
.on-dark .section-header__eyebrow, .section-header--dark .section-header__eyebrow { color: var(--gs-gold-400); }
.on-dark .section-header__title, .section-header--dark .section-header__title { color: #fff; }

/* ---------- StatBlock ---------- */
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat__value {
  font: 800 clamp(44px,5vw,72px)/1 var(--font-display); font-stretch: var(--stretch-wide);
  letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.stat__rule { height: 2px; width: 32px; background: var(--accent); }
.stat__label {
  font: 600 12px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-strong);
}
.on-dark .stat__value, .on-dark .stat__label { color: #fff; }

/* ---------- Input / Select (underline fields) ---------- */
.field { display: block; position: relative; }
.field__label {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.field__control {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  outline: none; color: var(--gs-navy-600); font: 400 16px var(--font-body);
  transition: border-color var(--dur-fast);
}
.field__control:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.field__wrap { position: relative; display: block; }
select.field__control { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.field__chevron { position: absolute; right: 4px; top: 18px; font-size: 12px; pointer-events: none; color: var(--gs-navy-600); }
.on-dark .field__label { color: var(--text-inverse-muted); }
.on-dark .field__control { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.on-dark .field__control:focus { border-bottom-color: var(--accent); }
.on-dark .field__control::placeholder { color: rgba(255,255,255,.4); }
.on-dark .field__chevron { color: #fff; }
.on-dark select.field__control option { color: var(--gs-navy-600); }

/* ---------- More Button / Badge / SectionHeader / StatBlock variants ---------- */
.btn--secondary { background: transparent; color: var(--gs-navy-600); border-color: var(--gs-navy-600); }
.btn--secondary:hover { background: var(--gs-navy-600); color: #fff; }
.btn--secondary.btn--on-dark { color: #fff; border-color: rgba(255,255,255,.7); }
.btn--secondary.btn--on-dark:hover { background: #fff; color: var(--gs-ink-900); }
.btn--ghost.btn--on-light { color: var(--gs-navy-600); }
.btn--ghost.btn--on-light:hover { color: var(--accent); }

.badge--navy { background: var(--gs-navy-600); color: #fff; }
.badge--gold { background: var(--gs-gold-500); color: var(--gs-ink-900); }
.badge--outline { background: transparent; color: currentColor; border: 1px solid currentColor; }

.section-header--center { text-align: center; max-width: 820px; margin: 0 auto; }
.section-header__lead {
  margin: 20px 0 0; font: 400 var(--fs-lead)/1.5 var(--font-body); color: var(--text-muted); text-wrap: pretty;
}
.on-dark .section-header__lead, .section-header--dark .section-header__lead { color: var(--text-inverse-muted); }

.stat--md .stat__value { font-size: 40px; }
.stat__caption { font: 400 14px/1.5 var(--font-body); color: var(--text-muted); }
.on-dark .stat__caption { color: var(--text-inverse-muted); }

/* ---------- Layout helpers ---------- */
.section--white { background: #fff; }
.section--muted { background: var(--gs-ink-100); }
.section--navy { background: var(--gs-navy-700); color: #fff; }
.section--black { background: var(--gs-black); color: #fff; }
/* Responsive auto-fit grid: set --min (column minimum) and optionally --gap inline. */
.auto-grid {
  display: grid; gap: var(--gap, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr));
}
.auto-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr)); }
.split { --gap: clamp(40px,6vw,96px); align-items: start; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.head-split { --gap: 40px clamp(40px,6vw,96px); align-items: end; margin-bottom: 56px; }
.side-note { margin: 0; max-width: 380px; font: 400 17px/1.6 var(--font-body); color: var(--text-muted); text-wrap: pretty; }
.head-split .side-note { max-width: none; }
.eyebrow { font: 600 12px/1 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--gs-gold-400); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.outline { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.photo { border-radius: var(--radius-md); background: center / cover no-repeat; }
.footnote { margin: 48px 0 0; font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.on-dark .footnote, .section--navy .footnote { color: rgba(255,255,255,.5); }
.icon-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; border-top: 1px solid var(--gs-ink-200); align-items: start; }
.icon-row > .icon { font-size: 22px; color: var(--accent); }

/* ---------- Inner-page hero (photo, bottom-aligned headline) ---------- */
.page-hero {
  position: relative; height: var(--h, 88vh); min-height: var(--min-h, 640px); overflow: hidden;
  color: #fff; background: var(--gs-black); display: flex; align-items: flex-end;
}
.page-hero__bg { position: absolute; inset: 0; background: center 55% / cover no-repeat; }
.page-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,13,var(--s1,.85)) 0%, rgba(10,11,13,var(--s2,.25)) 60%, rgba(10,11,13,0) 100%),
    linear-gradient(180deg, rgba(10,11,13,var(--s0,.35)) 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,.85) 100%);
}
.page-hero__content { position: relative; width: 100%; padding-bottom: 80px; }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero__title {
  margin: 0; max-width: 1100px; font: 800 clamp(40px,6vw,92px)/1 var(--font-display); font-stretch: 125%;
  letter-spacing: -.02em; text-transform: uppercase;
}
.page-hero__title--balanced { font-size: clamp(40px,5.6vw,84px); text-wrap: balance; }
.page-hero__lead { margin: 28px 0 0; max-width: 560px; font: 400 19px/1.55 var(--font-body); color: rgba(255,255,255,.78); }

/* ---------- Photo band (full-bleed photo, text at the bottom) ---------- */
.band { position: relative; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--gs-black); }
.band__bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.band__scrim { position: absolute; inset: 0; }
.band__content { position: relative; width: 100%; padding-bottom: clamp(56px,7vw,96px); }
.band .eyebrow { margin-bottom: 20px; }
.band__title { font: 800 clamp(36px,5vw,72px)/1.02 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; }

/* ---------- 3D tilt glare (site.js GS.tilt) ---------- */
.tilt { --gx: 50%; --gy: 50%; }
.tilt__glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,var(--glare,.22)), rgba(201,151,28,.08) 35%, transparent 60%);
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

/* ---------- Zoomable photo tiles + lightbox ---------- */
.zoom-tile {
  position: relative; display: block; width: 100%; border: 0; padding: 0; border-radius: var(--radius-md);
  overflow: hidden; cursor: zoom-in; background: var(--gs-ink-800); text-align: left; font: inherit;
}
.zoom-tile__img, .hover-zoom__img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 900ms var(--ease-out); }
/* Gallery photos are real <img loading="lazy"> tags so the browser fetches them only as they near the screen. */
img.zoom-tile__img { width: 100%; height: 100%; object-fit: cover; }
.zoom-tile:hover .zoom-tile__img, .hover-zoom:hover .hover-zoom__img { transform: scale(1.05); }
.zoom-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.zoom-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,13,0), rgba(10,11,13,.85));
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88);
}
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,11,13,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 40px; box-sizing: border-box; cursor: zoom-out; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--radius-md); object-fit: contain; }
.lightbox__cap { font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* ---------- Scroll reveal (driven by site.js) ---------- */
[data-reveal].is-hidden { opacity: 0; transform: translateY(28px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(10,11,13,.55), rgba(10,11,13,0));
  border-bottom: 1px solid transparent;
  transition: background 280ms var(--ease-standard), border-color 280ms var(--ease-standard);
}
.site-header.is-solid {
  background: rgba(10,11,13,.86);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border-bottom-color: rgba(255,255,255,.08);
}
.site-header__bar { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: auto; filter: brightness(0) invert(1); }
.brand__text { display: flex; flex-direction: column; gap: 4px; }
.brand__name { font: 800 17px/1 var(--font-display); font-stretch: 125%; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.brand__sub { font: 500 9px/1 var(--font-mono); letter-spacing: .24em; color: rgba(255,255,255,.55); white-space: nowrap; }
.site-nav { display: flex; gap: clamp(20px, 2vw, 36px); flex: 1; justify-content: center; min-width: 0; }
.site-nav a {
  font: 500 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.68); padding: 8px 0 6px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.menu-toggle {
  display: none; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: #fff;
  cursor: pointer; align-items: center; justify-content: center; font-size: 16px;
}
.mobile-menu {
  display: none; background: rgba(10,11,13,.97); border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px var(--container-pad) 28px; flex-direction: column;
}
.mobile-menu a.mobile-menu__link {
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font: 600 14px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.mobile-menu a.mobile-menu__link[aria-current="page"] { color: var(--gs-gold-400); }
.mobile-menu .btn { margin-top: 24px; }
/* Six menu items + language switch + CTA need ~1280px; below that the menu folds into the menu button. */
@media (max-width: 1279px) {
  .site-nav, .site-header__cta { display: none; }
  .menu-toggle { display: flex; }
  .site-header.is-open .mobile-menu { display: flex; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--gs-black); color: rgba(255,255,255,.64); }
.site-footer .container { padding-top: 96px; padding-bottom: 40px; }
.site-footer__cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer__cta > div { max-width: 760px; }
.eyebrow-gold { font: 600 11px/1 var(--font-body); letter-spacing: .24em; color: var(--gs-gold-400); }
.site-footer__kicker { font: 600 12px/1 var(--font-body); letter-spacing: .32em; color: var(--gs-gold-400); margin-bottom: 20px; }
.site-footer__headline {
  font: 700 clamp(30px,3.6vw,52px)/1.06 var(--font-display); font-stretch: 125%;
  letter-spacing: -.02em; color: #fff; text-wrap: balance;
}
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px; padding: 56px 0; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.6 var(--font-body); }
.site-footer__col .eyebrow-gold { margin-bottom: 12px; }
.site-footer__col--links { gap: 12px; font-size: 14px; line-height: 1.4; }
.site-footer__col--links .eyebrow-gold { margin-bottom: 8px; }
.site-footer__col--links a { color: rgba(255,255,255,.75); }
.site-footer__col--links a:hover { color: #fff; }
.site-footer__col a.plain { color: #fff; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__brand-row { display: flex; align-items: center; gap: 12px; }
.site-footer__brand-row img { width: 48px; height: auto; }
.site-footer__brand-row span { font: 800 18px/1 var(--font-display); font-stretch: 125%; letter-spacing: .04em; color: #fff; }
.site-footer__brand p { margin: 0; font: 400 14px/1.6 var(--font-body); max-width: 280px; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); font: 400 12px/1.5 var(--font-body);
}
.site-footer__legal em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Language switch (EN | 中文) ---------- */
.lang-switch {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-xs);
  font: 600 12px/1 var(--font-body); letter-spacing: .08em; color: rgba(255,255,255,.8); white-space: nowrap;
}
.lang-switch:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* ---------- Chinese pages ----------
   Archivo has no Chinese glyphs: Latin and digits stay in Archivo, Chinese falls back to the system CJK font.
   CJK characters fill the full em box, so headings get more line height and no negative tracking. */
html[lang^="zh"] {
  --font-display: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --font-body: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}
html[lang^="zh"] :is(h1, h2, h3, .band__title, .site-footer__headline, .summary__text, .motto__text, .intro__name) {
  line-height: 1.22; letter-spacing: 0;
}
html[lang^="zh"] :is(.hero__title, .home-hero__title, .page-hero__title) { line-height: 1.15; }
html[lang^="zh"] :is(p, .md__quote, .side-note) { line-height: 1.8; }