/* CASHFLOW Club Thailand — redesign 2026-11
   Structure borrowed (not copied) from big-brand education sites: announcement bar, sticky header with
   grouped menus, oversized hero headline, eyebrow + light headline with bold key words, alternating
   picture/text rows, and quiet fade-up reveals on scroll. Brand: navy + gold. */

/* ---------- tokens ---------- */
:root {
  --page: #F7F6F2;
  --white: #FFFFFF;
  --tint: #EFECE4;
  --footer: #0A1428;
  --navy: #0F1D36;
  --navy-2: #1A2C4E;
  --navy-3: #25395F;
  --navy-deep: #0A1428;
  --gold: #C8A96B;
  --gold-light: #E3CB97;
  --gold-dark: #B39355;
  --gold-ink: #7A5C1E;
  --ink: #1B2333;
  --grey: #545D6E;
  --grey-on-navy: #B9C2D4;
  --rule: #E2DFD7;
  --rule-on-navy: rgba(255, 255, 255, .18);

  --font: "Montserrat", "Noto Sans Thai", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Montserrat", "Noto Sans Thai", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* type scale */
  --t-xs: .8125rem;
  --t-small: .875rem;
  --t-body: 1rem;
  --t-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-card: 1.1875rem;
  --t-row: clamp(1.75rem, 3.2vw, 2.625rem);
  --t-section: clamp(2rem, 4.2vw, 3.375rem);
  --t-hero: clamp(2.75rem, 8vw, 7rem);
  --t-stat: clamp(2.75rem, 5.6vw, 4.5rem);

  /* spacing scale (8px base) */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: clamp(3rem, 6vw, 4.5rem);
  --s-7: clamp(4.5rem, 9vw, 7.5rem);

  --gutter: clamp(20px, 5vw, 56px);
  --max: 78rem;
  --radius: 6px;
  --radius-lg: 14px;
  --header-h: 76px;
  --shadow-sm: 0 1px 2px rgba(10, 20, 40, .06), 0 2px 8px rgba(10, 20, 40, .05);
  --shadow-md: 0 10px 30px -10px rgba(10, 20, 40, .22);
  --shadow-lg: 0 30px 60px -25px rgba(10, 20, 40, .35);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .7s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.menu-locked, html.menu-locked body { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-light); color: var(--navy-deep); }

.skip-link { position: absolute; left: var(--s-2); top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--navy); color: var(--white); font-weight: 700; text-decoration: none; border-radius: var(--radius); transition: top .2s var(--ease); }
.skip-link:focus { top: var(--s-2); }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.band { padding-block: var(--s-7); }
.band-white { background: var(--white); }
.band-navy { background: var(--navy); color: var(--white); position: relative; isolation: isolate; }
.band-navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 30rem at 85% -10%, rgba(200, 169, 107, .14), transparent 60%),
              radial-gradient(40rem 24rem at 0% 110%, rgba(37, 57, 95, .9), transparent 70%);
}

/* ---------- type ---------- */
.label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink);
}
.label::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.band-navy .label { color: var(--gold); }
.section-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--t-section);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}
.band-navy .section-title { color: var(--white); }
.section-intro { max-width: 44rem; margin: var(--s-3) auto 0; text-align: center; color: var(--grey); font-size: 1.125rem; }
.row-title { margin-top: .9rem; font-weight: 300; font-size: var(--t-row); line-height: 1.16; letter-spacing: -.015em; color: var(--navy); text-wrap: pretty; }
.row-title strong { font-weight: 800; }

/* ---------- buttons ---------- */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem;
  padding: .9em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: 700 .875rem/1.2 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.button::after { content: "\2192"; font-weight: 400; transition: transform .25s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:hover::after { transform: translateX(3px); }
.button:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.button-gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 6px 18px -8px rgba(179, 147, 85, .9); }
.button-gold:hover { background: var(--gold-light); box-shadow: 0 12px 24px -10px rgba(179, 147, 85, .95); }
.button-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.button-outline:hover { background: var(--navy); color: var(--white); }
.button-outline-white { border-color: var(--rule-on-navy); color: var(--white); background: rgba(255, 255, 255, .04); }
.button-outline-white:hover { border-color: var(--white); background: rgba(255, 255, 255, .1); }

