/*
Theme Name: ACCCA — 美国中华美食文化协会
Theme URI: https://www.americachinesecuisinecultureassociation.com
Author: Built for the American Chinese Cuisine & Culture Association
Description: Custom theme for the American Chinese Cuisine & Culture Association (美国中华美食文化协会), built from the association's design mockup. Bilingual (zh-CN / EN) with events, news, and a membership application flow.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: accca
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* The accent ramp is blue: the association's site uses blue for every
     link, button and icon. Names are kept so nothing else has to change. */
  --green-800: #08296b;
  --green-700: #0d3690;
  --green-600: #1247bc;
  --green-500: #1b57d0;
  --green-400: #5b8ae4;
  --green-200: #aec4ee;
  --green-100: #d3e0f7;
  --green-50:  #e7edf8;
  --green-25:  #f2f6fd;

  /* Text and section tints taken from the association's existing site:
     body copy there is rgb(18,71,188) and the bands alternate between a pale
     blue and a pale green-grey. */
  --brand-blue: #1247bc;
  --ink:     #1247bc;
  --ink-2:   #1c4fc0;
  /* Chosen to clear 4.5:1 on every band the theme uses (#fff, #f7f9fd,
     #f2f5ef, #e7edf8), not just on white. */
  --muted:   #53668f;
  --muted-2: #5d6e96;

  /* A hint of blue behind the page so white cards and panels read against it;
     pure white on white made the list cards disappear. */
  --bg:      #f7f9fd;
  --surface: #ffffff;
  --band-blue:  #e7edf8;
  --band-green: #f2f5ef;
  --border:  #d7e1f2;
  --border-2:#eaeff8;

  --gold: #c9a227;
  --danger: #c0392b;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(34,38,43,.05);
  --shadow:    0 2px 10px rgba(34,38,43,.06);
  --shadow-lg: 0 10px 30px rgba(34,38,43,.10);

  --wrap: 1200px;
  --header-h: 96px;

  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
              "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  /* Their headings use Yu Mincho; these are the system equivalents, so no
     multi-megabyte CJK webfont has to be downloaded. */
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
                "Hiragino Mincho ProN", "Yu Mincho", SimSun, Georgia, serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, var(--font-cjk);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Column layout so the footer is pushed to the bottom on short pages
     instead of leaving a strip of page background beneath it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--green-800); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green-600); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Lists and long-form text get a narrower measure: a 1200px line of Chinese
   body copy is far past a comfortable reading length. */
.wrap--reading { max-width: 920px; }

.section { padding: 64px 0; }
/* Short archives left a large void above the footer. */
.section--fill { min-height: 46vh; }
.section--tight { padding: 44px 0; }
.section--alt { background: var(--band-blue); }
.section--soft { background: var(--band-green); }

