/* ==========================================================================
   Gentry Club - local static build
   Restyled onto the Gentry Club Design System (../../styles.css).
   Local aliases map straight onto DS tokens; edit the DS tokens, not here.
   ========================================================================== */

:root {
  --brown:        var(--surface-page);      /* page background (dark scope: Smoky Oak) */
  --brown-deep:   var(--surface-sunken);    /* darker bands: header, hero, contact */
  --bronze:       var(--text-accent);       /* accent: rules, labels, buttons */
  --bronze-soft:  color-mix(in oklab, var(--gc-liquid-gold) 45%, transparent);
  --cream:        var(--text-body);         /* body copy */
  --white:        var(--text-heading);      /* headings */

  --wrap:      var(--container);
  --wrap-text: var(--container-narrow);

  --track-wide: var(--ls-caps-wide);   /* nav / small labels */
  --track-mid:  var(--ls-caps);        /* ALL-CAPS Marcellus titles */

  /* Type ladder - 17px base, ~1.27 ratio. One place to tune.
     Caps tracking tightens as size grows (optical, not fixed). */
  --t-micro:   11px;   /* fine print, footer base */
  --t-label:   13px;   /* nav, eyebrows, buttons */
  --t-meta:    15px;   /* captions, list meta */
  --t-body:    19px;
  --t-lede:    19px;   /* opening paragraphs - matched to body per brief */
  --t-subhead: 30px;   /* Marcellus mixed-case mid tier */
  --t-title:   40px;   /* page-head */

  --track-label: 0.26em;
  --track-caps:  0.14em;   /* brand spec for ALL-CAPS titles */

  --header-h: 178px;
}

.gc-dark {
  --brown:        var(--surface-page);
  --brown-deep:   var(--surface-sunken);
  --bronze:       var(--text-accent);
  --bronze-soft:  color-mix(in oklab, var(--gc-liquid-gold) 45%, transparent);
  --cream:        var(--text-body);
  --white:        var(--text-heading);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--brown);
  color: var(--cream);
  font: var(--type-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--white); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-8); }
.wrap--text { max-width: var(--wrap-text); }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--gc-smoky-oak);
  padding: var(--space-3) 0;
  text-align: center;
  border-bottom: 1px solid color-mix(in oklab, var(--gc-liquid-gold) 34%, transparent);
}

/* Texture reads as depth only: low opacity, soft-light blend. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/wood-pattern-bg.jpg") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.14;
  pointer-events: none;
}

.site-header > * { position: relative; z-index: 1; }

/* Emblem only, pinned top-left; the nav stays optically centred in the bar. */
.site-header__logo {
  position: absolute;
  left: var(--space-8);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
/* emblem-gold.png carries 28.92% transparent padding l/r and ~24% t/b, so
   only 51.6% of the box is ink. Box sized so the visible mark reads ~34px,
   and translated back so its left edge meets the content column. */
.site-header__logo img {
  height: 66px;
  width: auto;
  transform: translateX(-28.92%);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-10);
  margin-top: 0;
  padding-bottom: 0;
}

.nav a {
  color: var(--gc-beige);
  font: var(--type-label);
  font-size: var(--t-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-label);
  word-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  border-bottom: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--space-1);
  position: relative;
  transition: color 0.25s;
}
/* Underline tracks the label, not the 56px hit area. */
.nav a::after {
  content: "";
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  top: calc(50% + 0.85em);
  height: 1px;
  background: transparent;
  transition: background 0.25s;
}
.nav a:hover { color: var(--gc-gold-bright); }
.nav a:hover::after { background: var(--gc-gold-bright); }
.nav a[aria-current="page"] { color: var(--gc-gold-bright); }
.nav a[aria-current="page"]::after { background: var(--gc-gold-bright); }

.nav__sep { color: color-mix(in oklab, var(--gc-beige) 34%, transparent); }
.nav__lang { color: var(--gc-gold-bright) !important; }