/* ---------- announcement + header ---------- */
.announce { background: var(--gold); color: var(--navy-deep); text-align: center; font-weight: 700; font-size: var(--t-small); letter-spacing: .01em; }
.announce a { display: block; padding: .65rem var(--gutter); text-decoration: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(10, 20, 40, .35); background: rgba(255, 255, 255, .97); }
.header-bar { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.wordmark { font-weight: 800; font-size: 1.3125rem; letter-spacing: -.01em; color: var(--navy); text-decoration: none; white-space: nowrap; }
.wordmark span { font-weight: 300; }
.site-nav { margin-right: auto; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-group { position: relative; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: .6rem .85rem; border: 0; border-radius: var(--radius); background: none;
  font: 700 .9375rem/1.2 var(--font); color: var(--navy); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover, .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--tint); }
.nav-link[aria-current="page"] { color: var(--gold-ink); }
.nav-toggle::after {
  content: ""; width: .45rem; height: .45rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.nav-toggle[aria-expanded="true"]::after { transform: translateY(.2rem) rotate(-135deg); }
.nav-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 15rem;
  padding: .5rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.nav-toggle[aria-expanded="true"] + .nav-menu,
.nav-group:hover > .nav-menu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-menu a { display: block; padding: .65rem .85rem; border-radius: var(--radius); font-weight: 600; font-size: .9375rem; color: var(--navy); text-decoration: none; transition: background-color .2s var(--ease), padding-left .2s var(--ease); }
.nav-menu a:hover { background: var(--tint); padding-left: 1.1rem; }
.nav-mobile-only { display: none; }
.header-actions { display: flex; gap: .6rem; }
.header-actions .button { min-height: 2.6rem; padding: .7em 1.15em; font-size: .8125rem; }
.header-actions .button::after { display: none; }
.menu-button { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--white); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none;
  background: radial-gradient(50rem 26rem at 50% 0%, rgba(200, 169, 107, .16), transparent 70%);
}
.hero-copy { position: relative; padding-block: clamp(3rem, 8vw, 6.5rem) var(--s-5); text-align: center; }
.hero h1 {
  font-weight: 900; font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--navy);
}
.hero h1 span { display: inline-block; }
.hero h1 span:first-child { display: block; }
.hero h1 .accent { color: var(--gold-dark); }
.hero-lede { margin: var(--s-4) auto 0; max-width: 46rem; font-weight: 400; font-size: var(--t-lede); line-height: 1.55; color: var(--grey); }
.hero-lede strong { font-weight: 700; color: var(--navy); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--s-4); }
.hero-photo { position: relative; z-index: 1; margin-bottom: calc(-1 * clamp(3rem, 9vw, 8rem)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- numbers ---------- */
.numbers { padding-block: calc(clamp(3rem, 9vw, 8rem) + var(--s-5)) var(--s-5); }
.numbers-compact { padding-block: var(--s-5); }
.number-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) clamp(1.5rem, 4vw, 4rem); text-align: center; }
.number-list-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.number-list li + li { border-left: 1px solid var(--rule-on-navy); }
.number-list strong { display: block; font-weight: 300; font-size: var(--t-stat); line-height: 1.05; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.number-list span { display: block; margin-top: .6rem; font-weight: 700; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-on-navy); }

/* ---------- events ---------- */
.events { padding-block: var(--s-6); }
.events-panel {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: center; gap: var(--s-4) var(--s-5);
  padding: clamp(2rem, 4vw, 3.25rem); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--page) 0%, var(--white) 100%);
  border: 1px solid var(--rule); box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.events-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gold); }