.grid { display: grid; gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.6em;
  font-family: var(--font-cjk);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  color: #fff;
  box-shadow: 0 1px 2px rgba(47,92,13,.28);
}
.btn--primary:hover { background: linear-gradient(180deg, var(--green-600), var(--green-800)); color: #fff; }

.btn--ghost {
  background: rgba(255,255,255,.82);
  border-color: var(--green-200);
  color: var(--green-700);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover { background: #fff; border-color: var(--green-400); color: var(--green-800); }

.btn--sm { padding: .55em 1.15em; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* Arrow link, e.g. 了解详情 → */
.arrow-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-cjk); font-size: 13.5px; font-weight: 600;
  color: var(--green-600);
}
.arrow-link .arrow { transition: transform .18s ease; }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border-2);
}
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark { width: 62px; height: 62px; flex: 0 0 62px; }
.brand__mark img, .brand__mark svg { width: 100%; height: 100%; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn {
  font-family: var(--font-cjk);
  font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: .03em;
}
.brand__en {
  font-size: 10.5px; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin-top: 3px;
}

.site-nav { margin-left: auto; }
.site-nav__extra { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
/* :not(.btn) so the 加入我们 button inside the mobile panel keeps its own
   white label — this rule is class+element, which otherwise outranks
   .btn--primary and painted blue text onto a blue button. */
.site-nav a:not(.btn) {
  font-family: var(--font-cjk); font-size: 15.5px; font-weight: 500;
  color: var(--ink-2); position: relative; padding: 4px 0; display: block;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { color: var(--green-600); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a { color: var(--green-600); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.lang-switch {
  font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: .04em;
}
.lang-switch:hover { color: var(--green-600); }

.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; margin: 0 auto; }

/* English runs longer than Chinese: tighten the bar so it stays on one line. */
.lang-en .site-nav ul { gap: 18px; }
.lang-en .site-nav a:not(.btn) { font-size: 14.5px; }
.lang-en .brand__en { font-size: 7.5px; letter-spacing: .04em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 580px;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf7fb 0%, #e8f5ef 45%, #dff0d8 100%);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg svg, .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Only the vertical padding belongs here: the shorthand would wipe out the
   horizontal padding .wrap provides, and below 1200px there is no centring
   margin left to hide it, so the hero ran edge-to-edge on tablets. */
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.hero__content { max-width: 640px; }


/* White outline on the banner headline, matching the association's own
   banner artwork. paint-order puts the stroke behind the glyph so the
   letterforms keep their weight; the shadow stack is the fallback for
   browsers without it. */
/* 民以食为天 supplied as artwork: the text node is replaced by the image and
   the outline/gradient rules no longer apply to it. */
.hero__brush--image { line-height: 0; margin-bottom: 14px; }
.hero__brush--image img {
  display: block; width: min(100%, 520px); height: auto;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, .85));
}
.vp-scaled .hero__brush--image img { width: min(100%, 470px); }
@media (max-width: 680px) { .hero__brush--image img { width: min(100%, 330px); } }

/* Gradient brush line. -webkit-text-stroke cannot coexist with a clipped
   background, so the white edge is built from stacked drop-shadows, which
   apply to the rendered glyphs after clipping. */
.hero__content--gradient .hero__brush {
  background-image: linear-gradient(155deg, #2f8f66 0%, #58a84f 42%, #86bd33 74%, #9ec91c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.hero__content--gradient.hero__content--outlined .hero__brush {
  filter:
    drop-shadow( 2px  0   0 #fff) drop-shadow(-2px  0   0 #fff)
    drop-shadow( 0    2px 0 #fff) drop-shadow( 0   -2px 0 #fff)
    drop-shadow( 2px  2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
    drop-shadow( 2px -2px 0 #fff) drop-shadow(-2px  2px 0 #fff)
    drop-shadow( 0 3px 12px rgba(255, 255, 255, .8));
}

.hero__content--outlined:not(.hero__content--gradient) .hero__brush,
.hero__content--outlined .hero__title {
  text-shadow:
    -2px -2px 0 #fff,  2px -2px 0 #fff,
    -2px  2px 0 #fff,  2px  2px 0 #fff,
    -3px  0   0 #fff,  3px  0   0 #fff,
     0   -3px 0 #fff,  0    3px 0 #fff,
     0 3px 14px rgba(255, 255, 255, .85);
}
@supports (paint-order: stroke) {
  .hero__content--outlined:not(.hero__content--gradient) .hero__brush,
  .hero__content--outlined .hero__title {
    -webkit-text-stroke: 0.085em #fff;
    paint-order: stroke fill;
    text-shadow: 0 3px 14px rgba(255, 255, 255, .7);
  }
}

/* --- Hero logo lockups -------------------------------------------------
   Three arrangements of crest + wordmark, chosen in the Customizer:
   inline  — crest beside the calligraphy, as in the original mockup
   stacked — crest above the text, given room to read (default)
   side    — crest to the left of the whole text block
   -------------------------------------------------------------------- */
.hero__seal { display: block; }
.hero__seal img, .hero__seal svg { width: 100%; height: 100%; object-fit: contain; }

/* right — text left, crest large on the right, at the artwork's own size.
   The hero photo leaves that half empty, so the crest fills it and finally
   reads at full detail. */
.hero__content--right {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  max-width: none; width: 100%;
}
.hero__content--right .hero__lines { flex: 1 1 560px; min-width: 0; max-width: 680px; }
/* The per-language hero widths deliberately skip this lockup (see .lang-en
   rule below); it manages its own measure. */
.lang-en .hero__content--right .hero__lines { max-width: 620px; }
.hero__content--right .hero__seal {
  order: 2; flex: 0 0 auto;
  /* 512px is the artwork's native size; it steps down on smaller screens. */
  width: min(var(--seal-size, 191px), 38vw);
  height: auto; aspect-ratio: 1;
}

/* stacked (default) */
.hero__content--stacked .hero__seal {
  width: clamp(84px, 9vw, 124px);
  height: auto; aspect-ratio: 1;
  margin-bottom: 20px;
  filter: drop-shadow(0 3px 10px rgba(31, 56, 20, .18));
}

/* inline — closest to the approved mockup, just bigger */
.hero__content--inline { display: block; }
.hero__content--inline .hero__seal {
  width: clamp(64px, 7vw, 96px);
  height: auto; aspect-ratio: 1;
  float: left; margin: 0 18px 0 0;
  shape-outside: circle(50%);
  filter: drop-shadow(0 3px 10px rgba(31, 56, 20, .18));
}
.hero__content--inline .hero__brush { margin-top: -.08em; }
.hero__content--inline .hero__lines { overflow: hidden; }

/* side — crest left of the whole stack */
.hero__content--side {
  display: flex; align-items: flex-start; gap: clamp(22px, 3vw, 40px);
}
.hero__content--side .hero__seal {
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 156px);
  height: auto; aspect-ratio: 1;
  margin-top: 6px;
  filter: drop-shadow(0 4px 14px rgba(31, 56, 20, .2));
}
.hero__content--side .hero__lines { min-width: 0; }

.hero__brush {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", var(--font-cjk);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 700;
  color: var(--hero-brush-color, var(--green-700));
  /* Their artwork runs the brush line from a deep teal-green through to a
     bright yellow-green; clip the gradient to the glyphs. */
  background-image: linear-gradient(155deg, #2f8f66 0%, #58a84f 42%, #86bd33 74%, #9ec91c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  letter-spacing: .1em;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 12px rgba(255,255,255,.65);
}

.hero__title {
  font-family: var(--font-cjk);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  color: var(--hero-color, var(--green-700));
  line-height: 1.28;
  letter-spacing: .05em;
  margin: 0 0 18px;
  text-shadow: 0 2px 12px rgba(255,255,255,.6);
}
.hero__sub {
  font-size: 15px; line-height: 1.85;
  /* The line falls across the hill crest, where mid-grey went muddy. */
  color: #414b52;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .75);
  margin: 0 0 30px; max-width: 34em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__actions .btn { padding: .85em 2em; font-size: 15px; }

/* Latin hero copy needs a smaller size and a wider measure to stay on two lines,
   and a serif reads closer to the calligraphic feel of the Chinese original. */
.lang-en .hero__content:not(.hero__content--right) { max-width: 780px; }
.lang-en .hero__brush {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic; font-weight: 600;
  font-size: clamp(34px, 5vw, 52px); letter-spacing: .005em;
}
.lang-en .hero__title {
  font-size: clamp(24px, 3.1vw, 34px); letter-spacing: .005em; line-height: 1.34;
}
.lang-en .hero__sub { font-size: 14px; }

/* ==========================================================================
   Feature cards (文化传承 / 行业交流 / …)
   ========================================================================== */
.features { padding: 56px 0 0; position: relative; z-index: 5; }
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green-200); }
.feature-card__icon { color: var(--green-500); margin: 0 auto 14px; width: 40px; height: 40px; }
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card h3 { font-size: 17px; margin-bottom: .5em; letter-spacing: .03em; }
.feature-card p { font-size: 13px; color: var(--muted); line-height: 1.85; margin: 0; }

/* ==========================================================================
   Section headings
   ========================================================================== */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 30px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 800; color: var(--brand-blue);
  letter-spacing: .05em; margin: 0;
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .section-title::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--green-400); margin: 14px auto 0;
}
.section-title--rule::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--green-400); margin: 14px 0 0;
}

/* ==========================================================================
   Event cards (homepage grid)
   ========================================================================== */
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.event-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-50); }
.event-card__media img, .event-card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.event-card:hover .event-card__media img { transform: scale(1.045); }
.event-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.event-card__title { font-size: 17px; margin: 0; letter-spacing: .02em; }
.event-card__title a { color: var(--ink); }
.event-card__title a:hover { color: var(--green-600); }
.event-card .arrow-link { margin-top: auto; padding-top: 4px; }

.meta-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted);
}
.meta-row svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--green-500); }
.meta-group { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ==========================================================================
   CTA / stats band
   ========================================================================== */
.cta-band {
  background: linear-gradient(120deg, var(--band-blue) 0%, #eef2fa 55%, var(--band-green) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 42px 44px;
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.35fr;
  gap: 40px; align-items: center;
}
.cta-band__title { font-family: var(--font-serif); font-size: 25px; color: var(--brand-blue); letter-spacing: .04em; margin-bottom: .6em; }
.cta-band__text { font-size: 14px; color: var(--muted); line-height: 1.9; margin-bottom: 22px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 0 12px; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--green-100);
}
.stat__icon { color: var(--green-500); width: 30px; height: 30px; margin: 0 auto 10px; }
.stat__icon svg { width: 100%; height: 100%; }
.stat__num {
  font-size: 32px; font-weight: 800; color: var(--green-600);
  line-height: 1.1; letter-spacing: .01em;
}
.stat__label { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ==========================================================================
   Page banner (inner pages)
   ========================================================================== */
.page-banner {
  position: relative; overflow: hidden;
  /* Colour first so the band never flashes white while the photo loads. */
  background-color: var(--band-green);
  background-image: url("assets/img/page-banner.jpg");
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  padding: 62px 0 58px;
  text-align: center;
  border-bottom: 1px solid var(--border-2);
}
.page-banner__inner { position: relative; z-index: 2; }
.page-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 38px); font-weight: 800;
  color: var(--brand-blue); letter-spacing: .12em; margin: 0 0 8px;
}
.page-banner__sub { font-size: 14px; color: var(--muted); margin: 0; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green-600); }
.breadcrumb .sep { margin: 0 .5em; color: var(--muted-2); }