/* mobile menu toggle - three hairlines that cross into an X.
   Outer bars are the button's own pseudo-elements so fading the middle
   bar can't drag them with it. */
.nav-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: var(--space-6);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 30;
}
.nav-toggle::before,
.nav-toggle::after,
.nav-toggle__bars {
  content: "";
  position: absolute;
  left: 9px;
  width: 26px;
  height: 1.5px;
  background: var(--gc-beige);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.22s ease;
}
.nav-toggle::before { top: 14px; }
.nav-toggle__bars { top: 21px; }
.nav-toggle::after { top: 28px; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

body.nav-open { overflow: hidden; }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-32) var(--space-6) var(--space-24);
  background-color: var(--gc-smoky-oak);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: -12% 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  filter: contrast(1.22) saturate(0.72) brightness(0.7);
  animation: hero-drift 26s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { scale: 1; }
  to   { scale: 1.07; }
}

/* Contrast-led vignette: light stays in the centre of the frame rather
   than washing the whole field in the same hue as the photograph. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 62% at 50% 48%, transparent 0%, rgba(24, 14, 6, 0.34) 58%, rgba(24, 14, 6, 0.86) 100%);
}

/* Cream frame: two hairlines inset from the edges. */
.hero__frame {
  position: absolute;
  inset: var(--space-8);
  border: 1px solid color-mix(in oklab, var(--gc-beige) 30%, transparent);
  pointer-events: none;
  z-index: 1;
}
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in oklab, var(--gc-liquid-gold) 40%, transparent);
}

.hero__eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--gc-beige);
  text-shadow: 0 1px 12px color-mix(in oklab, var(--gc-smoky-oak) 80%, transparent);
  font: var(--type-label);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.hero__eyebrow--zh { text-transform: none; letter-spacing: 0.28em; font-family: var(--font-zh-body); }

.hero__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: var(--space-8) auto 0;
  background: var(--gc-liquid-gold);
}

.hero > *:not(.hero__bg):not(.hero__frame) { position: relative; z-index: 1; }

.hero__scroll { display: inline-block; line-height: 0; }

/* Full lockup sits above the hero title. Masked rather than served as a
   white PNG so it takes the same beige as the type. */
.hero__lockup {
  display: block;
  width: 234px;
  height: 198px;
  /* 17.79% of the box height is transparent padding below the ink (~35px),
     which is what held the lockup off the title, not the margin. */
  margin: 0 auto -23px;
  background: var(--gc-beige);
  -webkit-mask: url("../logos/lockup-white.png") center/contain no-repeat;
  mask: url("../logos/lockup-white.png") center/contain no-repeat;
}

.hero__title {
  margin: 0;
  color: var(--gc-beige);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

.hero__tagline {
  margin: var(--space-8) auto 0;
  max-width: 660px;
  color: color-mix(in oklab, var(--gc-beige) 88%, var(--gc-smoky-oak));
  font-size: var(--fs-body-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: var(--lh-loose);
}

.hero__tagline--zh { text-transform: none; letter-spacing: 0.22em; font-size: var(--fs-title-sm); font-family: var(--font-zh-body); }

.chev {
  display: block;
  margin-top: var(--space-12);
  width: 30px;
  height: 30px;
  border-right: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  transform: rotate(45deg);
  opacity: 0.85;
  animation: chev-drift 2.6s ease-in-out infinite;
}

@keyframes chev-drift {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(5px, 5px); }
}

/* ---------- Page-title band (inner pages) ------------------------------- */

.page-head {
  position: relative;
  background-color: var(--gc-smoky-oak);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: var(--space-24) 0;
  text-align: center;
  overflow: hidden;
}

/* Subtle texture wash - depth, not contrast. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/wood-pattern-bg.jpg") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.16;
}

.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(84% 70% at 50% 48%, rgba(24, 14, 6, 0.28) 0%, rgba(24, 14, 6, 0.56) 58%, rgba(24, 14, 6, 0.88) 100%);
}

.page-head > * { position: relative; z-index: 1; }

.page-head__eyebrow {
  margin: 0 0 var(--space-6);
  color: var(--gc-gold-bright);
  font: var(--type-label);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.page-head__eyebrow--zh { text-transform: none; letter-spacing: 0.28em; font-family: var(--font-zh-body); }

.page-head__rule { display: block; width: 64px; height: 1px; margin: var(--space-8) auto 0; background: var(--gc-liquid-gold); }

.page-head__title {
  margin: 0;
  color: var(--gc-beige);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-title);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.page-head__title--zh { text-transform: none; letter-spacing: 0.2em; font-family: var(--font-zh-display); }

/* ---------- Generic section -------------------------------------------- */

.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--space-16) 0; }
.section--deep { background: var(--brown-deep); }