.events .section-title { text-align: left; margin-top: .75rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.events-copy p:not(.label) { margin-top: var(--s-2); max-width: 36rem; color: var(--grey); font-size: 1.0625rem; }
.events .join-channels { flex-direction: column; align-items: stretch; margin-top: 0; }

/* ---------- workshop slideshow ---------- */
.slideshow-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.slideshow-head .section-title { text-align: left; }
.slideshow-head p { margin-top: .75rem; color: var(--grey-on-navy); }
.slideshow-controls { display: flex; gap: .5rem; }
.slideshow-controls button {
  width: 3.25rem; height: 3.25rem; border: 1.5px solid var(--rule-on-navy); border-radius: 50%; background: transparent; color: var(--white);
  font: 400 1.25rem/1 var(--font); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.slideshow-controls button:hover { border-color: var(--gold); background: rgba(200, 169, 107, .12); }
.slideshow-controls button:active { transform: scale(.94); }
.slides {
  display: flex;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  margin: var(--s-5) 0 0;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px), calc((100vw - var(--max)) / 2 + var(--gutter)));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slides li { flex: 0 0 auto; height: clamp(15rem, 40vw, 31rem); scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden; }
.slides img { height: 100%; width: auto; max-width: none; transition: transform 1.2s var(--ease-out); }
.slides li:hover img { transform: scale(1.04); }

/* ---------- alternating rows ---------- */
.rows { display: grid; gap: var(--s-7); margin-top: var(--s-6); }
.row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.row-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.row-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.row-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.row:hover .row-media img { transform: scale(1.03); }
.row-copy p { margin-top: var(--s-2); color: var(--grey); max-width: 34rem; font-size: 1.0625rem; }
.row-copy p.label { margin-top: 0; color: var(--gold-ink); font-size: var(--t-xs); }
.row-copy .button { margin-top: var(--s-4); }
.row-copy .button + .button { margin-left: .5rem; }
.row-flip .row-media { order: 2; }
.row-media.founder-portrait { background: linear-gradient(180deg, var(--tint), var(--page)); padding: var(--s-4) var(--s-4) 0; box-shadow: none; }
.row-media.founder-portrait img { width: auto; max-width: min(100%, 20rem); aspect-ratio: auto; margin-inline: auto; }
.row:hover .row-media.founder-portrait img { transform: none; }

.facts { margin-top: var(--s-3); }
.facts div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--s-2); padding-block: 1rem; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; color: var(--navy); }
.facts dd { color: var(--grey); }
.story div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
#founder .row { align-items: start; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); counter-reset: card; }
.card {
  position: relative; counter-increment: card;
  background: var(--page); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-3) var(--s-4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.card::before { content: "0" counter(card); display: block; margin-bottom: var(--s-3); font-weight: 300; font-size: 2.25rem; line-height: 1; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; background: var(--white); }
.card h3 { font-weight: 700; font-size: var(--t-card); line-height: 1.3; color: var(--navy); }
.card p { margin-top: .75rem; color: var(--grey); }

/* ---------- team + strengths ---------- */
.team { margin-top: var(--s-6); text-align: center; }
.team .row-title { max-width: 46rem; margin-inline: auto; }
.team-intro { max-width: 42rem; margin: var(--s-2) auto 0; color: var(--grey); font-size: 1.0625rem; }
.team-wall { --team-gap: clamp(.5rem, 1vw, .9rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--team-gap); margin-top: var(--s-5); }
.team-wall li { flex: 0 0 calc((100% - 3 * var(--team-gap)) / 4); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.team-wall li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-wall img { width: 100%; }

.strengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) clamp(1rem, 2.5vw, 2rem); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.strengths li {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  background: var(--page); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.strengths li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.strength-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: var(--s-3) var(--s-2); background: var(--navy); color: var(--white); text-align: center; }
.strengths li:nth-child(4n+2) .strength-key, .strengths li:nth-child(4n+3) .strength-key { background: var(--navy-3); }
.strength-key b { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gold); color: var(--navy-deep); font-weight: 800; font-size: 1.125rem; }
.strength-key span { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.strengths p { align-self: center; padding: var(--s-3); font-weight: 500; color: var(--navy); }

/* ---------- code of honor ---------- */
.code-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.code-head { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.code-head p:last-child { margin-top: var(--s-2); color: var(--grey); max-width: 24rem; }
.code-list { margin: 0; padding: 0; list-style: none; counter-reset: code; }
.code-list li { counter-increment: code; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-3); border-top: 1px solid var(--rule); color: var(--grey); }
.code-list li:first-child { border-top: 2px solid var(--navy); }
.code-list li::before { content: counter(code, decimal-leading-zero); font-weight: 300; font-size: 2.25rem; line-height: 1; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.code-list strong { display: block; margin-bottom: .35rem; font-weight: 700; font-size: var(--t-card); line-height: 1.35; color: var(--navy); }
.code-list li:nth-child(4) strong { margin-bottom: 0; }
.code-close { margin-top: .5rem; padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); background: var(--navy); color: var(--white); font-weight: 600; font-size: 1.125rem; line-height: 1.45; }
.code-note { margin-top: var(--s-2); font-size: var(--t-small); color: var(--grey); }

/* ---------- who ---------- */
.who-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.who-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who-cards li {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--rule-on-navy); border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-3);
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.who-cards li:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .09); border-color: rgba(200, 169, 107, .55); }
.who-cards h3 { font-weight: 700; font-size: var(--t-card); line-height: 1.3; color: var(--white); }
.who-cards h3::before { content: ""; display: block; width: 2rem; height: 3px; margin-bottom: var(--s-2); background: var(--gold); border-radius: 2px; }
.who-cards p { margin-top: .75rem; color: var(--grey-on-navy); }
.orgs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(200, 169, 107, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(200, 169, 107, .35);
}
.orgs h3 { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.orgs p { margin-top: .6rem; max-width: 40rem; color: var(--grey-on-navy); }

/* ---------- founder ---------- */
.timeline { margin-top: var(--s-7); }
.timeline .row-title { margin-top: 0; text-align: center; }
.timeline-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.timeline-list li { position: relative; padding-top: 1.75rem; }
.timeline-list li::before { content: ""; position: absolute; top: .3125rem; left: 0; right: -1.5rem; height: 1px; background: var(--gold); }
.timeline-list li:last-child::before { right: 0; }
.timeline-list li::after { content: ""; position: absolute; top: 0; left: 0; width: .6875rem; height: .6875rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200, 169, 107, .2); }
.timeline-date { font-weight: 700; font-size: var(--t-card); line-height: 1.2; color: var(--navy); }
.timeline-place { margin-top: .2rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.timeline-list img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: var(--s-2); border-radius: var(--radius-lg); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.timeline-list li:hover img { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.taught { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--grey); text-align: center; max-width: 56rem; margin-inline: auto; }
.taught strong { display: block; margin-bottom: .4rem; color: var(--navy); font-weight: 700; }
.row-copy .founder-lesson { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--gold); background: var(--page); border-radius: 0 var(--radius) var(--radius) 0; color: var(--navy); font-weight: 600; font-size: var(--t-card); line-height: 1.45; }

/* ---------- join ---------- */
.join { text-align: center; }
.join p { max-width: 34rem; margin: var(--s-3) auto 0; color: var(--grey-on-navy); font-size: 1.125rem; }
.join p strong { color: var(--gold); }
.join-channels { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--s-4); }

/* ---------- footer ---------- */
.site-footer { background: var(--footer); color: var(--grey-on-navy); font-size: var(--t-small); }
.site-footer .wordmark { color: var(--white); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-5) var(--s-3); border-bottom: 1px solid var(--rule-on-navy); }
.footer-top ul { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-top a { font-weight: 600; color: var(--white); text-decoration: none; transition: color .2s var(--ease); }
.footer-top ul a:hover { color: var(--gold); }
.footer-legal { padding-block: var(--s-3) var(--s-5); }
.footer-legal p { max-width: 62rem; }
.footer-legal p + p { margin-top: .6rem; }

.to-top {
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--navy); color: var(--white); text-decoration: none; font-size: 1.25rem; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background-color .2s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--gold); color: var(--navy-deep); }