/* ==========================================================================
   Tabs (活动 / 新闻)
   ========================================================================== */
.tabs { border-bottom: 1px solid var(--border); margin-bottom: 34px; }
.tabs__list { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; }
.tabs__btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-cjk); font-size: 15px; font-weight: 500;
  color: var(--muted); padding: 0 2px 14px; position: relative;
  transition: color .18s ease;
}
.tabs__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 2px; background: var(--green-500);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.tabs__btn:hover { color: var(--green-600); }
.tabs__btn[aria-selected="true"] { color: var(--green-600); font-weight: 700; }
.tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel[hidden] { display: none; }

/* ==========================================================================
   List rows (event list / news list)
   ========================================================================== */
.row-list { display: flex; flex-direction: column; gap: 18px; }
.row-item {
  display: grid; grid-template-columns: 290px 1fr; gap: 26px;
  align-items: center;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.row-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--green-200);
}
.row-item--no-media { grid-template-columns: 1fr; }
.row-item__media {
  aspect-ratio: 16 / 10; border-radius: var(--radius);
  overflow: hidden; background: var(--green-50); box-shadow: var(--shadow-sm);
}
.row-item__media img, .row-item__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.row-item:hover .row-item__media img { transform: scale(1.04); }
.row-item__title { font-size: 20px; margin: 0 0 12px; letter-spacing: .02em; }
.row-item__title a { color: var(--ink); }
.row-item__title a:hover { color: var(--green-600); }
.row-item__excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.9; margin: 10px 0 0; }
.row-item__actions { margin-top: 16px; }
.row-item__date { font-size: 13px; color: var(--muted-2); }