.eyebrow {
  margin: 0 0 var(--space-12);
  color: var(--bronze);
  font: var(--type-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.h2 {
  margin: 0 0 var(--space-8);
  color: var(--bronze);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 24px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.h2--zh { text-transform: none; letter-spacing: 0.18em; font-family: var(--font-zh-display); }

/* Mid tier between page title and .h2 - Marcellus mixed-case.
   Not applied yet: the section openers that need it are waiting on
   Laura's copy, so applying it now would mean inventing headlines.
   Drop it in on those blocks as soon as the rewrite lands. */
.subhead {
  margin: 0 0 var(--space-12);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--t-subhead);
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* Full-width paragraphs get their own inset so the measure doesn't run
   flush to the container edge. Headers above them share the inset so the
   left edges line up. */
.lede { padding: 0 20px; }
.wrap--text > .h2, .wrap--text > .subhead { padding-left: 20px; padding-right: 20px; }

.lede p {
  margin: 0 0 var(--space-4);
  max-width: none;
  font-size: var(--t-lede);
  line-height: 1.7;
  text-wrap: pretty;
}
.lede p:last-child { margin-bottom: 0; }

/* ---------- Tile grid (home: Penchant of Aristocracy) ------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: var(--space-6);
  background-color: var(--brown-deep);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 14, 10, 0.42);
  transition: background 0.4s ease;
}

.tile:hover::after { background: rgba(30, 14, 10, 0.12); }

.tile__label {
  position: relative;
  z-index: 1;
  color: var(--white);
  font: var(--type-label);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.tile__label--zh { text-transform: none; letter-spacing: 0.16em; font-size: 19px; font-family: var(--font-zh-body); }

.tile, .hero__scroll, .site-header__logo { border-bottom: none; }

/* ---------- Info columns (opening hours / dress code) ------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.cols--centered {
  max-width: 760px;
  column-gap: 64px;
  margin: 0 auto;
  text-align: center;
}
.cols--centered > div { padding: 0 var(--space-10); }
.cols--centered > div + div { position: relative; }
.cols--centered > div + div::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border-hairline);
}
.cols--centered .h2 { margin-bottom: 0; }
.cols--centered .info-list { margin-top: var(--space-6); text-align: center; }

.info-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-6); }
.info-list li { margin: 0; font-size: var(--t-body); line-height: 1.45; }

/* ---------- Bullet lists (membership / join us) ------------------------- */

.bullets { margin: 0; padding-left: var(--space-6); font-size: var(--t-body); }
.bullets > li { margin-bottom: var(--space-5); }
.bullets > li:last-child { margin-bottom: 0; }
.bullets ul { margin: var(--space-4) 0 0; padding-left: var(--space-6); list-style: circle; }
.bullets ul li { margin-bottom: var(--space-3); }
.bullets::marker, .bullets li::marker { color: var(--bronze); }
/* Matches the homepage lede paragraph size. */
/* Sub-list that follows a lede lead-in line. */
.lede + .bullets { margin-top: var(--space-2); }

/* ---------- Button ------------------------------------------------------ */

.btn {
  display: inline-block;
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--bronze);
  color: var(--bronze);
  background: none;
  font: var(--type-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn:hover { background: var(--bronze); color: var(--text-on-accent); }
.btn--zh { text-transform: none; letter-spacing: 0.16em; font-family: var(--font-zh-body); }

/* ---------- Facilities: alternating full-bleed bands -------------------- */

.facility {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: var(--space-20) 0;
  background-color: var(--gc-smoky-oak);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.facility::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 10, 7, 0.88) 0%, rgba(20, 10, 7, 0.55) 55%, rgba(20, 10, 7, 0.25) 100%);
}

/* Darker layer cross-fades in on hover. Gradients don't interpolate, so
   the transition has to run on opacity, not on background. */
.facility::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(20, 10, 7, 0.94) 0%, rgba(20, 10, 7, 0.72) 55%, rgba(20, 10, 7, 0.46) 100%);
  transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.facility--right::after {
  background: linear-gradient(270deg, rgba(20, 10, 7, 0.94) 0%, rgba(20, 10, 7, 0.72) 55%, rgba(20, 10, 7, 0.46) 100%);
}
.facility:hover::after { opacity: 1; }

.facility--right::before {
  background: linear-gradient(270deg, rgba(20, 10, 7, 0.88) 0%, rgba(20, 10, 7, 0.55) 55%, rgba(20, 10, 7, 0.25) 100%);
}

.facility__inner { position: relative; z-index: 1; width: 100%; }

.facility__panel { max-width: 520px; }
.facility--right .facility__panel { margin-left: auto; }

.facility__name {
  margin: 0 0 var(--space-5);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-title-lg);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

.facility__body { margin: 0; color: var(--cream); }

/* ---------- Events grid -------------------------------------------------- */

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.event-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-on-dark);
}