/* ---------- game page ---------- */
.page-hero { position: relative; background: var(--white); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40rem 24rem at 90% 30%, rgba(200, 169, 107, .18), transparent 70%); }
.page-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.page-hero h1 { margin-top: var(--s-2); font-weight: 900; font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--navy); }
.page-hero .hero-lede { margin-left: 0; margin-right: 0; }
.page-hero .hero-actions { justify-content: flex-start; }
.page-hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.page-hero-media img { width: 100%; }
.prose { max-width: 46rem; margin: var(--s-5) auto 0; }
.prose p + p { margin-top: var(--s-2); }
.prose p { color: var(--grey); font-size: 1.125rem; }
.prose p:first-child { color: var(--navy); font-size: var(--t-lede); line-height: 1.55; }
.learn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-6); counter-reset: learn; }
.learn-list li {
  counter-increment: learn; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: var(--s-3); background: var(--page); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  font-weight: 600; color: var(--navy); line-height: 1.45;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.learn-list li::before { content: counter(learn, decimal-leading-zero); font-weight: 300; font-size: 1.25rem; line-height: 1.2; color: var(--gold-dark); }
.learn-list li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: var(--white); }
.table-scroll { margin-top: var(--s-6); overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.versus { width: 100%; min-width: 38rem; border-collapse: collapse; text-align: left; }
.versus th, .versus td { padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.versus tbody tr:last-child th, .versus tbody tr:last-child td { border-bottom: 0; }
.versus thead th { font-weight: 800; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--page); border-bottom: 2px solid var(--navy); }
.versus thead th:last-child { background: var(--navy); color: var(--gold); }
.versus tbody th { font-weight: 700; color: var(--navy); width: 24%; }
.versus td { color: var(--grey); width: 38%; }
.versus td:last-child { color: var(--navy); font-weight: 600; background: rgba(200, 169, 107, .1); }
.versus tbody tr { transition: background-color .2s var(--ease); }
.versus tbody tr:hover { background: var(--page); }
.faq { max-width: 52rem; margin: var(--s-6) auto 0; }
.faq div { padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.faq div:last-child { border-bottom: 1px solid var(--rule); }
.faq dt { font-weight: 700; font-size: 1.1875rem; color: var(--navy); }
.faq dd { margin-top: .5rem; color: var(--grey); }

/* ---------- motion: entrance + scroll reveal (opacity/transform only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 span, .js .hero-lede, .js .hero-actions, .js .page-hero-grid > div:first-child > * {
    animation: rise .9s var(--ease-out) both;
  }
  .js .hero h1 span:nth-child(2) { animation-delay: .08s; }
  .js .hero h1 span:nth-child(3) { animation-delay: .16s; }
  .js .hero-lede { animation-delay: .28s; }
  .js .hero-actions { animation-delay: .38s; }
  .js .page-hero-grid > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .js .page-hero-grid > div:first-child > :nth-child(3) { animation-delay: .18s; }
  .js .page-hero-grid > div:first-child > :nth-child(4) { animation-delay: .28s; }
  .js .hero-photo img, .js .page-hero-media img { animation: settle 1.6s var(--ease-out) both; }

  .js.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
  .js.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
  .js.reveal-ready .row[data-reveal] .row-media img { transform: scale(1.08); transition: transform 1.4s var(--ease-out); }
  .js.reveal-ready .row[data-reveal].is-visible .row-media img { transform: none; }
  .js.reveal-ready .row[data-reveal].is-visible:hover .row-media img { transform: scale(1.03); }
  .js.reveal-ready .card[data-reveal].is-visible:hover,
  .js.reveal-ready .post-card[data-reveal].is-visible:hover,
  .js.reveal-ready .who-cards li[data-reveal].is-visible:hover { transform: translateY(-6px); transition-delay: 0s; }
  .js.reveal-ready .strengths li[data-reveal].is-visible:hover,
  .js.reveal-ready .team-wall li[data-reveal].is-visible:hover,
  .js.reveal-ready .learn-list li[data-reveal].is-visible:hover { transform: translateY(-4px); transition-delay: 0s; }
  .js.reveal-ready [data-reveal].is-visible:is(.card, .post-card, .who-cards li, .strengths li, .team-wall li, .learn-list li) {
    transition: opacity var(--dur) var(--ease-out) var(--reveal-delay, 0s), transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
  }
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

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

/* ---------- narrower screens ---------- */
@media (max-width: 64rem) {
  .cards, .who-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-actions .button-outline { display: none; }
}
@media (max-width: 60rem) {
  :root { --header-h: 64px; }
  .header-bar { gap: var(--s-2); }
  .menu-button {
    display: inline-flex; align-items: center; gap: .55rem; margin-left: auto;
    min-height: 2.75rem; padding: .5rem .85rem; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--white);
    font: 700 .8125rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); cursor: pointer;
  }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), background-color .2s var(--ease); }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .menu-button[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-button[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .header-actions { order: 0; margin-left: auto; }
  .header-actions + .menu-button { margin-left: 0; }

  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, var(--header-h)); bottom: 0; margin: 0;
    padding: var(--s-2) var(--gutter) var(--s-5); background: var(--white); border-top: 1px solid var(--rule);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--rule); padding-block: .5rem; }
  .nav-toggle { width: 100%; justify-content: space-between; padding: .75rem 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); pointer-events: none; }
  .nav-toggle::after { display: none; }
  .nav-toggle:hover { background: none; }
  .nav-menu { position: static; min-width: 0; padding: 0 0 .5rem; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-menu::before { display: none; }
  .nav-menu a, .nav-link { display: block; padding: .7rem 0; font-size: 1.125rem; font-weight: 700; }
  .nav-menu a:hover { padding-left: .35rem; background: none; }
  .nav-link:hover { background: none; }
  .nav-mobile-only { display: block; }
}
@media (max-width: 48rem) {
  .header-actions .button { padding: .6em .85em; font-size: .75rem; }
  .wordmark { font-size: 1.0625rem; }
  .row, .row-flip { grid-template-columns: minmax(0, 1fr); }
  .hero-photo img { aspect-ratio: 3 / 2; }
  .events-panel { grid-template-columns: minmax(0, 1fr); }
  .events .join-channels { flex-direction: row; flex-wrap: wrap; }
  .team-wall li { flex-basis: calc((100% - var(--team-gap)) / 2); }
  .slides li { height: auto; width: 86vw; }
  .slides img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .row-flip .row-media { order: 0; }
  .number-list span { font-size: .6875rem; letter-spacing: .1em; }
  .number-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-list-4 li:nth-child(3) { border-left: 0; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .code-grid { grid-template-columns: minmax(0, 1fr); }
  .code-head { position: static; }
  .code-list li { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .code-list li::before { font-size: 1.75rem; }
  .timeline-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline-list li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.1rem; padding: 0 0 1.5rem 1.75rem; }
  .timeline-list li::before { top: .5rem; bottom: -.5rem; left: .3125rem; right: auto; width: 1px; height: auto; }
  .timeline-list li:last-child::before { display: none; }
  .timeline-list li::after { top: .375rem; }
  .timeline-list img { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }
  .timeline-date { grid-column: 2; align-self: end; }
  .timeline-place { grid-column: 2; align-self: start; }
  .strengths { grid-template-columns: minmax(0, 1fr); }
  .strengths li { grid-template-columns: minmax(0, 1fr); }
  .strengths li:nth-child(n) .strength-key { background: var(--navy); }
  .strengths li:nth-child(even) .strength-key { background: var(--navy-3); }
  .strength-key { flex-direction: row; justify-content: flex-start; padding: 1rem 1.25rem; }
  .strengths p { padding: 1.1rem 1.25rem; }
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .learn-list, .who-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .orgs { padding: var(--s-3); }
}
@media (max-width: 30rem) {
  .cards, .who-cards { grid-template-columns: minmax(0, 1fr); }
  .number-list:not(.number-list-4) { grid-template-columns: minmax(0, 1fr); }
  .number-list:not(.number-list-4) li + li { border-left: 0; border-top: 1px solid var(--rule-on-navy); padding-top: 1.25rem; }
  .header-actions { display: none; }
  .wordmark { font-size: 1rem; }
  .hero-actions .button, .join-channels .button { width: 100%; }
  .row-copy .button + .button { margin-left: 0; }
  .row-copy .button { width: 100%; }
  .row-copy .button + .button { margin-top: .6rem; }
}

/* ---------- mobile menu: fixed panel must not sit inside a backdrop-filter box ---------- */
@media (max-width: 60rem) {
  .site-header.nav-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--white); }
  .nav-cta { border-bottom: 0 !important; padding-top: var(--s-3) !important; }
  .nav-cta .button { display: flex; width: 100%; padding: .9em 1.6em; font-size: .875rem; }
}