.list-footer { text-align: center; padding-top: 34px; border-top: 1px solid var(--border-2); margin-top: 6px; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-split__media { margin: 0; }
.about-split__media img, .about-split__media svg {
  border-radius: var(--radius); box-shadow: var(--shadow); width: 100%;
}
.founder-credit {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: .6em; margin-top: 14px; padding-right: 2px;
}
.founder-credit__name {
  font-family: var(--font-cjk); font-size: 15px; font-weight: 700; color: var(--ink);
}
.founder-credit__role { font-size: 13px; color: var(--muted); }
.about-split__body p { font-size: 14px; color: var(--muted); line-height: 2; }

.mission { display: grid; grid-template-columns: repeat(4, 1fr); }
.mission__item { text-align: center; padding: 0 20px; position: relative; }
.mission__item + .mission__item::before {
  content: ""; position: absolute; left: 0; top: 6%; bottom: 6%;
  width: 1px; background: var(--border);
}
.mission__icon { color: var(--green-500); width: 42px; height: 42px; margin: 0 auto 16px; }
.mission__icon svg { width: 100%; height: 100%; }
.mission__item h3 { font-size: 16px; margin-bottom: .55em; }
.mission__item p { font-size: 13px; color: var(--muted); line-height: 1.9; margin: 0; }

/* ==========================================================================
   Join page
   ========================================================================== */
.join-split {
  display: grid; grid-template-columns: 320px minmax(0, 660px); gap: 64px;
  align-items: stretch;
}
.join-split__aside { position: relative; }
.join-split__aside::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -32px;
  width: 1px; background: var(--border);
}
.benefits { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.benefits li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-2); }
.benefits__icon {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
  border-radius: 50%;
}
.benefits__icon svg { width: 18px; height: 18px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-title { font-family: var(--font-serif); font-size: 21px; color: var(--brand-blue); margin-bottom: 26px; letter-spacing: .04em; }

.field { margin-bottom: 20px; }
.field__label {
  display: block; font-family: var(--font-cjk);
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.field__label .req { color: var(--danger); margin-left: 3px; font-weight: 700; }

.input, .select, .textarea {
  width: 100%; display: block;
  padding: 12px 14px;
  font-family: var(--font); font-size: 14px; color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--green-400);
  box-shadow: 0 0 0 3px rgba(111,174,58,.16);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.75; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
  padding-right: 40px; cursor: pointer;
}

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.checkbox input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--green-600); flex: 0 0 16px; }