.event-card__img {
  aspect-ratio: 4 / 3;
  background-color: var(--brown-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.event-card__cap {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: var(--fs-body);
  color: var(--cream);
}

/* ---------- Footer (compact, 4 columns) --------------------------------- */

.site-footer {
  background: var(--gc-smoky-oak);
  border-top: 1px solid color-mix(in oklab, var(--gc-liquid-gold) 34%, transparent);
  padding: var(--space-12) 0 var(--space-6);
  font-size: var(--fs-small);
  color: color-mix(in oklab, var(--gc-beige) 82%, var(--gc-smoky-oak));
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
  gap: var(--space-10);
  align-items: start;
}

/* The PNG carries ~18% transparent padding left/right and ~32% top, so the
   ink reads inset from the text column. Percentage translate pulls it back
   into alignment and stays correct at any rendered size. */
.site-footer__mark {
  height: 68px;
  width: auto;
  transform: translate(-17.55%, -31.68%);
  margin-bottom: var(--space-1);
}

@media (min-width: 1025px) {
  .site-footer__mark { height: 85px; }
}

.site-footer__ttl {
  margin: 0 0 var(--space-4);
  color: var(--gc-gold-bright);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.site-footer__ttl--zh { text-transform: none; letter-spacing: 0.16em; font-family: var(--font-zh-body); }

.site-footer p { margin: 0 0 var(--space-3); line-height: var(--lh-relaxed, 1.7); }
.site-footer p:last-child { margin-bottom: 0; }

.site-footer__email {
  display: inline-block;
  color: var(--gc-beige);
  border-bottom: 1px solid color-mix(in oklab, var(--gc-liquid-gold) 50%, transparent);
}
.site-footer__email:hover { color: var(--gc-gold-bright); }

.site-footer .btn--footer {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-8);
  font-size: 11px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.site-footer__legal a { color: inherit; }
.site-footer__legal a:hover { color: var(--gc-gold-bright); }

/* WhatsApp slot - pending team decision. Removing the markup leaves the
   grid intact; nothing else depends on it. */
.site-footer__slot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed color-mix(in oklab, var(--gc-beige) 22%, transparent);
}

.site-footer__base {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in oklab, var(--gc-beige) 14%, transparent);
  color: color-mix(in oklab, var(--gc-beige) 58%, var(--gc-smoky-oak));
}

/* ---------- Gold call-to-action ----------------------------------------- */

.btn--gold {
  background: var(--gc-liquid-gold);
  border-color: var(--gc-liquid-gold);
  color: var(--gc-beige);
  font-weight: var(--fw-medium);
  padding: var(--space-5) var(--space-12);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--gc-liquid-gold) 30%, transparent);
}
.btn--gold:hover { background: var(--gc-gold-deep); border-color: var(--gc-gold-deep); color: var(--gc-beige); }