/* ---------- blog ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.blog-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding-block: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem); }
.blog-hero h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.25rem, 5vw, 4rem); text-transform: none; letter-spacing: -.02em; line-height: 1.15; }
.blog-hero .hero-lede { margin-inline: auto; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); }
.section-head .section-title { text-align: left; margin-top: .75rem; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
#posts .post-grid { margin-top: 0; }
.post-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.post-card:active { transform: translateY(-2px) scale(.995); }
.post-card-media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }
.post-card-body .label { font-size: .75rem; }
.post-card h2, .post-card h3 { margin-top: .65rem; font-weight: 700; font-size: 1.1875rem; line-height: 1.45; color: var(--navy); }
.post-card-body > p:not(.label) { margin-top: .6rem; color: var(--grey); font-size: .9375rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-more { margin-top: auto; padding-top: var(--s-2); font-weight: 700; font-size: .875rem; color: var(--gold-ink); }
.post-card-more::after { content: " \2192"; display: inline-block; transition: transform .25s var(--ease); }
.post-card:hover .post-card-more::after { transform: translateX(4px); }
.post-card-featured { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-card-featured .post-card-media { aspect-ratio: auto; min-height: 100%; }
.post-card-featured .post-card-body { justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.post-card-featured h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.3; }
.post-card-featured .post-card-body > p:not(.label) { font-size: 1.0625rem; -webkit-line-clamp: 4; }
.post-card-featured .post-card-more { margin-top: var(--s-3); }

/* ---------- article page ---------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.article-hero { background: var(--white); padding-top: clamp(2rem, 5vw, 3.5rem); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: var(--t-small); color: var(--grey); }
.breadcrumb a { color: var(--navy); font-weight: 600; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-hero .label { margin-top: var(--s-3); }
.article-hero h1 {
  max-width: 24ch; margin-top: var(--s-2);
  font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.22; letter-spacing: -.015em; color: var(--navy); text-wrap: balance;
}
.article-cover { margin-top: var(--s-5); }
.article-cover img { width: 100%; max-height: 38rem; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.article-cover figcaption, .article-figure figcaption { margin-top: .6rem; font-size: var(--t-small); color: var(--grey); }
.article { background: linear-gradient(var(--white) 0, var(--white) 18rem, var(--page) 18rem); }
.article-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 44rem); justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); padding-block: var(--s-6) var(--s-7); }
.toc { position: sticky; top: calc(var(--header-h) + var(--s-3)); align-self: start; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
.toc-title { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.toc ol { margin-top: var(--s-2); border-left: 2px solid var(--rule); }
.toc a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .875rem; line-height: 1.5; color: var(--grey); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
.toc a:hover { color: var(--navy); }
.toc a.is-active { color: var(--navy); font-weight: 700; border-left-color: var(--gold); }

.prose-article { font-family: "Noto Sans Thai", "Montserrat", sans-serif; font-size: 1.125rem; line-height: 1.9; color: var(--ink); }
.prose-article > * + * { margin-top: 1.25rem; }
.prose-article h2 { margin-top: 3rem; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.4; color: var(--navy); scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose-article h2::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: 1rem; background: var(--gold); border-radius: 2px; }
.prose-article h3 { margin-top: 2rem; font-weight: 700; font-size: 1.25rem; line-height: 1.5; color: var(--navy); }
.prose-article h3 + p, .prose-article .para-head + p { margin-top: .4rem; }
.prose-article .para-head { margin-top: 1.75rem; color: var(--navy); }
.prose-article strong { font-weight: 700; color: var(--navy); }
.prose-article a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: background-color .2s var(--ease); }
.prose-article a:hover { background: rgba(200, 169, 107, .18); }
.prose-article ul, .prose-article ol { padding-left: 1.4rem; }
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article li + li { margin-top: .5rem; }
.prose-article li::marker { color: var(--gold-dark); font-weight: 700; }
.prose-article blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--gold); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.1875rem; color: var(--navy); }
.prose-article blockquote p + p { margin-top: .5rem; color: var(--grey); font-size: 1rem; }
.article-table { margin-top: 1.75rem; background: var(--white); }
.article-table table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 1rem; line-height: 1.6; }
.article-table th, .article-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.article-table thead th { background: var(--navy); color: var(--white); font-weight: 700; font-size: .9375rem; border-bottom: 0; }
.article-table tbody tr:nth-child(even) { background: var(--page); }
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-figure { margin: 2.25rem auto; }
.article-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.article-figure-portrait { max-width: 24rem; }
.article-figure-square { max-width: 32rem; }
.article-notes { margin-top: 3rem !important; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--rule); font-size: 1rem; }
.article-notes p { color: var(--grey); }
.article-notes p:first-child { color: var(--navy); font-size: 1.0625rem; }
.article-notes p + p { margin-top: .75rem; font-size: .9375rem; }
.article-notes .button { margin-top: var(--s-3); text-decoration: none; color: var(--navy-deep); }
.article-notes .button:hover { background: var(--gold-light); }
.related .label { display: flex; justify-content: center; }
.related-all { margin-top: var(--s-5); text-align: center; }

@media (max-width: 64rem) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card-featured { grid-column: span 2; }
  .article-layout { grid-template-columns: minmax(0, 44rem); }
  .toc { display: none; }
}
@media (max-width: 48rem) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card-featured { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .post-card-featured .post-card-media { aspect-ratio: 3 / 2; }
  .prose-article { font-size: 1.0625rem; line-height: 1.85; }
  .article-cover { padding-inline: 0; }
  .article-cover img { border-radius: 0; max-height: none; aspect-ratio: 3 / 2; }
  .article-cover figcaption { padding-inline: var(--gutter); }
  .article-figure-portrait { max-width: 80%; }
  .article-notes { padding: var(--s-3); }
  .section-head .button { width: 100%; }
}

/* =====================================================================
   COMMUNITY DESIGN (concept 2 chosen by Peace, prototype by Codex)
   Full-bleed community photo hero with the numbers inside, events beside
   a photo, light gallery, quieter cards with gold rules, light footer.
   ===================================================================== */