.form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.notice {
  padding: 14px 18px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 24px; border: 1px solid transparent;
}
.notice--ok { background: var(--green-50); border-color: var(--green-200); color: var(--green-800); }
.notice--err { background: #fdf1f0; border-color: #f0c8c4; color: #8f2c22; }
.field--error .input, .field--error .select { border-color: #d9807a; }
.field__error { display: block; font-size: 12.5px; color: var(--danger); margin-top: 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
#main { flex: 1 0 auto; }

/* Tinted like the association's own footer, so it reads as the end of the page
   rather than as another white content card. */
.site-footer {
  flex-shrink: 0;
  /* Darker muted tone: the default #5f74a4 only reached 3.95:1 on this band. */
  --muted: #465a8c;
  --muted-2: #55689a;
  background: var(--band-blue);
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr .9fr .9fr 1.2fr; gap: 44px;
  padding-bottom: 40px;
}
.footer-about__text { font-size: 13px; color: var(--muted); line-height: 1.95; margin-top: 18px; }
/* The footer column is narrower than the header, so the wordmark steps down
   rather than wrapping onto two lines. */
.site-footer .brand__cn { font-size: 17px; }
.site-footer .brand__en { font-size: 8px; }
.site-footer .brand__mark { width: 46px; height: 46px; flex-basis: 46px; }
.footer-col__title { font-size: 15px; margin-bottom: 18px; letter-spacing: .04em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: 13.5px; color: var(--muted); }
.footer-links a:hover { color: var(--green-600); }

.socials { display: flex; gap: 12px; }
.social {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--muted);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.social svg { width: 17px; height: 17px; }
.social:hover { background: var(--green-500); color: #fff; transform: translateY(-2px); }

.footer-contact { margin-top: 22px; }
.footer-contact li { font-size: 13px; color: var(--muted); line-height: 1.7; }
.socials { flex-wrap: wrap; }
.footer-bottom__credit { font-size: 12.5px; color: var(--muted-2); }

.subscribe__text { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.subscribe__form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.subscribe__form .input { padding: 11px 13px; font-size: 13.5px; background: #fff; }
.subscribe__form .btn { align-self: flex-end; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  font-size: 12.5px; color: var(--muted-2);
}
.footer-bottom a { color: var(--muted-2); }
.footer-bottom a:hover { color: var(--green-600); }
.footer-bottom__legal { display: flex; gap: 14px; align-items: center; }
.footer-bottom__legal .sep { color: var(--border); }

/* ==========================================================================
   Article / editor content
   ========================================================================== */
.entry { max-width: 780px; margin: 0 auto; }
.entry__title { font-size: 30px; letter-spacing: .02em; }
.entry__meta { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.entry__media { margin: 0 0 30px; border-radius: var(--radius); overflow: hidden; }
.entry__content { font-size: 15px; line-height: 2; color: var(--ink-2); }
.entry__content h2 { font-size: 22px; margin-top: 1.8em; }
.entry__content h3 { font-size: 18px; margin-top: 1.6em; }
.entry__content img { border-radius: var(--radius); margin: 1.6em 0; }
.entry__content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--green-400); color: var(--muted);
}
.entry__content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.entry__content th, .entry__content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.entry__content th { background: var(--green-25); }
.entry__content code {
  background: var(--green-25); padding: .15em .45em; border-radius: 4px; font-size: .9em;
}
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: .6em; }

.event-map { margin: 34px 0 0; }
.event-map iframe {
  width: 100%; height: 360px; border: 0; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: var(--green-25);
}
.event-map__link { margin: 12px 0 0; font-size: 13.5px; }
@media (max-width: 680px) { .event-map iframe { height: 260px; } }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2); background: #fff;
}
.pagination .page-numbers:hover { border-color: var(--green-400); color: var(--green-600); }
.pagination .page-numbers.current { background: var(--green-600); border-color: var(--green-600); color: #fff; }




/* Membership tiers + member cards -------------------------------------- */
.section-sub { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.section-head--center .section-sub { text-align: center; }

.tier {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 26px 30px;
  text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.tier__icon {
  width: 62px; height: 62px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-50); color: var(--green-600);
}
.tier__icon svg { width: 30px; height: 30px; }
.tier__title { font-size: 20px; margin-bottom: .6em; }
.tier__text { font-size: 14px; color: var(--muted); line-height: 1.9; margin: 0; }

.member-grid { gap: 16px; }
.directory-label {
  margin: 30px 0 16px; text-align: center;
  font-family: var(--font-cjk); font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.directory-label::before,
.directory-label::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 30px; height: 1px; background: var(--border); margin: 0 14px;
}
.member-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 18px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  position: relative; text-decoration: none; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.member-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: #c8102e; transform: scaleY(0); transform-origin: top;
  transition: transform .3s ease;
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #e2b3bb; }
.member-card:hover::before { transform: scaleY(1); }
.member-card__mono {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-cjk); font-weight: 700;
  font-size: 20px; line-height: 1; color: #c8102e;
  background: #fdeef0; border: 1px solid #f6d7dc;
  transition: background .25s ease, transform .25s ease;
}
.member-card:hover .member-card__mono { background: #fbe0e4; transform: scale(1.05); }
.member-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.member-card__name {
  font-family: var(--font-cjk); font-size: 17px; font-weight: 700;
  color: #c8102e; letter-spacing: .02em;
}
.member-card__en { font-size: 12px; color: var(--muted-2); letter-spacing: .01em; }
.member-card__meta { font-size: 12.5px; color: var(--muted); }
.member-card__addr {
  font-size: 12px; color: var(--muted-2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.member-card__go {
  margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-blue);
  opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
.member-card:hover .member-card__go { opacity: 1; transform: translateX(3px); }
.vp-scaled .tier__title { font-size: 24px; }
.vp-scaled .tier__text { font-size: 18px; }
.vp-scaled .member-card__name { font-size: 21px; }
.vp-scaled .section-sub { font-size: 18px; }

/* Accordion ------------------------------------------------------------ */
.accordion { display: flex; flex-direction: column; gap: 14px; }
.accordion__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.accordion__item[open] { border-color: var(--green-200); box-shadow: var(--shadow); }
.accordion__head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; cursor: pointer;
  font-family: var(--font-cjk); font-size: 17px; font-weight: 700;
  color: var(--brand-blue);
  list-style: none;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { background: var(--green-25); }
.accordion__icon {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
  border-radius: 50%;
}
.accordion__icon svg { width: 20px; height: 20px; }
.accordion__icon--mono {
  font-family: var(--font-cjk); font-size: 19px; font-weight: 700;
  line-height: 1; border-radius: 13px;
}
.accordion__item--accent .accordion__icon {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
}
.accordion__item--accent .accordion__head { color: var(--accent); }
.accordion__item--accent[open] { border-color: color-mix(in srgb, var(--accent) 38%, #fff); }
.accordion__item--accent .accordion__chevron {
  border-right-color: var(--accent); border-bottom-color: var(--accent);
}
@supports not (color: color-mix(in srgb, red 50%, #fff)) {
  .accordion__item--accent .accordion__icon { background: var(--green-50); color: var(--accent); }
}
.accordion__title { flex: 1 1 auto; }
.accordion__chevron {
  flex: 0 0 12px; width: 12px; height: 12px;
  border-right: 2px solid var(--green-500);
  border-bottom: 2px solid var(--green-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.accordion__item[open] .accordion__chevron { transform: rotate(225deg) translate(-3px, -3px); }

/* Height is animated by the script; the closed state still hides content
   without it because <details> collapses natively. */
.accordion__panel { overflow: hidden; }
.js-accordion .accordion__panel {
  height: 0;
  transition: height .42s cubic-bezier(.22,.61,.36,1);
}
.js-accordion .accordion__item[open] .accordion__panel { height: auto; }
.accordion__inner { padding: 2px 22px 22px 74px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.accordion__inner p:last-child { margin-bottom: 0; }
.accordion__inner a { font-weight: 600; }
@media (max-width: 680px) { .accordion__inner { padding-left: 22px; } }
.vp-scaled .accordion__head { font-size: 21px; }
.vp-scaled .accordion__inner { font-size: 18px; }

.cuisine__photo {
  width: 100%; height: auto; border-radius: var(--radius);
  margin-bottom: 4px; box-shadow: var(--shadow-sm);
}
.cuisine__dishes { color: var(--ink-2); }

/* Member restaurant detail --------------------------------------------- */
.member-detail { display: grid; grid-template-columns: 1fr 340px; gap: 46px; align-items: start; }
.member-detail__cuisine {
  display: inline-block; margin: 0 0 18px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--green-50); color: var(--green-700);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.member-detail__owner {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-2);
  display: flex; align-items: baseline; gap: .8em;
}
.member-detail__owner-label { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.member-detail__owner-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--brand-blue); }
.member-detail__facts {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.member-detail__facts-title { font-size: 17px; margin-bottom: 18px; }
.fact-list { margin: 0; }
.fact-list dt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); letter-spacing: .08em; margin-top: 16px;
}
.fact-list dt:first-child { margin-top: 0; }
.fact-list dt svg { width: 15px; height: 15px; color: var(--green-500); }
.fact-list dd { margin: 5px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 900px) { .member-detail { grid-template-columns: 1fr; gap: 28px; } }

/* ==========================================================================
   Motion
   Scroll-triggered reveals matching the association's current site, which
   uses ~1.2s float-in / fade-in entrances. Elements start hidden only when
   the script is running, so the page stays readable without JavaScript.
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.2s cubic-bezier(.22,.61,.36,1),
              transform 1.2s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Hero copy arrives on load rather than on scroll. */
.js-reveal .hero__lines > *,
.js-reveal .hero__seal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: accca-float-in 1.35s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
.js-reveal .hero__seal {
  transform: translate3d(0, 0, 0) scale(.92);
  animation-name: accca-expand-in;
}
@keyframes accca-float-in {
  to { opacity: 1; transform: none; }
}
@keyframes accca-expand-in {
  to { opacity: 1; transform: scale(1); }
}


/* Text-level motion, echoing the association's own site where headings and
   copy animate rather than just the blocks around them. Each of these is
   decorative: if a property is unsupported the element is still fully
   visible, it simply does not move. */

/* Section headings wipe in from the left. */
.js-reveal .section-title { overflow: hidden; }
.js-reveal .reveal .section-title,
.js-reveal .section-head.reveal .section-title { }

/* The rule under a heading draws itself. */
.js-reveal .section-head--center .section-title::after,
.js-reveal .section-title--rule::after {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1) .25s;
}
.js-reveal .is-in .section-title::after,
.js-reveal .section-head.is-in .section-title::after,
.js-reveal .is-in.section-title::after { transform: scaleX(1); }

/* Icons settle into place. */
.js-reveal .feature-card__icon,
.js-reveal .mission__icon,
.js-reveal .stat__icon,
.js-reveal .benefits__icon {
  transform: scale(.72); opacity: 0;
  transition: transform 1s cubic-bezier(.34,1.4,.5,1) .18s, opacity .8s ease .18s;
}
.js-reveal .is-in .feature-card__icon,
.js-reveal .is-in .mission__icon,
.js-reveal .is-in .stat__icon,
.js-reveal .is-in.benefits__icon .benefits__icon,
.js-reveal .is-in .benefits__icon { transform: scale(1); opacity: 1; }

/* Body copy inside articles and page content rises a little too. */
.js-reveal .reveal-text {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              transform 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal-text.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal-text { opacity: 1; transform: none; transition: none; }
  .js-reveal .feature-card__icon,
  .js-reveal .mission__icon,
  .js-reveal .stat__icon,
  .js-reveal .benefits__icon { opacity: 1; transform: none; transition: none; }
  .js-reveal .section-head--center .section-title::after,
  .js-reveal .section-title--rule::after { transform: scaleX(1); transition: none; }
}

/* Member marquee ------------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: accca-marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee__item {
  font-family: var(--font-cjk); font-size: 19px; font-weight: 700;
  /* Red, matching the crest — the association asked for these to stand apart
     from the blue interface. */
  color: #c8102e; white-space: nowrap;
  padding: 0 34px; display: inline-flex; align-items: center; gap: 34px;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
a.marquee__item:hover { color: #8f0b20; transform: translateY(-2px); }
.marquee__item::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-200); flex: 0 0 6px;
}
@keyframes accca-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .js-reveal .hero__lines > *,
  .js-reveal .hero__seal { opacity: 1; transform: none; animation: none; }
  .marquee__track { animation: none; }
  /* With the animation off the second half of the list would be unreachable,
     so let the row scroll by hand instead. */
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}



/* Continuous motion ---------------------------------------------------- */

/* Drifting leaves over the banner, as on the association's own artwork. */
.hero__leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hero__leaves i {
  position: absolute; display: block;
  width: 34px; height: 34px; opacity: .75;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M34 6C20 6 8 12 6 26c-.6 4.4 1.4 7 5 8 8-14 14-18 21-21-6 4-11 9-15 17 8 1 14-2 17-8 3-6 2-13 0-16Z' fill='%237cb750'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .hero__leaves i { animation: accca-drift linear infinite; }
}
@keyframes accca-drift {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translate3d(-140px, 105vh, 0) rotate(320deg); opacity: 0; }
}

/* Header condenses once the page scrolls. */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-stuck { box-shadow: 0 4px 18px rgba(34, 38, 43, .09); }
.site-header .brand__mark,
.site-header__inner { transition: min-height .28s ease, width .28s ease, height .28s ease; }
.site-header.is-stuck .site-header__inner { min-height: 68px; }
.site-header.is-stuck .brand__mark { width: 44px; height: 44px; flex-basis: 44px; }
.vp-scaled .site-header.is-stuck .site-header__inner { min-height: 92px; }
.vp-scaled .site-header.is-stuck .brand__mark { width: 62px; height: 62px; flex-basis: 62px; }

/* Counter keeps a stable width while it ticks up. */
.stat__num { font-variant-numeric: tabular-nums; }

/* Banner photo drifts a little as the page scrolls. */
.hero__bg { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero__leaves i { animation: none; }
}

/* ==========================================================================
   Phones showing the tablet layout
   The viewport is widened to the tablet width and the browser scales the page
   down, so type is nudged up to stay legible. Kept deliberately modest: going
   much larger makes the wordmark eat the full width and crowds every card.
   To trade layout for legibility, lower 手机最小渲染宽度 in the Customizer —
   a smaller canvas is scaled down less, so the same text reads larger.
   ========================================================================== */
/* Entrance animations run here too. The page is zoomed out on a phone, which
   makes intersection thresholds less predictable, so the script carries three
   independent fallbacks (immediate in-view pass, scroll backstop, and a
   timeout) to guarantee nothing is ever left invisible. Distances are shorter
   because the whole page is scaled down. */
.vp-scaled .reveal { transform: translate3d(0, 18px, 0); }

.vp-scaled body { font-size: 19px; line-height: 1.72; }

.vp-scaled .brand__cn { font-size: 26px; }
.vp-scaled .brand__en { font-size: 11px; }
.vp-scaled .brand__mark { width: 62px; height: 62px; flex-basis: 62px; }
.vp-scaled { --header-h: 94px; }
.vp-scaled .nav-toggle { width: 48px; height: 48px; }
.vp-scaled .nav-toggle svg { width: 29px; height: 29px; }
.vp-scaled .site-nav a:not(.btn) { font-size: 19px; padding: 15px 0; }
.vp-scaled .lang-switch { font-size: 17px; }

.vp-scaled .btn { font-size: 17px; }
.vp-scaled .btn--sm { font-size: 16px; }
.vp-scaled .arrow-link { font-size: 17px; }

.vp-scaled .hero__brush { font-size: 58px; }
.vp-scaled .hero__title { font-size: 40px; }
.vp-scaled .hero__sub { font-size: 18px; }

.vp-scaled .section-title { font-size: 31px; }
.vp-scaled .page-banner__title { font-size: 38px; }
.vp-scaled .breadcrumb, .vp-scaled .page-banner__sub { font-size: 17px; }

.vp-scaled .feature-card h3 { font-size: 21px; }
.vp-scaled .feature-card p { font-size: 17px; }
.vp-scaled .feature-card__icon { width: 48px; height: 48px; }

.vp-scaled .event-card__title { font-size: 21px; }
.vp-scaled .meta-row { font-size: 17px; }
.vp-scaled .meta-row svg { width: 19px; height: 19px; flex-basis: 19px; }

.vp-scaled .row-item__title { font-size: 24px; }
.vp-scaled .row-item__excerpt, .vp-scaled .row-item__date { font-size: 17px; }
.vp-scaled .tabs__btn { font-size: 19px; }

.vp-scaled .cta-band__title { font-size: 29px; }
.vp-scaled .cta-band__text { font-size: 17px; }
.vp-scaled .stat__num { font-size: 38px; }
.vp-scaled .stat__label { font-size: 15px; }
.vp-scaled .stat__icon { width: 36px; height: 36px; }

.vp-scaled .marquee__item { font-size: 23px; }
.vp-scaled .mission__item h3 { font-size: 20px; }
.vp-scaled .mission__item p { font-size: 17px; }
.vp-scaled .benefits li { font-size: 17px; }
.vp-scaled .benefits__icon { flex-basis: 40px; width: 40px; height: 40px; }
.vp-scaled .benefits__icon svg { width: 21px; height: 21px; }

.vp-scaled .form-title { font-size: 25px; }
.vp-scaled .field__label { font-size: 17px; }
.vp-scaled .input, .vp-scaled .select, .vp-scaled .textarea { font-size: 17px; padding: 14px 16px; }
.vp-scaled .checkbox { font-size: 17px; }
.vp-scaled .checkbox input { width: 20px; height: 20px; flex-basis: 20px; }
.vp-scaled .form-note { font-size: 15px; }

.vp-scaled .footer-col__title { font-size: 19px; }
.vp-scaled .footer-links a { font-size: 17px; }
.vp-scaled .footer-about__text, .vp-scaled .subscribe__text,
.vp-scaled .footer-contact li { font-size: 17px; }
.vp-scaled .footer-bottom, .vp-scaled .footer-bottom__credit { font-size: 16px; }
.vp-scaled .social { width: 44px; height: 44px; }
.vp-scaled .social svg { width: 21px; height: 21px; }

.vp-scaled .entry__content { font-size: 19px; }
.vp-scaled .entry__title { font-size: 32px; }
.vp-scaled .founder-credit__name { font-size: 19px; }
.vp-scaled .founder-credit__role { font-size: 17px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1260px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cta-band { grid-template-columns: 1fr; padding: 36px 32px; }
  .join-split { grid-template-columns: 1fr; gap: 40px; }
  .join-split__aside::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 90;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .site-nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .site-nav li { border-bottom: 1px solid var(--border-2); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a:not(.btn) { padding: 14px 0; font-size: 15px; }
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; gap: 0; }
  /* The design's mobile header is just the wordmark and the menu button;
     EN and 加入我们 move inside the nav panel instead. */
  .header-actions .lang-switch,
  .header-actions .btn { display: none; }
  .site-nav__extra {
    display: flex; flex-direction: column; gap: 14px; align-items: stretch;
    padding: 18px 24px 22px; border-top: 1px solid var(--border-2);
  }
  .site-nav__extra .lang-switch { text-align: center; padding: 6px 0; }

  .grid--3 { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .mission { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .mission__item:nth-child(3)::before { display: none; }
  .row-item:not(.row-item--no-media) { grid-template-columns: 220px 1fr; gap: 22px; }
  .hero { min-height: 520px; }
}

@media (max-width: 680px) {
  .wrap { padding: 0 18px; }
  .section { padding: 46px 0; }
  .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .features { padding-top: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .stat:nth-child(3)::before { display: none; }
  .mission { grid-template-columns: 1fr; }
  .mission__item + .mission__item::before { display: none; }
  .row-item:not(.row-item--no-media) { grid-template-columns: 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .tabs__list { gap: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero__brush { letter-spacing: .06em; }
  .brand__mark { width: 34px; height: 34px; flex-basis: 34px; }
  .brand__cn { font-size: 16px; letter-spacing: .02em; }
  .brand__en { display: none; }
  .hero__content--right { display: block; }
  /* Container is block here, so the crest simply leads in source order. */
  .hero__content--right .hero__seal {
    width: min(var(--seal-size, 191px), 46vw);
    margin: 0 0 22px;
  }
  .hero__content--side { display: block; }
  .hero__content--side .hero__seal,
  .hero__content--stacked .hero__seal { width: 76px; margin-bottom: 16px; }
  .hero__content--inline .hero__seal { width: 60px; margin-right: 14px; }
  .cta-band { padding: 30px 22px; }
  .entry__title { font-size: 24px; }
}

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

@media print {
  .site-header, .site-footer, .hero__actions, .nav-toggle { display: none !important; }
  body { background: #fff; }
}


/* Cuisine panels ------------------------------------------------------- */
.cuisine__photo {
  width: 100%; height: auto; border-radius: var(--radius);
  display: block; margin-bottom: 4px;
}
.cuisine-panel { position: relative; }
.cuisine-panel__mark {
  position: absolute; right: 6px; top: -14px;
  font-family: var(--font-cjk); font-size: 92px; font-weight: 700;
  line-height: 1; color: var(--accent, var(--brand-blue)); opacity: .07;
  pointer-events: none; user-select: none;
}
.cuisine-panel__text { position: relative; margin: 0 0 16px; max-width: 62ch; }
.cuisine-panel__label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 10px;
}
.cuisine-panel__dishes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cuisine-panel__dishes li {
  font-family: var(--font-cjk); font-size: 13.5px; font-weight: 600;
  color: var(--accent, var(--brand-blue));
  background: var(--green-25); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
}
.vp-scaled .cuisine-panel__dishes li { font-size: 17px; }
.vp-scaled .accordion__icon--mono { font-size: 23px; }