/* ---------- Event categories -------------------------------------------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Dark card scope - the near-white surface read as jarring against the
   beige page, so cards invert to Smoky Oak with light text. Aliases are
   redeclared locally so descendants pick up the right values. */
.cat-card, .value-card, .panel {
  --white:         var(--gc-beige);
  --cream:         var(--gc-beige);
  --text-heading:  var(--gc-beige);
  --text-body:     var(--gc-beige);
  --bronze:        var(--gc-gold-bright);
  --text-accent:   var(--gc-gold-bright);
  --border-subtle: color-mix(in oklab, var(--gc-liquid-gold) 26%, transparent);
  color: var(--cream);
}

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--gc-oak-70);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in oklab, var(--gc-smoky-oak) 16%, transparent); }

.cat-card__img {
  aspect-ratio: 4 / 3;
  background-color: var(--surface-sunken);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cat-card__body { padding: var(--space-8) var(--space-8) var(--space-10); }

.cat-card__name {
  margin: 0 0 var(--space-4);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 20px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cat-card__name--zh { text-transform: none; letter-spacing: 0.16em; font-family: var(--font-zh-display); }

.cat-card__body p { margin: 0; color: var(--text-body); font-size: var(--t-body); }

/* ---------- Value grid (membership / join us) --------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Two-tier layout (e.g. membership page without Retail). Responsive
   breakpoints below still take over at tablet/mobile widths. */
.value-grid--2 { grid-template-columns: repeat(2, 1fr); }

.value-card {
  padding: var(--space-8);
  background: var(--gc-oak-70);
  border-top: 2px solid var(--gc-liquid-gold);
}

.value-card h3 {
  margin: 0 0 var(--space-4);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 20px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.value-card h3--zh, .value-card--zh h3 { text-transform: none; letter-spacing: 0.16em; font-family: var(--font-zh-display); }

.value-card p { margin: 0 0 var(--space-4); color: var(--text-body); font-size: var(--t-body); }
.value-card p:last-of-type { margin-bottom: 0; }

/* Tagline under a tier name - one line, gold, distinct from the body copy. */
.value-card p.value-card__tag {
  color: var(--bronze);
  font-style: italic;
}

.figure-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-16);
}

.figure-band > div {
  aspect-ratio: 3 / 4;
  background-color: var(--surface-sunken);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- Legal pages (Terms / Privacy) -------------------------------- */

.legal h2 { margin-top: var(--space-16); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--space-5); }
.legal .bullets { margin-bottom: var(--space-5); }
.legal-updated { color: var(--bronze); font: var(--type-label); letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: var(--space-10); }

.gc-oak90 {
  --surface-page: var(--gc-smoky-oak);
  --surface-card: color-mix(in oklab, var(--gc-smoky-oak) 88%, var(--gc-beige));
  --surface-raised: color-mix(in oklab, var(--gc-smoky-oak) 80%, var(--gc-beige));
  --surface-sunken: color-mix(in oklab, var(--gc-smoky-oak) 92%, black);
  --surface-inverse: var(--gc-beige);
  --text-heading: var(--gc-beige);
  --text-body: color-mix(in oklab, var(--gc-beige) 84%, var(--gc-smoky-oak));
  --text-muted: color-mix(in oklab, var(--gc-beige) 52%, var(--gc-smoky-oak));
  --text-accent: var(--gc-gold-bright);
  --border-hairline: color-mix(in oklab, var(--gc-beige) 24%, transparent);
  --border-subtle: color-mix(in oklab, var(--gc-beige) 12%, transparent);
  --border-strong: var(--gc-beige);
  --brown: var(--surface-page);
  --brown-deep: var(--surface-sunken);
  --bronze: var(--text-accent);
  --bronze-soft: color-mix(in oklab, var(--gc-liquid-gold) 45%, transparent);
  --cream: var(--text-body);
  --white: var(--text-heading);
}

/* ---------- Facilities: scroll motion ----------------------------------- */

/* JS sets --fy per band while it is in view: a slow image drift. */
.facility { background-position: center calc(50% + var(--fy, 0px)); }

.facility .facility__panel {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.facility--right .facility__panel { transform: translateX(40px); }
.facility.is-visible .facility__panel { opacity: 1; transform: none; }

.facility__name::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: var(--space-5);
  background: var(--gc-liquid-gold);
  transition: width 1.1s ease 0.3s;
}
.facility.is-visible .facility__name::after { width: 88px; }

/* Same treatment on every section and card title. Rule sits at full
   width by default, so titles outside a .reveal block still show it;
   inside one it grows as the block scrolls in. */
.h2::after,
.cat-card__name::after,
.value-card h3::after {
  content: "";
  display: block;
  width: 88px;
  height: 1px;
  margin-top: var(--space-5);
  background: var(--gc-liquid-gold);
  transition: width 1.1s ease 0.3s;
}
.reveal:not(.is-visible) .h2::after,
.h2.reveal:not(.is-visible)::after,
.reveal:not(.is-visible) .cat-card__name::after,
.reveal:not(.is-visible) .value-card h3::after { width: 0; }

/* Centred blocks get a centred rule. */
.cols--centered .h2::after { margin-inline: auto; }

/* ---------- Scroll reveal ------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chev { animation: none; }
  .hero__bg { animation: none; transform: none !important; }
  .facility { background-position: center; }
  .facility::after { transition: none; }
  .facility .facility__panel { opacity: 1; transform: none; transition: none; }
  .facility__name::after { width: 88px; transition: none; }
  .h2::after, .cat-card__name::after, .value-card h3::after { width: 88px; transition: none; }
  .cat-card { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .events-grid, .cat-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  /* Full-screen overlay menu. */
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-24) var(--space-8);
    background: var(--gc-smoky-oak);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.42s;
    z-index: 25;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { font-size: 20px; letter-spacing: 0.22em; min-height: 64px; }
  .nav a::after { left: 0; right: 0; top: calc(50% + 0.95em); }
  .nav__sep { display: none; }
  .nav-toggle { display: block; }
  .site-header { padding: var(--space-4) 0; min-height: 72px; }
  .site-header__logo { left: var(--space-6); }

  .cols,
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .cols--centered > div { padding: 0; }
  .cols--centered > div + div { border-top: 1px solid var(--border-hairline); padding-top: var(--space-10); }
  .cols--centered > div + div::before { display: none; }

  .events-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }

  .facility { min-height: 460px; }
  .facility::before,
  .facility--right::before { background: rgba(20, 10, 7, 0.78); }
  .facility__panel,
  .facility--right .facility__panel { max-width: none; margin: 0; padding: 0 var(--space-5); }

  .section { padding: var(--space-16) 0; }
  .wrap { padding: 0 var(--space-5); }

  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .cat-grid, .value-grid, .figure-band { grid-template-columns: 1fr; }
}

/* ---------- Light content panel (membership / join us) ------------------ */

.panel {
  background: var(--gc-oak-70);
  border-top: 2px solid var(--gc-liquid-gold);
  padding: var(--space-12);
}
.panel > :first-child { margin-top: 0; }