:root { --page: #F8F7F3; --header-bg: #FAF9F6; }
.site-header { background: rgba(250, 249, 246, .94); }
.site-header.is-scrolled { background: rgba(250, 249, 246, .98); }
.nav-link, .nav-toggle { font-weight: 800; font-size: .875rem; }
.header-actions .button { min-height: 2.75rem; padding: .8em 1.4em; font-size: .8125rem; text-transform: none; letter-spacing: 0; }

/* hero */
.community-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(34rem, 44vw, 40rem); display: flex; align-items: center; background: var(--navy-deep); color: var(--white); }
.community-backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.community-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 22, 40, .97) 0%, rgba(9, 22, 40, .9) 30%, rgba(9, 22, 40, .45) 52%, rgba(9, 22, 40, 0) 70%),
    linear-gradient(0deg, rgba(9, 22, 40, .55) 0%, rgba(9, 22, 40, 0) 35%);
}
.hero-layout { width: 100%; padding-block: clamp(2.5rem, 5vw, 4rem); }
.community-copy { max-width: 41rem; }
.community-hero h1 { font-weight: 900; font-size: clamp(3.25rem, 5.7vw, 5.25rem); line-height: 1.015; letter-spacing: -.035em; text-transform: uppercase; color: var(--white); }
.community-hero h1 span { display: block; }
.community-hero h1 em { font-style: normal; color: #DFBD70; }
.community-hero .hero-lede { margin: var(--s-3) 0 0; max-width: 33rem; font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.community-hero .hero-lede strong { color: var(--white); font-weight: 800; }
.community-hero .hero-actions { justify-content: flex-start; margin-top: var(--s-4); }
.community-numbers { display: flex; margin-top: var(--s-4); }
.community-numbers li { display: flex; flex-direction: column; padding: 0 1.75rem; border-left: 1px solid var(--gold); line-height: 1.1; }
.community-numbers li:first-child { padding-left: 0; border-left: 0; }
.community-numbers strong { font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.4rem); letter-spacing: -.02em; color: #DFBD70; font-variant-numeric: tabular-nums; }
.community-numbers span { margin-top: .35rem; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }

/* events beside a photo */
.events { padding-block: var(--s-6); background: var(--page); }
.events-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.events .section-title { text-align: left; margin-top: .75rem; font-weight: 800; font-size: clamp(2rem, 3.25vw, 2.875rem); letter-spacing: -.03em; line-height: 1.1; }
.events-copy p:not(.label) { margin-top: var(--s-2); max-width: 38rem; color: var(--grey); font-size: 1.125rem; line-height: 1.55; }
.events .join-channels { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-top: var(--s-3); }
.events-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.events-media img { width: 100%; aspect-ratio: 1.9; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.events-media:hover img { transform: scale(1.03); }

/* light gallery */
.community-gallery { background: var(--page); color: var(--navy); padding-block: var(--s-5) var(--s-7); overflow: hidden; }
.community-gallery::before { display: none; }
.community-gallery .section-title { color: var(--navy); text-align: left; font-weight: 800; letter-spacing: -.03em; }
.community-gallery .slideshow-head { align-items: center; }
.community-gallery .slideshow-head p { color: var(--grey); font-size: 1.0625rem; }
.community-gallery .slideshow-controls { flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.community-gallery .slideshow-controls button { width: auto; height: auto; min-height: 2.75rem; padding: .6rem 1.1rem; border: 1px solid #8B877D; border-radius: var(--radius); color: var(--navy); font: 700 .8125rem/1 var(--font); }
.community-gallery .slideshow-controls button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.community-gallery #slide-next { background: var(--navy); border-color: var(--navy); color: var(--white); }
.community-gallery #slide-next:hover { background: var(--navy-3); }
.gallery-status { display: block; width: 100%; text-align: right; font-size: .75rem; color: var(--grey); }
.community-gallery .slides { gap: 20px; margin-top: var(--s-4); }
.community-gallery .slides li { flex: 0 0 min(70vw, 53rem); height: auto; aspect-ratio: 1.6; }
.community-gallery .slides img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; }

/* quieter cards and lists */
.card { background: transparent; border: 0; border-top: 2px solid var(--gold); border-radius: 0; padding: var(--s-3) 0 0; }
.card::before { font-size: 1.5rem; margin-bottom: var(--s-2); }
.card:hover { background: transparent; box-shadow: none; transform: translateY(-4px); }
.card h3 { font-size: 1.3125rem; }
.strengths { gap: 0 3rem; }
.strengths li { display: block; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s-3) 0; overflow: visible; }
.strengths li:hover { box-shadow: none; }
.strength-key, .strengths li:nth-child(4n+2) .strength-key, .strengths li:nth-child(4n+3) .strength-key, .strengths li:nth-child(n) .strength-key { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .75rem; padding: 0; background: none; color: var(--navy); text-align: left; }
.strength-key b { width: auto; height: auto; border-radius: 0; background: none; color: var(--gold-ink); font-size: 1.375rem; }
.strength-key span { font-size: 1.125rem; font-weight: 800; }
.strengths p { padding: .85rem 0 0; font-weight: 400; color: var(--grey); line-height: 1.65; }
.who-cards li { background: none; border: 0; border-top: 1px solid rgba(198, 164, 95, .5); border-radius: 0; padding: var(--s-3) 0 0; }
.who-cards li:hover { background: none; border-color: var(--gold); transform: translateY(-4px); }
.who-cards h3 { font-size: 1.4375rem; }
.who-cards h3::before { display: none; }
#founder .founder-portrait { position: sticky; top: calc(var(--header-h) + var(--s-3)); align-self: start; }

/* light footer */
.site-footer { background: #EEECE6; color: var(--grey); }
.site-footer .wordmark, .footer-top a { color: var(--navy); }
.footer-top { border-bottom-color: var(--rule); }
.footer-top ul a { font-size: .8125rem; font-weight: 700; }
.footer-top ul a:hover { color: var(--gold-ink); }
.footer-legal { font-size: .75rem; color: #565B66; }

/* hero entrance for the community hero */
@media (prefers-reduced-motion: no-preference) {
  .js .community-copy > * { animation: rise .8s var(--ease-out) both; }
  .js .community-copy > :nth-child(2) { animation-delay: .1s; }
  .js .community-copy > :nth-child(3) { animation-delay: .2s; }
  .js .community-copy > :nth-child(4) { animation-delay: .3s; }
  .js .community-backdrop { animation: settle 1.8s var(--ease-out) both; }
}

@media (max-width: 64rem) {
  .community-hero h1 { font-size: 4rem; }
  .community-hero::before { background: linear-gradient(90deg, rgba(9, 22, 40, .95) 0%, rgba(9, 22, 40, .8) 45%, rgba(9, 22, 40, .2) 80%), linear-gradient(0deg, rgba(9, 22, 40, .6), rgba(9, 22, 40, 0) 40%); }
  .community-backdrop { object-position: 60% center; }
}
@media (max-width: 48rem) {
  .community-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; overflow: visible; }
  .community-hero::before { display: none; }
  .community-backdrop { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 1760 / 983; object-fit: cover; }
  .hero-layout { padding-block: var(--s-4) var(--s-5); }
  .community-hero h1 { font-size: clamp(2.5rem, 10.3vw, 4rem); letter-spacing: -.03em; }
  .community-hero .hero-lede { font-size: 1rem; line-height: 1.6; }
  .community-hero .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .community-numbers { justify-content: space-between; }
  .community-numbers li { padding: 0 1rem; }
  .community-numbers strong { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .community-numbers span { font-size: .625rem; letter-spacing: 0; }
  .events-grid { grid-template-columns: minmax(0, 1fr); }
  .events-media img { aspect-ratio: 1.7; }
  .events .join-channels { display: grid; grid-template-columns: minmax(0, 1fr); }
  .community-gallery .slideshow-head { flex-direction: column; align-items: stretch; }
  .community-gallery .slideshow-controls { justify-content: flex-start; align-items: center; }
  .gallery-status { width: auto; margin-left: auto; }
  .community-gallery .slides li { flex-basis: 86vw; aspect-ratio: 1.5; }
  .strengths { grid-template-columns: minmax(0, 1fr); }
  #founder .founder-portrait { position: static; }
}
@media (max-width: 30rem) {
  .header-actions { display: none; }
}

/* ---------- article QA fixes (Codex review) ---------- */
.post-card-media.is-contain, .article-cover.is-contain img { background: #EEECE6; }
.post-card-media.is-contain img { object-fit: contain; }
.article-cover.is-contain img { object-fit: contain; max-height: 38rem; }
.toc-mobile { display: none; }
@media (max-width: 64rem) {
  .toc-mobile { display: block; margin-bottom: 2rem !important; border: 1px solid var(--rule); border-top: 2px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); background: var(--white); font-family: var(--font-body); }
  .toc-mobile summary { min-height: 3rem; display: flex; align-items: center; padding: .25rem 1.1rem; font-weight: 700; font-size: 1rem; color: var(--navy); cursor: pointer; }
  .toc-mobile ol { list-style: decimal; margin: 0; padding: 0 1.1rem 1rem 2.4rem; font-size: .9375rem; line-height: 1.6; }
  .toc-mobile li + li { margin-top: .4rem; }
  .toc-mobile a { color: var(--grey); text-decoration: none; }
  .toc-mobile a:hover { color: var(--navy); text-decoration: underline; }
}
@media (max-width: 48rem) {
  .article-cover.is-contain img { aspect-ratio: auto; max-height: 26rem; object-fit: contain; }
  .article-table:not(.is-wide) table { min-width: 0; table-layout: auto; }
  .article-table table { font-size: .875rem; }
  .article-table th, .article-table td { padding: .6rem .55rem; overflow-wrap: anywhere; }
  .article-table.is-wide { background: linear-gradient(90deg, var(--white) 30%, rgba(255,255,255,0)), linear-gradient(90deg, rgba(255,255,255,0), var(--white) 70%) 100% 0, radial-gradient(farthest-side at 100% 50%, rgba(10,20,40,.18), transparent) 100% 0; background-repeat: no-repeat; background-size: 2rem 100%, 2rem 100%, .9rem 100%; background-attachment: local, local, scroll; }
  .article-table.is-wide table { min-width: 34rem; }
}
/* Thai text never gets wide letter-spacing (it breaks syllable shapes) */
[lang="th"] .label, [lang="th"] .toc-title, .prose-article, [lang="th"] .post-card-more { letter-spacing: 0; }
[lang="th"] .label { font-size: .8125rem; }

/* ---------- Codex review 2: closed mobile menu, hero scrim, wider frame ---------- */
@media (max-width: 60rem) {
  /* sub-menus follow the panel: hidden (not focusable, not in the a11y tree) while the menu is closed */
  .nav-menu { visibility: inherit; }
}
.community-scrim { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: fill; opacity: .98; pointer-events: none; }
.community-hero::before { background: linear-gradient(0deg, rgba(9, 22, 40, .35) 0%, rgba(9, 22, 40, 0) 30%); }
.header-bar, .hero-layout, .events-grid { max-width: 90rem; padding-left: max(clamp(1.5rem, 4.4vw, 4rem), env(safe-area-inset-left, 0px)); padding-right: max(clamp(1.5rem, 4.4vw, 4rem), env(safe-area-inset-right, 0px)); }
@media (max-width: 64rem) {
  .community-scrim { width: 130%; max-width: none; }
}
@media (max-width: 48rem) {
  .community-scrim { display: none; }
  .community-hero::before { display: none; }
}