/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/scss/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Moca — front-end styles entry point.
 *
 * This file is a manifest only — it @use's partials in cascade order and
 * holds no rules of its own. Add new partials to the matching folder
 * (utils/ for mixins/functions with no CSS output of their own —
 * see mixins.scss, base/ for resets & global rules, components/ for
 * reusable pieces used by more than one block/template-part, layout/
 * for header/footer/site chrome, pages/ for template-specific overrides
 * that don't belong in a component) and @use them here in the right
 * position — don't let rules accumulate directly in this file as the
 * design grows.
 *
 * utils/mixins isn't @use'd here — it produces no CSS by itself, so
 * only the individual partials that actually call mixins.breakpoint()/
 * mixins.responsive-clamp() need `@use "../utils/mixins";` (Sass
 * modules are file-scoped; there's no global @import).
 *
 * ACF Blocks: this project has only one compiled stylesheet (enqueued via
 * inc/enqueue.php as assets/css/global.css — no per-block webpack/wp-scripts
 * entries are configured), so a block's styling must be @use'd from here to
 * ever ship. Give each block its own partial under components/ (named after
 * the block slug, e.g. components/_hero.scss for acf/hero) and add the
 * @use line below — do NOT put a block's style.scss next to its block.json
 * expecting it to be picked up automatically; nothing compiles that path.
 */
/**
 * Moca — minimal reset.
 *
 * Deliberately small: WordPress core/Gutenberg already normalizes a lot,
 * and theme.json's `styles` already sets base color/typography. This only
 * covers the handful of things that consistently need resetting.
 */
:root {
  --moca-container-max: 1440px;
  --moca-container-pad: 40px;
}

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

body {
  margin: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--wp--preset--color--moca-red, #b45b38);
}

[id] {
  scroll-margin-top: calc(var(--moca-header-bar-height, 76px) + 24px + var(--moca-sticky-header-offset, 0px));
}

.wpml-ls-statics-footer {
  display: none !important;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — shared Sass mixins/functions.
 *
 * @use this file from any partial that needs it — Sass modules are
 * file-scoped, there is no global `@import` — e.g.:
 *   @use "../utils/mixins";
 *   .thing { @include mixins.breakpoint(tablet) { ... } }
 * The module name is "mixins" automatically (the filename minus the
 * leading underscore/extension); no `as mixins` alias needed.
 */
/**
 * Named breakpoint map (min-width, mobile-first).
 *
 * These are STARTING DEFAULTS, not fixed values — replace them with the
 * project's actual measured breakpoints once figma-analyzer has
 * documented them in FIGMA-SPEC.md (see the figma-to-wordpress skill).
 * Don't assume any name maps to a "round" number: `desktop` and
 * `tabletLarge` are deliberately close together (1025px vs 992px) and are
 * NOT interchangeable — pick the one the design actually uses at each
 * call site, and if JS also needs to gate behavior at the same point
 * (e.g. `matchMedia`), match the exact pixel value used here, not a
 * rounded guess.
 */
/**
 * Emit `@content` inside a `min-width` media query for a named breakpoint.
 *
 * @param {String} $name - a key in $breakpoints (e.g. `tablet`, `desktop`).
 */
/**
 * Build a `clamp()` expression that linearly interpolates between $size1
 * (at $min-width) and $size2 (at $max-width) — for font-size, padding,
 * margin, width, gap, or any numeric value that should scale smoothly
 * with viewport width instead of jumping at breakpoints.
 *
 * $size1/$size2 are NOT arbitrary — they must be the actual values
 * measured from the Figma design's mobile frame and desktop frame for
 * this exact property (figma-analyzer should record both numbers in
 * FIGMA-SPEC.md/the design-tokens table, not just one "the font size").
 * $min-width/$max-width usually stay at the project-wide defaults below
 * unless the design specifies different scaling boundaries.
 *
 * @param {Number} $size1 - value at $min-width (e.g. the mobile-frame measurement).
 * @param {Number} $size2 - value at $max-width (e.g. the desktop-frame measurement).
 * @param {Number} $min-width - viewport width $size1 applies at. Default 768px.
 * @param {Number} $max-width - viewport width $size2 applies at. Default 1600px.
 * @return {String} an unquoted `clamp(...)` expression — wrap call sites in
 *   `# {}` (no space in real usage) for consistent behavior in both plain
 *   property values and inside an enclosing calc().
 */
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Roman"), local("HelveticaNeue-Roman"), local("Helvetica Neue"), local("HelveticaNeue"), url(fonts/HelveticaNeueRoman.5df7786b.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Helvetica Neue"), local("HelveticaNeue"), url(fonts/HelveticaNeueMedium.8df0e0e3.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Italic"), local("HelveticaNeue-Italic"), url(fonts/HelveticaNeueItalic.0d22fb4c.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Medium Italic"), local("HelveticaNeue-MediumItalic"), url(fonts/HelveticaNeueMediumItalic.e8ddf10a.woff2) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url(fonts/FragmentMono-Regular.0fadcb7c.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url(fonts/FragmentMono-Italic.ba37e313.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Cabin;
  src: url(fonts/Cabin-Regular.95b8398a.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PingFang HK";
  src: local("PingFang HK"), local("PingFangHK-Regular"), local("PingFangHK"), url(fonts/ee5e0963d4f220cba32a5765cc4f9772.4c491971.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PingFang HK";
  src: local("PingFang HK Medium"), local("PingFangHK-Medium"), url(fonts/ee5e0963d4f220cba32a5765cc4f9772.4c491971.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: var(--wp--preset--font-family--primary), "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

[lang=zh-Hant],
[class*=__heading-zh],
[class*=__title-zh],
.moca__heading-zh {
  font-family: var(--wp--preset--font-family--pingfang-hk), "PingFang HK", "PingFang SC", "Noto Sans TC", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 0.5em;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-block: 0 1em;
  font-weight: 400;
  line-height: 1.3;
}
@media (min-width: 768px) {
  p {
    line-height: 1.4;
  }
}

strong,
b {
  font-weight: 500;
}

.has-body-xl-font-size {
  line-height: normal;
}

.has-body-large-font-size {
  line-height: 1.4;
}

.has-body-regular-font-size {
  line-height: 1.3;
}

.has-body-small-font-size {
  line-height: 1.2;
}

.has-body-xs-font-size {
  line-height: 1.1;
}

.has-button-regular-font-size,
.has-button-small-font-size,
.has-links-regular-font-size,
.has-links-small-font-size {
  font-weight: 500;
  line-height: 1.1;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — small, generic utility classes used across templates.
 * Keep this file short; a utility that only one component needs belongs
 * in that component's own partial instead.
 */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal !important;
  clip-path: inset(50%);
}

.moca-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.5em 1em;
  background: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--brown, #111);
}
.moca-skip-link:focus {
  position: fixed;
  left: 0;
  top: var(--moca-sticky-header-offset, 0px);
}

.moca-container {
  max-width: var(--moca-container-max, 1440px);
  margin-inline: auto;
  padding-inline: clamp(12px, -13.8461538462px + 3.3653846154vw, 40px);
}

[class*=__heading-zh],
.moca__heading-zh {
  color: var(--wp--preset--color--moca-red);
  font-weight: 400;
}

/**
 * Block editor canvas only. `.editor-styles-wrapper` is injected by
 * WordPress around the iframed post editor (WP 7.1) and does not exist
 * on the front end, so these rules never apply to the live site.
 *
 * ACF block previews render real `<a href>` markup; without this, a
 * click leaves the editor. Disable pointer events on those links so
 * the block stays selectable.
 */
.editor-styles-wrapper .wp-block[data-type^="acf/"] a,
.editor-styles-wrapper .acf-block-preview a {
  pointer-events: none;
}

/**
 * Moca — site-wide scroll motion: smooth scrolling + slow dissolve-from-
 * bottom section reveals.
 *
 * Pairs with src/js/motion.js, which is the only thing that ever adds
 * `.moca-reveal`/`.is-revealed` to the DOM (no markup here is hidden by
 * default) — a no-JS visitor always sees full, static content, and a
 * `prefers-reduced-motion: reduce` visitor never gets the class added in
 * the first place (see that file's `prefersReducedMotion()` guard), so the
 * `@media` block below is a belt-and-suspenders second guard rather than
 * the only thing preventing motion.
 *
 * Per FIGMA-SPEC.md's Animation reference Dev Note: "slow dissolve from
 * bottom... Minimal motion — audience skews older" — kept intentionally
 * subtle (small Y offset, no scale/rotation, no bounce/overshoot easing).
 */
:root {
  --moca-reveal-duration: 1.1s;
  --moca-reveal-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --moca-reveal-offset: 32px;
  --moca-reveal-delay: 0ms;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/**
 * Applied by src/js/motion.js to every section wrapper / opted-in element
 * before it's handed to the IntersectionObserver. Starts dissolved out
 * and offset downward; `.is-revealed` (added once, on first intersection)
 * animates it in. `transform`/`opacity` only, so this stays compositor-
 * only work — no layout thrashing on scroll.
 */
.moca-reveal {
  opacity: 0;
  transform: translateY(var(--moca-reveal-offset));
  transition: opacity var(--moca-reveal-duration) var(--moca-reveal-easing) var(--moca-reveal-delay), transform var(--moca-reveal-duration) var(--moca-reveal-easing) var(--moca-reveal-delay);
  will-change: opacity, transform;
}
.moca-reveal.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/**
 * Applied by `initAnimateImages()` in src/js/scripts.js to `<img>`
 * elements as they enter the viewport — independent of `.moca-reveal`
 * on a parent section. Starts clipped from the bottom; `.inView` wipes
 * the image in. JS waits until the image has actually loaded so native
 * `loading="lazy"` (and plugin lazy-load) don't fire the wipe on an
 * empty box. Skip with `data-animate` on the img.
 */
/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
.gform_wrapper.gravity-theme .gform_validation_errors {
  padding-block: 10px 0 !important;
  padding-inline-end: 5px !important;
  margin-block-end: 15px !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors > ol {
  margin-block: 0 14px !important;
}
.gform_wrapper.gravity-theme .validation_message,
.gform_wrapper.gravity-theme .gform_heading {
  display: none;
}
.gform_wrapper.gravity-theme#gform_wrapper_2 .gform_validation_errors,
.gform_wrapper.gravity-theme#gform_wrapper_2 .validation_message,
.gform_wrapper.gravity-theme#gform_wrapper_2 .gform_heading {
  display: block;
}
.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email] {
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--30, 8px);
  padding: 7px 12px 5px !important;
  color: var(--wp--preset--color--brown);
  border: 1px solid var(--wp--preset--color--brown);
  background: #fff;
  font-size: 16px !important;
}
.gform_wrapper.gravity-theme input[type=color]::placeholder,
.gform_wrapper.gravity-theme input[type=date]::placeholder,
.gform_wrapper.gravity-theme input[type=datetime-local]::placeholder,
.gform_wrapper.gravity-theme input[type=datetime]::placeholder,
.gform_wrapper.gravity-theme input[type=email]::placeholder,
.gform_wrapper.gravity-theme input[type=month]::placeholder,
.gform_wrapper.gravity-theme input[type=number]::placeholder,
.gform_wrapper.gravity-theme input[type=password]::placeholder,
.gform_wrapper.gravity-theme input[type=search]::placeholder,
.gform_wrapper.gravity-theme input[type=tel]::placeholder,
.gform_wrapper.gravity-theme input[type=text]::placeholder,
.gform_wrapper.gravity-theme input[type=time]::placeholder,
.gform_wrapper.gravity-theme input[type=url]::placeholder,
.gform_wrapper.gravity-theme input[type=week]::placeholder,
.gform_wrapper.gravity-theme input[type=text]::placeholder,
.gform_wrapper.gravity-theme input[type=email]::placeholder {
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .gform_wrapper.gravity-theme input[type=color],
  .gform_wrapper.gravity-theme input[type=date],
  .gform_wrapper.gravity-theme input[type=datetime-local],
  .gform_wrapper.gravity-theme input[type=datetime],
  .gform_wrapper.gravity-theme input[type=email],
  .gform_wrapper.gravity-theme input[type=month],
  .gform_wrapper.gravity-theme input[type=number],
  .gform_wrapper.gravity-theme input[type=password],
  .gform_wrapper.gravity-theme input[type=search],
  .gform_wrapper.gravity-theme input[type=tel],
  .gform_wrapper.gravity-theme input[type=text],
  .gform_wrapper.gravity-theme input[type=time],
  .gform_wrapper.gravity-theme input[type=url],
  .gform_wrapper.gravity-theme input[type=week],
  .gform_wrapper.gravity-theme input[type=text],
  .gform_wrapper.gravity-theme input[type=email] {
    padding: 11px 12px 10px !important;
  }
}
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea button,
.gform_wrapper.gravity-theme input[type=submit] {
  padding: 11px 12px;
  border: 1px solid var(--wp--preset--color--brown);
  background-color: transparent;
  color: var(--wp--preset--color--moca-brown);
  font-weight: 500;
  cursor: pointer;
}
.gform_wrapper.gravity-theme .gfield_error input {
  border-color: var(--wp--preset--color--moca-red) !important;
}
.gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 12px;
}
@media (min-width: 768px) {
  .gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 16px;
  }
}
.gform_wrapper.gravity-theme .gfield_radio {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.gform_wrapper.gravity-theme .gfield_radio .gchoice {
  position: relative;
}
.gform_wrapper.gravity-theme .moca-large-field input {
  font-size: 30px;
}
.gform_wrapper.gravity-theme .moca-amount-field .gfield-choice-input + label {
  height: 102px;
  width: 105px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 60.71px;
}
@media (max-width: 500px) {
  .gform_wrapper.gravity-theme .moca-amount-field .gfield-choice-input + label {
    width: 100%;
  }
}
@media (max-width: 500px) {
  .gform_wrapper.gravity-theme .moca-amount-field .gfield_radio {
    gap: 14px 22px;
  }
}
@media (max-width: 500px) {
  .gform_wrapper.gravity-theme .moca-amount-field .gfield_radio .gchoice {
    max-width: calc((100% - 22px) / 2);
    width: 100%;
  }
}
.gform_wrapper.gravity-theme .gfield-choice-input {
  position: absolute;
  appearance: none;
}
.gform_wrapper.gravity-theme .gfield-choice-input + label {
  margin-bottom: 0;
  vertical-align: middle;
  padding: 11px;
  border: 1px solid var(--wp--preset--color--brown);
  display: inline-block;
  max-width: unset !important;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.1;
}
.gform_wrapper.gravity-theme .gfield-choice-input:checked + label {
  background-color: var(--wp--preset--color--moca-red);
  border-color: var(--wp--preset--color--moca-red);
  color: #fff;
}
.gform_wrapper.gravity-theme .gform_button {
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--brown);
  background: var(--wp--preset--color--brown);
  padding: 6px 10px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}
.gform_wrapper.gravity-theme .ginput_container_product_calculation .ginput_product_price_label {
  display: none;
}
.gform_wrapper.gravity-theme .ginput_container_product_calculation .ginput_product_price {
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.gform_wrapper.gravity-theme .moca-label-large {
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  text-transform: uppercase;
}
.gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.gform_wrapper.gravity-theme .ginput_container_consent input {
  appearance: none;
  width: 100%;
  height: 16px;
  border: 1px solid #000;
  margin: 3px 0 0;
  max-width: 16px !important;
}
@media (min-width: 768px) {
  .gform_wrapper.gravity-theme .ginput_container_consent input {
    margin: 5px 0 0;
  }
}
.gform_wrapper.gravity-theme .ginput_container_consent input:checked {
  background: var(--wp--preset--color--moca-red);
}
.gform_wrapper.gravity-theme .ginput_container_consent .gform-field-label__text {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.17px;
  text-transform: uppercase;
}
.gform_wrapper.gravity-theme .gform_page_footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.gform_wrapper.gravity-theme .gfield_label {
  font-weight: 400 !important;
  margin-bottom: 10px !important;
  font-size: 18px;
}
.gform_wrapper.gravity-theme .gform_confirmation_message {
  color: var(--wp--preset--color--brown);
  font-size: 18px;
}
@media only screen and (max-width: 641px) {
  .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
    line-height: unset !important;
    min-height: unset !important;
  }
}
.gform_wrapper.gravity-theme .moca-offline-payment input[type=radio] + label {
  padding: 6px 10px;
  border: 1px solid var(--wp--preset--color--moca-red);
  border-radius: 999px;
  background: var(--wp--preset--color--moca-red);
  color: var(--wp--preset--color--white);
  font-weight: 500;
  cursor: pointer;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  text-transform: uppercase;
}
.gform_wrapper.gravity-theme .moca-offline-payment input[type=radio]:checked + label {
  display: none;
}
.gform_wrapper.gravity-theme .moca-hide-price {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.moca-select {
  position: relative;
  width: 100%;
  border: 1px solid var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-select__option {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  color: var(--wp--preset--color--brown);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-user-select: none;
          user-select: none;
  padding: 7px 13px;
}
@media (min-width: 768px) {
  .moca-select__option {
    padding: 10px 13px;
  }
}
.moca-select__option:hover, .moca-select__option:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-select__option--value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 13px;
}
@media (min-width: 768px) {
  .moca-select__option--value {
    padding: 10px 13px;
  }
}
.moca-select__option--value::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 5px;
  background: currentcolor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0.4;
  transition: transform 0.2s ease;
}
.moca-select__placeholder {
  color: rgba(46, 21, 5, 0.4);
}
.moca-select__option--selected {
  color: var(--wp--preset--color--moca-red);
}
.moca-select__dropdown {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  top: 100%;
  left: -1px;
  width: calc(100% + 2px);
  padding-bottom: 2px;
  border: 1px solid var(--wp--preset--color--brown);
  border-top: 0;
  background: var(--wp--preset--color--white);
}
.moca-select__option-wrap {
  position: relative;
}
.moca-select--dropup .moca-select__dropdown {
  top: auto;
  bottom: 100%;
  padding-top: 2px;
  padding-bottom: 0;
  border-top: 1px solid var(--wp--preset--color--brown);
  border-bottom: 0;
}
.moca-select--active .moca-select__option--value::after {
  transform: rotate(180deg);
}

/**
 * Moca — shared button styling.
 *
 * Pill shape per live Figma (border-radius 999px), moca-red fill, white
 * text, ~18px medium, padding ~10px. Header Donate uses the solid fill;
 * footer GET DIRECTIONS uses the outline variant.
 */
.moca-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--wp--preset--color--moca-red, #b45b38);
  color: var(--wp--preset--color--white, #fff);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--button-regular, 1.125rem);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.moca-button:hover, .moca-button:focus-visible {
  opacity: 0.85;
}
.moca-button--outline {
  background: transparent;
  border-color: currentcolor;
  color: inherit;
}
.moca-button--outline:hover, .moca-button--outline:focus-visible {
  opacity: 1;
  background: var(--wp--preset--color--white, #fff);
  border-color: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--moca-red, #b45b38);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — shared card styling.
 *
 * Backs template-parts/blocks/card-event-exhibition.php,
 * template-parts/blocks/row-event-expandable.php, and
 * template-parts/blocks/card-product.php — the "Event/Exhibition card"
 * and "Product card" components noted once under FIGMA-SPEC.md's
 * "Components identified (build once, reuse)".
 *
 * No mobile page frames exist for these sections yet (FIGMA-SPEC.md
 * "Container / layout" + Resolved Decision #12) — the mobile-first
 * single-column stack below, and the `tablet` breakpoint chosen for the
 * event row's switch to a horizontal layout, are both a reasonable
 * judgment call rather than a measured value. Flag for a follow-up pass
 * once real mobile frames exist.
 */
.moca-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.moca-tag--jade {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--white);
}
.moca-tag--blue {
  background: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
}
.moca-tag--yellow {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
}
.moca-tag--pink {
  background: var(--wp--preset--color--pink);
  color: var(--wp--preset--color--moca-red);
}

.moca-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40, 16px);
}
.moca-card__thumbnail {
  display: block;
  position: relative;
  aspect-ratio: 744/465;
  overflow: hidden;
}
.moca-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30, 8px);
}
.moca-card__body--top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moca-card__tag {
  align-self: flex-start;
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--wp--preset--color--moca-red);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.moca-card__title {
  margin: 0;
  font-size: clamp(24px, -1.8461538462px + 3.3653846154vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-card__title a {
  color: inherit;
  text-decoration: none;
}
.moca-card__title a:hover, .moca-card__title a:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-card__date {
  margin: 0;
  color: var(--wp--preset--color--moca-red);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.17px;
}
.moca-card__location {
  margin: 0;
  color: #6b6b6b;
  font-size: 16px;
}
.moca-card__description {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
.moca-card__button {
  align-self: flex-start;
  margin-top: var(--wp--preset--spacing--30, 8px);
}
.moca-card--large {
  gap: clamp(24px, 14.7692307692px + 1.2019230769vw, 34px);
}
@media (min-width: 1025px) {
  .moca-card--large {
    flex-direction: row;
    align-items: stretch;
  }
}
.moca-card--large .moca-card__thumbnail {
  flex: 0 1 55%;
  max-width: 744px;
  aspect-ratio: 744/465;
}
.moca-card--large .moca-card__body {
  flex: 1 1 40%;
  gap: var(--wp--preset--spacing--40, 16px);
}
.moca-card--large .moca-card__title {
  font-size: clamp(32px, 13.5384615385px + 2.4038461538vw, 52px);
  line-height: 1.34;
  letter-spacing: -1.008px;
}
.moca-card--default .moca-card__thumbnail {
  aspect-ratio: 2/1;
}
.moca-card--default .moca-card__title {
  font-size: clamp(20px, 16.3076923077px + 0.4807692308vw, 24px);
}
.moca-card--compact {
  gap: var(--wp--preset--spacing--20, 4px);
}
.moca-card--compact .moca-card__title {
  font-size: var(--wp--preset--font-size--body-large);
}
.moca-card--compact .moca-card__date,
.moca-card--compact .moca-card__location {
  font-size: var(--wp--preset--font-size--body-small);
}
.moca-card--product .moca-card__thumbnail {
  aspect-ratio: 1/1;
}
.moca-card__badge {
  position: absolute;
  top: var(--wp--preset--spacing--30, 8px);
  left: var(--wp--preset--spacing--30, 8px);
  padding: 0.25em 0.75em;
  border-radius: var(--wp--preset--spacing--20, 4px);
  background: var(--wp--preset--color--moca-red);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--body-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.moca-card__price {
  font-weight: 500;
}
.moca-card__price del {
  margin-right: 0.5em;
  opacity: 0.6;
}
.moca-card__swatches {
  display: flex;
  gap: var(--wp--preset--spacing--20, 4px);
}
.moca-card__swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wp--preset--color--sand);
  border: 1px solid var(--wp--preset--color--brown);
}

.moca-event-row {
  border-top: 1px solid rgba(17, 17, 17, 0.14);
  list-style: none;
  padding-block: 24px 14px;
}
@media (min-width: 768px) {
  .moca-event-row {
    padding-block: unset;
  }
}
@media (min-width: 768px) {
  .moca-event-row__header {
    display: grid;
    align-items: center;
    gap: clamp(16px, 1.2307692308px + 1.9230769231vw, 32px);
    padding: clamp(20px, 12.6153846154px + 0.9615384615vw, 28px) 24px;
    grid-template-columns: 70px 0 1fr auto 40px;
  }
}
@media (min-width: 1025px) {
  .moca-event-row__header {
    grid-template-columns: 110px minmax(120px, 257px) 1fr auto 40px;
  }
}
.moca-event-row__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20, 4px);
  flex-shrink: 0;
  color: var(--wp--preset--color--brown);
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  line-height: 2.2;
}
.moca-event-row__date--desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-event-row__date--desktop {
    display: flex;
  }
}
.moca-event-row__date--mobile {
  display: flex;
}
@media (min-width: 768px) {
  .moca-event-row__date--mobile {
    display: none;
  }
}
.moca-event-row__date-day {
  font-size: clamp(28px, 13.2307692308px + 1.9230769231vw, 44px);
  font-weight: 500;
  line-height: 1;
}
.moca-event-row__date-month {
  font-size: var(--wp--preset--font-size--button-small, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.moca-event-row__thumb {
  display: none;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  aspect-ratio: 2/1;
}
@media (min-width: 768px) {
  .moca-event-row__thumb {
    display: block;
    width: 100%;
    max-width: 257px;
  }
}
.moca-event-row__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-event-row__meta {
  gap: 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.moca-event-row__category {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--moca-red);
  font-size: 16px;
}
.moca-event-row__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
  letter-spacing: 0.2px;
  margin-block: 6px;
}
.moca-event-row__title a {
  color: inherit;
  text-decoration: none;
}
.moca-event-row__title a:hover, .moca-event-row__title a:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-event-row__location {
  margin: 0;
  color: #6b6b6b;
  font-size: 15px;
  margin-bottom: 6px;
  display: inline-block;
}
.moca-event-row__price {
  flex-shrink: 0;
  justify-self: end;
  font-weight: 500;
}
.moca-event-row__price__desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-event-row__price__desktop {
    display: inline-block;
  }
}
.moca-event-row__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--wp--preset--color--brown);
  cursor: pointer;
}
.moca-event-row__toggle:hover, .moca-event-row__toggle:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-event-row__arrow {
  display: none;
}
@media (min-width: 768px) {
  .moca-event-row__arrow {
    display: inline-flex;
  }
}
.moca-event-row__chevron {
  transition: transform 0.2s ease;
}
.moca-event-row.is-expanded .moca-event-row__header {
  align-items: start;
}
.moca-event-row__summary {
  overflow: hidden;
  display: block;
}
@media (min-width: 768px) {
  .moca-event-row__summary[hidden] .moca-event-row__summary-image {
    margin-bottom: 0;
    aspect-ratio: unset;
  }
}
.moca-event-row__summary[hidden] .moca-event-row__summary-content {
  margin-top: 0;
  max-height: 0;
}
.moca-event-row__content__top {
  display: flex;
  gap: 18px;
}
.moca-event-row__content__heading__wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media (min-width: 768px) {
  .moca-event-row__content__heading__wrap > :not(:first-child) {
    display: none;
  }
}
.moca-event-row__summary-image {
  background: var(--wp--preset--color--sand);
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  aspect-ratio: 2/1;
  position: relative;
  transition: all var(--moca-reveal-duration) var(--moca-reveal-easing);
  margin-bottom: clamp(18px, 12.4615384615px + 0.7211538462vw, 24px);
}
.moca-event-row__summary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.moca-event-row__summary-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s, margin-top 0.3s;
}
.moca-event-row__description {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
.moca-event-row__button {
  align-self: flex-start;
}
.moca-event-row.is-expanded .moca-event-row__category, .moca-event-row:has([aria-expanded=true]) .moca-event-row__category {
  color: var(--wp--preset--color--moca-red);
}
.moca-event-row.is-expanded .moca-event-row__title, .moca-event-row:has([aria-expanded=true]) .moca-event-row__title {
  color: var(--wp--preset--color--brown);
}

/**
 * Moca — generic accordion styling.
 *
 * Pairs with src/js/accordion.js's markup contract
 * (`[data-moca-accordion]` container, `[data-moca-accordion-trigger]` /
 * `[data-moca-accordion-panel]` children). This partial styles the
 * generic `.moca-accordion` BEM classes meant for future blocks that
 * reuse the same pattern (FAQ categories/questions, Membership tier
 * Default→Expand, Single Product's Full Description/Specifications/
 * Care/Sustainability panels — see FIGMA-SPEC.md).
 *
 * The "Latest Events" list row (template-parts/blocks/
 * row-event-expandable.php) uses the same data attributes for its JS hook
 * but its own `.moca-event-row__*` class names/visual treatment, styled
 * in components/_card.scss alongside the rest of that partial family —
 * not duplicated here.
 */
.moca-accordion__item {
  border-bottom: 1px solid var(--wp--preset--color--brown);
}
.moca-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 16px);
  width: 100%;
  padding-block: var(--wp--preset--spacing--40, 16px);
  background: none;
  border: none;
  text-align: left;
  color: var(--wp--preset--color--brown);
  font-size: var(--wp--preset--font-size--body-large);
}
.moca-accordion__trigger:hover, .moca-accordion__trigger:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-accordion__trigger[aria-expanded=true] {
  color: var(--wp--preset--color--moca-red);
}
.moca-accordion__trigger[aria-expanded=true] .moca-accordion__chevron {
  transform: rotate(180deg);
}
.moca-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: currentcolor;
}
.moca-accordion__panel {
  overflow: hidden;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Editorial / Magazine Strip" (acf/editorial-strip).
 *
 * Blue (#3F738D) band, 3 equal columns, whole card is a link.
 */
.moca-editorial-strip {
  background: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
}
@media (min-width: 768px) {
  .moca-editorial-strip {
    padding-block: 70px;
  }
}
.moca-editorial-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--60, 32px);
}
.moca-editorial-strip__inner.moca-container {
  padding: unset;
}
@media (min-width: 768px) {
  .moca-editorial-strip__inner.moca-container {
    padding-inline: clamp(12px, -13.8461538462px + 3.3653846154vw, 40px);
  }
}
.moca-editorial-strip__heading {
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--white);
}
@media (min-width: 768px) {
  .moca-editorial-strip__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--60, 32px);
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1025px) {
  .moca-editorial-strip__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.moca-editorial-strip__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 50px 12px;
}
.moca-editorial-strip__card.blue {
  background: var(--wp--preset--color--blue);
}
.moca-editorial-strip__card.jade {
  background: var(--wp--preset--color--jade);
}
.moca-editorial-strip__card.sand {
  background: var(--wp--preset--color--sand);
}
@media (max-width: 768px) {
  .moca-editorial-strip__card.sand .moca-editorial-strip__card-text,
  .moca-editorial-strip__card.sand .moca-editorial-strip__card-description {
    color: var(--wp--preset--color--brown);
  }
  .moca-editorial-strip__card.sand .moca-button {
    color: var(--wp--preset--color--sand);
    background-color: var(--wp--preset--color--moca-red);
  }
  .moca-editorial-strip__card.sand .moca-button:hover, .moca-editorial-strip__card.sand .moca-button:focus-visible {
    opacity: 0.8;
  }
}
@media (min-width: 768px) {
  .moca-editorial-strip__card {
    padding: unset;
  }
  .moca-editorial-strip__card.blue, .moca-editorial-strip__card.jade, .moca-editorial-strip__card.sand {
    background: transparent;
  }
}
.moca-editorial-strip__card__link {
  margin-top: 5px;
}
.moca-editorial-strip__card-image {
  display: block;
  height: clamp(369px, 309.9230769231px + 7.6923076923vw, 433px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.moca-editorial-strip__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.moca-editorial-strip__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30, 8px);
}
.moca-editorial-strip__card-text {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--wp--preset--color--white);
}
.moca-editorial-strip__card-description {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
  color: var(--wp--preset--color--sand);
}
.moca-editorial-strip .moca-button {
  align-self: flex-start;
  margin-top: 4px;
  text-transform: uppercase;
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--moca-red);
  transition: opacity 0.35s ease;
}
.moca-editorial-strip .moca-button:hover, .moca-editorial-strip .moca-button:focus-visible {
  opacity: 0.8;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Contact Info Columns" (acf/contact-info-columns).
 *
 * Visit Us "Getting here" (Figma `2261:9326`) — blue uppercase heading,
 * brown intro, and a 4-up grid of 212.5px columns on 37px gaps. The grid
 * is capped at 961px: on the Visit page the map panel occupies the
 * right-hand 362px of the row, so the travel columns only ever use the
 * left region beside it.
 */
.moca-contact-info-columns {
  margin-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  color: var(--wp--preset--color--brown);
}
.moca-contact-info-columns__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.moca-contact-info-columns__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  max-width: 593px;
}
.moca-contact-info-columns__heading {
  margin: 0;
  font-size: clamp(18px, 14.3076923077px + 0.4807692308vw, 22px);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--wp--preset--color--blue);
}
.moca-contact-info-columns__intro-text {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
.moca-contact-info-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 961px;
}
@media (min-width: 768px) {
  .moca-contact-info-columns__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 37px;
  }
}
@media (min-width: 1025px) {
  .moca-contact-info-columns__grid {
    grid-template-columns: repeat(var(--moca-contact-info-columns-count, 4), minmax(0, 1fr));
  }
}
.moca-contact-info-columns__column {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.moca-contact-info-columns__column:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .moca-contact-info-columns__column:not(:last-child) {
    padding-bottom: 0;
    border-bottom: none;
  }
}
.moca-contact-info-columns__column-heading {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
}
.moca-contact-info-columns__column-body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
}
.moca-contact-info-columns__column-body p {
  margin: 0 0 19px;
  font-weight: 500;
  font-weight: 500;
  line-height: 1.18;
}
.moca-contact-info-columns__column-body p:last-child {
  margin-bottom: 0;
}
.moca-contact-info-columns__column-body strong,
.moca-contact-info-columns__column-body em {
  color: var(--wp--preset--color--blue);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
}

/**
 * Moca — "Image Break" component (acf/image-break).
 *
 * Full-width decorative image with an optional centred logo/mark overlay,
 * no text content (FIGMA-SPEC.md's Membership "Decorative image break"
 * section).
 */
.moca-image-break {
  position: relative;
  display: block;
  line-height: 0;
}
.moca-image-break__image {
  width: 100%;
  object-fit: cover;
  max-height: 900px;
  height: 100%;
}
.moca-image-break__overlay-image svg {
  max-width: 227px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 100%;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Featured Image" block (acf/featured-image).
 *
 * Single centred image + optional two-line caption, on a section whose
 * background/text colour render.php can override per instance via an
 * inline style (falling back to the defaults below).
 */
.moca-featured-image {
  padding-block: clamp(48px, 18.4615384615px + 3.8461538462vw, 80px);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
}
.moca-featured-image__inner {
  margin: 0 auto;
  max-width: 987px;
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}
.moca-featured-image__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid currentcolor;
}
.moca-featured-image__caption {
  margin: 0;
  margin-top: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  font-size: var(--wp--preset--font-size--body-regular, 1rem);
  line-height: 1.5;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Hero Banner" block (acf/hero).
 *
 * Full-bleed media area (598px on desktop, per Figma frame 1716:5175) with
 * left content overlay. Sand/brown text when no background media is present.
 */
.moca-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 677px;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
  overflow: hidden;
}
@media (min-width: 1025px) {
  .moca-hero {
    min-height: 598px;
  }
}
.moca-hero--jade {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--sand);
}
.moca-hero--jade .moca-hero__heading-en,
.moca-hero--jade .moca-hero__description,
.moca-hero--jade .moca-hero__address {
  color: var(--wp--preset--color--sand);
}
.moca-hero--jade .moca-hero__heading-zh {
  color: var(--wp--preset--color--sand);
}
.moca-hero:has(.moca-hero__image), .moca-hero:has(.moca-hero__video) {
  color: var(--wp--preset--color--white);
}
.moca-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.moca-hero__video, .moca-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-hero__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6));
  inset: 0;
  position: absolute;
}
.moca-hero__secondary-image {
  display: none;
}
@media (min-width: 1025px) {
  .moca-hero__secondary-image {
    display: block;
    position: absolute;
    z-index: 1;
    right: var(--moca-container-pad, 40px);
    bottom: var(--wp--preset--spacing--70, 40px);
    width: 20rem;
    overflow: hidden;
  }
}
.moca-hero__secondary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-hero__content-inner {
  display: flex;
  gap: 18px;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
@media (min-width: 1025px) {
  .moca-hero__content-inner {
    align-items: flex-end;
    flex-direction: row;
    gap: 16px;
  }
}
.moca-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding-inline: clamp(12px, -9.2307692308px + 2.7644230769vw, 35px);
  padding-block: clamp(18px, 2.3076923077px + 2.0432692308vw, 35px);
}
.moca-hero__eyebrow__divider {
  display: inline-block;
  background: var(--wp--preset--color--white, #fff);
  vertical-align: middle;
  height: 1px;
  width: 2rem;
}
.moca-hero__eyebrow {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  align-items: center;
  color: var(--wp--preset--color--white, #fff);
  display: flex;
  font-weight: 400;
  gap: 0.75rem;
  letter-spacing: 0.146em;
}
.moca-hero__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(28px, 9.5384615385px + 2.4038461538vw, 48px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.moca-hero__heading-zh {
  text-transform: none;
}
.moca-hero:has(.moca-hero__image) .moca-hero__heading-zh, .moca-hero:has(.moca-hero__video) .moca-hero__heading-zh {
  color: var(--wp--preset--color--sand);
}
.moca-hero__description {
  max-width: 40rem;
  font-size: 16px;
  line-height: 1.3;
}
@media (min-width: 1025px) {
  .moca-hero__description {
    line-height: 1.4;
    font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  }
}
.moca-hero__description :last-child {
  margin-bottom: 0;
}
.moca-hero__address {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(12px, 6.4615384615px + 0.7211538462vw, 18px);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Media + Text Section" block (acf/media-text-section).
 *
 * Homepage About Us: left = bilingual heading above tall image; right =
 * body + italic acknowledgement aligned to the image bottom. Also reused
 * on Who We Are (image position left/right).
 */
.moca-media-text__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
}
@media (min-width: 768px) {
  .moca-media-text__inner {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(64px, -338.5903614458px + 39.2771084337vw, 227px);
  }
}
@media (min-width: 768px) {
  .moca-media-text--right .moca-media-text__inner {
    flex-direction: row-reverse;
  }
}
.moca-media-text--bg-jade {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--sand);
}
.moca-media-text--bg-jade .moca-media-text__heading {
  font-size: clamp(32px, 9.8461538462px + 2.8846153846vw, 56px);
}
.moca-media-text--bg-jade .moca-media-text__heading-en {
  color: var(--wp--preset--color--sand);
  font-weight: 500;
}
.moca-media-text--bg-jade .moca-media-text__heading-zh,
.moca-media-text--bg-jade .moca-media-text__body,
.moca-media-text--bg-jade .moca-media-text__acknowledgement {
  color: var(--wp--preset--color--sand);
}
.moca-media-text__media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(50px, -79.2307692308px + 16.8269230769vw, 190px);
  flex: 1 1 50%;
}
@media (min-width: 768px) {
  .moca-media-text__media {
    max-width: 607px;
  }
}
.moca-media-text__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-media-text__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-media-text__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1/1.45;
}
.moca-media-text__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, 24px);
}
@media (min-width: 768px) {
  .moca-media-text__content {
    justify-content: space-between;
    padding-top: 0;
  }
}
.moca-media-text__content__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .moca-media-text__content__body {
    max-width: 320px;
  }
}
.moca-media-text__content__body :last-child {
  margin-bottom: 0;
}
.moca-media-text__content__body--desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-media-text__content__body--desktop {
    display: block;
  }
}
.moca-media-text__content__body--mobile {
  display: block;
}
@media (min-width: 768px) {
  .moca-media-text__content__body--mobile {
    display: none;
  }
}
.moca-media-text__acknowledgement {
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
  max-width: 320px;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
.moca-media-text__acknowledgement :last-child {
  margin-bottom: 0;
}
.moca-media-text__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 465px;
  color: var(--wp--preset--color--brown);
}
.moca-media-text__form-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.moca-media-text__form-description {
  margin: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.moca-media-text .gform_wrapper.gravity-theme .gform_heading,
.moca-media-text .gform_wrapper.gravity-theme .gfield_label,
.moca-media-text .gform_wrapper.gravity-theme .gform_required_legend {
  display: none;
}
.moca-media-text .gform_wrapper.gravity-theme input[type=email],
.moca-media-text .gform_wrapper.gravity-theme input[type=text] {
  width: 100%;
  margin-bottom: 0;
  padding: 7px 12px 6px !important;
  border: 0;
  border: 1px solid var(--wp--preset--color--brown);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--brown);
  font-size: 16px !important;
  text-transform: uppercase;
}
.moca-media-text .gform_wrapper.gravity-theme input[type=email]::placeholder,
.moca-media-text .gform_wrapper.gravity-theme input[type=text]::placeholder {
  color: var(--wp--preset--color--brown);
}
.moca-media-text .gform_wrapper.gravity-theme .gform_footer {
  margin-top: 16px !important;
  padding: 0;
}
.moca-media-text .gform_wrapper.gravity-theme .gform_button,
.moca-media-text .gform_wrapper.gravity-theme input[type=submit] {
  width: 100%;
  padding: 7px 16px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--moca-red, #b45b38);
  color: var(--wp--preset--color--white, #fff);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 999px;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Highlight Banner" block (acf/highlight-banner) styles.
 *
 * FIGMA-SPEC.md's Exhibition Index (004) "Highlight banner" section — see
 * inc/acf-blocks/highlight-banner/render.php +
 * acf-json/group_moca_highlight_banner.json.
 *
 * FIGMA-SPEC.md has no explicit layout note for this section beyond
 * "full-width promo/CTA" — centered content over a full-bleed image is a
 * reasonable judgment call, consistent with the hero block's treatment.
 */
.moca-highlight-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 28rem;
  color: var(--wp--preset--color--white);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(12px, -13.8461538462px + 3.3653846154vw, 40px);
}
@media (min-width: 1025px) {
  .moca-highlight-banner {
    min-height: 32rem;
  }
}
.moca-highlight-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.moca-highlight-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-highlight-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wp--preset--color--brown);
  opacity: 0.5;
}
.moca-highlight-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40, 16px);
  width: 100%;
  max-width: 100%;
  padding: 80px clamp(12px, -63.6923076923px + 9.8557692308vw, 94px);
  align-items: flex-start;
}
.moca-highlight-banner__content__inner {
  max-width: 544px;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40, 16px);
  align-items: flex-start;
}
.moca-highlight-banner__heading {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(32px, 4.3076923077px + 3.6057692308vw, 62px);
  font-weight: 500;
  letter-spacing: -1.008px;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 768px) {
  .moca-highlight-banner__heading {
    line-height: 112.903%;
  }
}
.moca-highlight-banner__description :last-child {
  margin-bottom: 0;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .moca-highlight-banner__description :last-child {
    line-height: 1.4;
  }
}
.moca-highlight-banner__button {
  margin-top: var(--wp--preset--spacing--30, 8px);
  border-radius: 999px;
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--moca-red);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Volunteers Callout" block (acf/volunteers-callout).
 *
 * Yellow (#F1E4B2) band: left text column (~487px feel) with heading /
 * subheading / body / Follow US + icons; right large image (~850px).
 */
.moca-volunteers-callout {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px) 0;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .moca-volunteers-callout {
    padding-bottom: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  }
}
.moca-volunteers-callout__inner {
  display: grid;
  gap: clamp(32px, 2.4615384615px + 3.8461538462vw, 64px);
  align-items: stretch;
}
@media (min-width: 1025px) {
  .moca-volunteers-callout__inner {
    grid-template-columns: minmax(280px, 487px) minmax(0, 1fr);
    align-items: stretch;
  }
}
.moca-volunteers-callout__content {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, -88.4615384615px + 18.0288461538vw, 200px);
}
@media (min-width: 1025px) {
  .moca-volunteers-callout__content {
    justify-content: space-between;
    max-width: 487px;
  }
}
.moca-volunteers-callout__content--top {
  max-width: 327px;
}
.moca-volunteers-callout__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.9230769231px + 1.4423076923vw, 24px);
  margin: 0 0 13px;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-volunteers-callout__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-volunteers-callout__heading-zh {
  color: var(--wp--preset--color--brown);
  letter-spacing: -0.48px;
  font-weight: 500;
}
.moca-volunteers-callout__subheading {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  line-height: 1.18;
}
@media (min-width: 768px) {
  .moca-volunteers-callout__subheading {
    max-width: 327px;
  }
}
.moca-volunteers-callout__body {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .moca-volunteers-callout__body {
    max-width: 327px;
  }
}
.moca-volunteers-callout__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.moca-volunteers-callout__follow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(70px, 45.0769230769px + 3.2451923077vw, 97px);
}
.moca-volunteers-callout__follow-label {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.moca-volunteers-callout__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.moca-volunteers-callout__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.moca-volunteers-callout__social-link:hover, .moca-volunteers-callout__social-link:focus-visible {
  opacity: 0.75;
}
.moca-volunteers-callout__social-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.moca-volunteers-callout__social-fallback {
  font-size: var(--wp--preset--font-size--body-small);
  text-decoration: underline;
}
.moca-volunteers-callout__media {
  position: relative;
  margin-left: -12px;
  max-width: 100vw;
  width: calc(100% + 24px);
}
@media (min-width: 768px) {
  .moca-volunteers-callout__media {
    width: unset;
    margin-left: unset;
  }
}
.moca-volunteers-callout__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 850/560;
}
@media (min-width: 1025px) {
  .moca-volunteers-callout__image {
    max-width: 850px;
    margin-left: auto;
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Latest Events List" block (acf/latest-events-list).
 *
 * Homepage + Events Index "Coming Up / Latest Events" section. Row layout
 * lives in components/_card.scss (`.moca-event-row`); this partial owns
 * the section chrome (eyebrow, bilingual heading, full-programme link).
 */
.moca-latest-events-list {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-latest-events-list--bg-sand {
  background: var(--wp--preset--color--sand);
}
.moca-latest-events-list__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 12.6153846154px + 0.9615384615vw, 28px);
}
.moca-latest-events-list__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 16px) var(--wp--preset--spacing--60, 32px);
}
.moca-latest-events-list__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40, 16px);
}
.moca-latest-events-list__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(12px, 10.1538461538px + 0.2403846154vw, 14px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-latest-events-list__eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--wp--preset--color--brown);
}
.moca-latest-events-list__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-latest-events-list__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-latest-events-list__full-programme {
  color: var(--wp--preset--color--moca-red);
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}
.moca-latest-events-list__full-programme:hover, .moca-latest-events-list__full-programme:focus-visible {
  text-decoration: underline;
}
.moca-latest-events-list__full-programme--desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-latest-events-list__full-programme--desktop {
    display: inline-block;
    text-align: right;
    margin-left: auto;
  }
}
.moca-latest-events-list__full-programme--mobile {
  display: inline-block;
}
@media (min-width: 768px) {
  .moca-latest-events-list__full-programme--mobile {
    display: none;
  }
}
.moca-latest-events-list__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}
.moca-latest-events-list__empty {
  margin: 0;
  color: #6b6b6b;
}
.moca-latest-events-list .moca-event-row__title {
  font-size: 20px;
  line-height: 25px;
}
.moca-latest-events-list .moca-event-row__category {
  font-weight: 500;
}
.moca-latest-events-list .moca-event-row__date-day {
  font-weight: 400;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Exhibitions (Relation)" block (acf/exhibitions-relation).
 *
 * Homepage "Our Exhibitions" (featured + two) and Single Exhibition
 * "Other Exhibitions" (grid). Card visuals live in components/_card.scss.
 */
.moca-exhibitions-relation {
  background: var(--wp--preset--color--sand);
}
.moca-exhibitions-relation__inner {
  display: grid;
  gap: clamp(24px, -12.9230769231px + 4.8076923077vw, 64px);
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .moca-exhibitions-relation__inner {
    grid-template-columns: 1fr 1fr;
  }
}
.moca-exhibitions-relation__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-exhibitions-relation__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-exhibitions-relation__view-all {
  color: var(--wp--preset--color--moca-red);
  text-decoration: none;
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-weight: 500;
  grid-column: 1/-1;
  order: 1;
  text-align: center;
}
@media (min-width: 768px) {
  .moca-exhibitions-relation__view-all {
    text-align: right;
    margin-left: auto;
    grid-column: unset;
    order: unset;
    align-self: end;
  }
}
.moca-exhibitions-relation__view-all:hover, .moca-exhibitions-relation__view-all:focus-visible {
  text-decoration: underline;
}
.moca-exhibitions-relation__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 5.0769230769px + 1.6826923077vw, 32px);
}
@media (min-width: 768px) {
  .moca-exhibitions-relation__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-column: span 2;
  }
}
@media (min-width: 1025px) {
  .moca-exhibitions-relation__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--60, 32px);
  }
}
@media (min-width: 1025px) {
  .moca-exhibitions-relation--grid-col4 .moca-exhibitions-relation__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.moca-exhibitions-relation--grid-col4 .moca-card__title {
  font-size: 18px;
}
.moca-exhibitions-relation--grid-col4 .moca-card__date {
  font-size: 14px;
}
.moca-exhibitions-relation__set {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, -8.4615384615px + 5.5288461538vw, 80px);
  grid-column: 1/-1;
}
.moca-exhibitions-relation__featured {
  width: 100%;
}
.moca-exhibitions-relation__secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
}
@media (min-width: 768px) {
  .moca-exhibitions-relation__secondary {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--60, 32px);
  }
}
.moca-exhibitions-relation__secondary .moca-card--default:nth-child(even) .moca-card__thumbnail {
  aspect-ratio: 1.28/1;
}
.moca-exhibitions-relation__placeholder {
  margin: 0;
  padding: var(--wp--preset--spacing--60, 2rem) 0;
  color: #6b6b6b;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Contact Section" block (acf/contact-section).
 *
 * Contact Us (012) node 1716:8828 — three columns on white:
 * bilingual 48px heading + volunteer callout | 362×459 image |
 * 465px form. Enquiry Type (and all GF selects site-wide) use
 * .moca-select — see src/js/custom-select.js and base/_gravity_form.scss.
 */
.moca-contact-section {
  padding-block: clamp(48px, -9.2307692308px + 7.4519230769vw, 110px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-contact-section__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-contact-section__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  }
}
.moca-contact-section__column--copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 24.6153846154px + 0.9615384615vw, 40px);
}
@media (min-width: 1025px) {
  .moca-contact-section__column--copy {
    flex: 1 1 0;
    max-width: 327px;
  }
}
.moca-contact-section__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, -6.9230769231px + 1.6826923077vw, 20px);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.moca-contact-section__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-contact-section__volunteer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 327px;
}
.moca-contact-section__volunteer-heading {
  margin: 0 0 5px;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
}
.moca-contact-section__volunteer--desktop {
  display: none;
}
@media (min-width: 1025px) {
  .moca-contact-section__volunteer--desktop {
    display: block;
  }
}
.moca-contact-section__volunteer--mobile {
  display: block;
  order: 2;
}
@media (min-width: 1025px) {
  .moca-contact-section__volunteer--mobile {
    display: none;
  }
}
.moca-contact-section__volunteer-body {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
}
.moca-contact-section__volunteer-body p {
  margin: 0;
  font-weight: 400;
}
.moca-contact-section__column--media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 256px;
  order: 2;
}
@media (min-width: 1025px) {
  .moca-contact-section__column--media {
    order: unset;
    max-width: 362px;
  }
}
.moca-contact-section__decorative-image {
  width: 100%;
  max-width: 362px;
  height: auto;
  aspect-ratio: 362/459;
  display: block;
  object-fit: cover;
}
.moca-contact-section__column--form {
  min-width: 0;
  width: 100%;
}
@media (min-width: 1025px) {
  .moca-contact-section__column--form {
    flex: 0 0 465px;
    max-width: 465px;
  }
}
.moca-contact-section__form, .moca-contact-section__form-placeholder {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.moca-contact-section__form .gform_wrapper,
.moca-contact-section__form .gform_wrapper.gravity-theme {
  margin: 0;
}
.moca-contact-section__form .gform_heading,
.moca-contact-section__form .gform_required_legend,
.moca-contact-section__form .gfield_required {
  display: none;
}
.moca-contact-section__form .gform_fields,
.moca-contact-section__form .gform_body,
.moca-contact-section__form .gform_wrapper.gravity-theme .gform_fields {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  grid-template-columns: none !important;
}
.moca-contact-section__form .gfield {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  grid-column: auto !important;
}
.moca-contact-section__form .gfield_label,
.moca-contact-section__form label {
  display: block;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400 !important;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
  margin: 0 0 12px !important;
}
.moca-contact-section__form .ginput_container {
  margin: 0;
}
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=text],
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=email],
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=tel],
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=url],
.moca-contact-section__form .gform_wrapper.gravity-theme select,
.moca-contact-section__form .gform_wrapper.gravity-theme textarea {
  width: 100%;
  margin: 0 !important;
  padding: 8px 13px !important;
  border: 1px solid var(--wp--preset--color--brown) !important;
  border-radius: 0 !important;
  background: var(--wp--preset--color--white) !important;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem) !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
  box-shadow: none !important;
}
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=text]::placeholder,
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=email]::placeholder,
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=tel]::placeholder,
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=url]::placeholder,
.moca-contact-section__form .gform_wrapper.gravity-theme select::placeholder,
.moca-contact-section__form .gform_wrapper.gravity-theme textarea::placeholder {
  color: var(--wp--preset--color--brown);
  opacity: 1;
}
.moca-contact-section__form .gform_wrapper.gravity-theme textarea {
  min-height: 143px;
  height: 143px;
  resize: vertical;
}
.moca-contact-section__form .gform_wrapper.gravity-theme .moca-select__option {
  padding: 10px 13px;
}
.moca-contact-section__form .gform_wrapper.gravity-theme .moca-select__option--value {
  padding: 10px 13px;
}
.moca-contact-section__form .gform_wrapper.gravity-theme .gform_button,
.moca-contact-section__form .gform_wrapper.gravity-theme input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--wp--preset--color--moca-red) !important;
  background: var(--wp--preset--color--moca-red) !important;
  color: var(--wp--preset--color--white) !important;
  font-size: var(--wp--preset--font-size--button-regular, 1.125rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Membership Banner" block (acf/membership-banner) styles.
 *
 * FIGMA-SPEC.md's 008 / Membership "Hero" section (Main Site frame
 * 1716:7452) — see inc/acf-blocks/membership-banner/render.php +
 * acf-json/group_moca_membership_banner.json. The decorative frame SVG's
 * own `preserveAspectRatio="none"` (as authored in Figma) is why it's
 * safe to stretch non-uniformly here via `object-fit: fill`.
 */
.moca-membership-banner {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
  padding-block: 40px;
}
.moca-membership-banner .moca-container {
  position: relative;
  overflow: hidden;
}
.moca-membership-banner__frame {
  position: absolute;
  inset: clamp(16px, -4.3076923077px + 2.6442307692vw, 38px);
  z-index: 1;
  pointer-events: none;
}
.moca-membership-banner__frame__mobile {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .moca-membership-banner__frame__mobile {
    display: none;
  }
}
.moca-membership-banner__frame__desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-membership-banner__frame__desktop {
    display: block;
    height: 100%;
  }
}
@media (min-width: 1025px) {
  .moca-membership-banner__frame__desktop {
    height: auto;
  }
}
.moca-membership-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: 870px;
  margin-left: clamp(1px, -265.7692307692px + 34.7355769231vw, 290px);
  padding: 100px 40px 0 40px;
  height: 630px;
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .moca-membership-banner__inner {
    padding: clamp(64px, -70.7692307692px + 17.5480769231vw, 210px) 0 clamp(64px, 34.4615384615px + 3.8461538462vw, 96px) 0;
    flex-direction: row;
    align-items: center;
    height: unset;
  }
}
.moca-membership-banner__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 35.0769230769px + 1.6826923077vw, 62px);
  line-height: 1.13;
  letter-spacing: -0.016em;
}
.moca-membership-banner__heading-en {
  color: var(--wp--preset--color--brown);
}
.moca-membership-banner__heading-accent {
  color: var(--wp--preset--color--moca-red);
  display: block;
}
.moca-membership-banner__heading-zh {
  font-size: clamp(28px, 9.5384615385px + 2.4038461538vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.moca-membership-banner__description {
  max-width: 31.4rem;
}
@media (min-width: 1025px) {
  .moca-membership-banner__description {
    flex: none;
    width: 31.4rem;
    align-self: end;
  }
}
.moca-membership-banner__description :last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Membership Tiers" block (acf/membership-tiers).
 *
 * Membership (008) — Choose your membership: bilingual heading + tier
 * cards in a horizontal row (component library shapes approximated with
 * sand pill cards until SVG assets are wired).
 */
.moca-membership-tiers {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-membership-tiers__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
}
.moca-membership-tiers__inner[hidden] {
  display: none;
}
.moca-membership-tiers .moca-membership-message {
  font-size: 13px;
  font-style: italic;
}
.moca-membership-tiers .moca-membership-message a {
  color: var(--wp--preset--color--moca-red);
  text-decoration: underline;
}
.moca-membership-tiers .moca-membership-message a:hover {
  text-decoration: none;
}
.moca-membership-tiers__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4.9230769231px + 1.4423076923vw, 28px);
  margin: 0;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 392px;
}
@media (min-width: 1025px) {
  .moca-membership-tiers__heading {
    line-height: 90%;
  }
}
.moca-membership-tiers__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-membership-tiers__heading-zh {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.moca-membership-tiers__thanks {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: clamp(32px, 2.4615384615px + 3.8461538462vw, 64px);
  width: 100%;
}
@media (min-width: 1025px) {
  .moca-membership-tiers__thanks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: clamp(180px, 106.1538461538px + 9.6153846154vw, 260px);
    gap: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  }
}
@media (min-width: 1025px) {
  .moca-membership-tiers__thanks .moca-membership-tiers__heading {
    flex: 1 1 auto;
    max-width: 36rem;
  }
}
.moca-membership-tiers .is-expanded .moca-accordion__panel {
  overflow: visible;
}
.moca-membership-tiers .gform_wrapper.gravity-theme {
  display: block !important;
}
.moca-membership-tiers .gform_wrapper.gravity-theme .gfield_consent_description_text {
  border: 0;
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  line-height: 112%;
  letter-spacing: -0.13px;
  padding-left: 27px;
  padding-block: 0;
}
@media (max-width: 500px) {
  .moca-membership-tiers .gform_wrapper.gravity-theme .gform_wrapper.gravity-theme .gfield_radio {
    gap: 14px;
  }
  .moca-membership-tiers .gform_wrapper.gravity-theme .gfield_radio .gchoice {
    width: auto;
  }
}
.moca-membership-tiers__thanks-body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
  max-width: 30rem;
}
@media (min-width: 1025px) {
  .moca-membership-tiers__thanks-body {
    grid-row: 2/2;
    grid-column: 2/2;
  }
}
.moca-membership-tiers__thanks-body p {
  margin: 0 0 1em;
}
.moca-membership-tiers__thanks-body p:last-child {
  margin-bottom: 0;
}
.moca-membership-tiers__list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 7.3846153846px + 2.1634615385vw, 42px);
}
@media (min-width: 1025px) {
  .moca-membership-tiers__list {
    flex-direction: row;
    align-items: flex-start;
  }
}
.moca-membership-tiers__card {
  flex: 1 1 100%;
  position: relative;
  overflow: visible;
  padding: 8px 4px;
  background: var(--wp--preset--color--white, #fff);
  border: 24px solid transparent;
  border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMkUxNTA1IiBkPSJNMjAuODA5MCwwLjAwMDBMNTEuMTkxMCwwLjAwMDBMNTIuODI5NSwxLjQ3MTBMNTIuODI5NSwxMS41OTE4TDU3LjQ1MDEsMTEuNTkxOEw1Ny40NTAxLDUuOTcyNEw2NS4zNDc3LDUuOTcyNEw2NS4zNDc3LDEzLjA2MjhMNTkuMDg4NiwxMy4wNjI4TDU5LjA4ODYsMTcuMjExMUw3MC4zNjE1LDE3LjIxMTFMNzIuMDAwMCwxOC42ODIyTDcyLjAwMDAsNTMuMzE3OEw3MC4zNjE1LDU0Ljc4ODlMNTkuMDg4Niw1NC43ODg5TDU5LjA4ODYsNTguOTM3Mkw2NS4zNDc3LDU4LjkzNzJMNjUuMzQ3Nyw2Ni4wMjc2TDU3LjQ1MDEsNjYuMDI3Nkw1Ny40NTAxLDYwLjQwODJMNTIuODI5NSw2MC40MDgyTDUyLjgyOTUsNzAuNTI5MEw1MS4xOTEwLDcyLjAwMDBMMjAuODA5MCw3Mi4wMDAwTDE5LjE3MDUsNzAuNTI5MEwxOS4xNzA1LDYwLjQwODJMMTQuNTQ5OSw2MC40MDgyTDE0LjU0OTksNjYuMDI3Nkw2LjY1MjQsNjYuMDI3Nkw2LjY1MjQsNTguOTM3MkwxMi45MTE0LDU4LjkzNzJMMTIuOTExNCw1NC43ODg5TDEuNjM4NSw1NC43ODg5TDAuMDAwMCw1My4zMTc4TDAuMDAwMCwxOC42ODIyTDEuNjM4NSwxNy4yMTExTDEyLjkxMTQsMTcuMjExMUwxMi45MTE0LDEzLjA2MjhMNi42NTI0LDEzLjA2MjhMNi42NTI0LDUuOTcyNEwxNC41NDk5LDUuOTcyNEwxNC41NDk5LDExLjU5MThMMTkuMTcwNSwxMS41OTE4TDE5LjE3MDUsMS40NzEwTDIwLjgwOTAsMC4wMDAwWk0yMC44MDkwLDEuNDcxMEw1MS4xOTEwLDEuNDcxMEw1MS4xOTEwLDEzLjA2MjhMNTcuNDUwMSwxMy4wNjI4TDU3LjQ1MDEsMTguNjgyMkw3MC4zNjE1LDE4LjY4MjJMNzAuMzYxNSw1My4zMTc4TDU3LjQ1MDEsNTMuMzE3OEw1Ny40NTAxLDU4LjkzNzJMNTEuMTkxMCw1OC45MzcyTDUxLjE5MTAsNzAuNTI5MEwyMC44MDkwLDcwLjUyOTBMMjAuODA5MCw1OC45MzcyTDE0LjU0OTksNTguOTM3MkwxNC41NDk5LDUzLjMxNzhMMS42Mzg1LDUzLjMxNzhMMS42Mzg1LDE4LjY4MjJMMTQuNTQ5OSwxOC42ODIyTDE0LjU0OTksMTMuMDYyOEwyMC44MDkwLDEzLjA2MjhMMjAuODA5MCwxLjQ3MTBaTTguMzIzNiw3LjQ0MzVMMTIuOTQ0Miw3LjQ0MzVMMTIuOTQ0MiwxMS41OTE4TDguMzIzNiwxMS41OTE4Wk02My42NzY0LDcuNDQzNUw1OS4wNTU4LDcuNDQzNUw1OS4wNTU4LDExLjU5MThMNjMuNjc2NCwxMS41OTE4Wk04LjMyMzYsNjQuNTU2NkwxMi45NDQyLDY0LjU1NjZMMTIuOTQ0Miw2MC40MDgyTDguMzIzNiw2MC40MDgyWk02My42NzY0LDY0LjU1NjZMNTkuMDU1OCw2NC41NTY2TDU5LjA1NTgsNjAuNDA4Mkw2My42NzY0LDYwLjQwODJaIi8+Cjwvc3ZnPgo=);
  border-image-slice: 24;
  border-image-width: 24px;
  border-image-repeat: stretch;
}
@media (min-width: 1025px) {
  .moca-membership-tiers__card {
    flex: 1 1 0;
    max-width: 430px;
  }
}
.moca-membership-tiers__card-header {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
}
.moca-membership-tiers__expand {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 1rem);
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.moca-membership-tiers__chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.35em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.is-expanded .moca-membership-tiers__chevron, .moca-membership-tiers__expand[aria-expanded=true] .moca-membership-tiers__chevron {
  transform: rotate(225deg);
  margin-top: 0.55em;
}
.moca-membership-tiers .moca-accordion__panel {
  padding-bottom: 0;
}
.moca-membership-tiers__card-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.moca-membership-tiers__name {
  font-size: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.moca-membership-tiers__price {
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.moca-membership-tiers__price span {
  font-weight: 500;
  font-size: clamp(20px, 16.3076923077px + 0.4807692308vw, 24px);
}
.moca-membership-tiers__eligibility {
  font-style: italic;
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 16rem;
}
.moca-membership-tiers__form {
  margin-top: 34px;
}
.moca-membership-tiers__form .gform_button {
  width: 100%;
}

.membership-price.show-price .moca-label-large:after {
  display: inline-block;
}
.membership-price .moca-label-large:after {
  content: "/ per year";
  font-size: 18px;
  text-transform: lowercase;
  font-weight: 400;
  display: none;
}

html[lang=zh-hant] .membership-price .moca-label-large:after {
  content: "/每年";
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Membership Info (acf/membership-info).
 * FIGMA 008 — 3-up bands (`1716:7468`): pink / jade / yellow, 480px each
 * at 1440, 80px vertical and 40px horizontal padding, 30px stack gap.
 */
.moca-membership-info {
  color: var(--wp--preset--color--brown);
}
.moca-membership-info__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  .moca-membership-info__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.moca-membership-info__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: clamp(48px, 18.4615384615px + 3.8461538462vw, 80px) clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
}
@media (min-width: 1600px) {
  .moca-membership-info__column {
    padding: 4vw;
  }
}
.moca-membership-info__column--1 {
  background: var(--wp--preset--color--pink);
}
.moca-membership-info__column--2 {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--sand);
}
.moca-membership-info__column--3 {
  background: var(--wp--preset--color--yellow);
}
.moca-membership-info__heading {
  margin: 0;
  font-size: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.029em;
  text-transform: uppercase;
  color: inherit;
}
.moca-membership-info__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
  color: inherit;
}
.moca-membership-info__body :last-child {
  margin-bottom: 0;
}
.moca-membership-info__button {
  text-transform: uppercase;
}
.moca-membership-info__placeholder {
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Member Benefits" block (acf/member-benefits).
 *
 * FIGMA-SPEC.md 008 / Membership — bilingual heading, 3-column benefit
 * categories, full-width disclaimer. Sand background, brown text.
 * Stacks to single column on mobile; 3 equal columns at desktop.
 */
.moca-member-benefits {
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
  padding-block: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
}
.moca-member-benefits__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4.9230769231px + 1.4423076923vw, 28px);
  margin-bottom: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-member-benefits__heading-en {
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--brown);
}
.moca-member-benefits__heading-zh {
  display: block;
  margin: 0;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  line-height: 1.05;
}
.moca-member-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-member-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
    align-items: start;
  }
}
.moca-member-benefits__column {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 8.3076923077px + 0.4807692308vw, 16px);
}
.moca-member-benefits__column-heading {
  margin: 0;
  font-size: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--brown);
}
.moca-member-benefits__list {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.moca-member-benefits__list-item {
  font-size: 18px;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
.moca-member-benefits__list-item::marker {
  font-size: 0.75em;
}
.moca-member-benefits__disclaimer {
  margin-top: clamp(32px, 9.8461538462px + 2.8846153846vw, 56px);
  font-size: 18px;
  line-height: 1.5;
  color: var(--wp--preset--color--brown);
}
.moca-member-benefits__disclaimer :last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Manage Membership" block (acf/manage-membership).
 *
 * Blue band: bilingual heading | email form | supporting image.
 */
.moca-manage-membership {
  padding-block: clamp(50px, -5.3846153846px + 7.2115384615vw, 110px);
  background: var(--wp--preset--color--blue, #3f738d);
  color: var(--wp--preset--color--white, #fff);
}
.moca-manage-membership__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-manage-membership__inner {
    flex-direction: row;
  }
}
.moca-manage-membership__left-col {
  max-width: 702px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 1025px) {
  .moca-manage-membership__left-col {
    width: 54%;
  }
}
.moca-manage-membership--no-image .moca-manage-membership__left-col {
  max-width: none;
  width: 100%;
}
@media (min-width: 768px) {
  .moca-manage-membership--no-image .moca-manage-membership__left-col {
    flex-direction: row;
  }
}
@media (min-width: 1025px) {
  .moca-manage-membership__copy {
    max-width: 370px;
  }
}
.moca-manage-membership__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.moca-manage-membership__heading-en, .moca-manage-membership__heading-zh {
  color: inherit;
}
.moca-manage-membership__form-col {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 28.4615384615px + 0.7211538462vw, 40px);
  max-width: 380px;
}
@media (min-width: 1025px) {
  .moca-manage-membership__form-col {
    align-self: end;
    padding-bottom: clamp(8px, 0.6153846154px + 0.9615384615vw, 16px);
  }
}
.moca-manage-membership__description {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-regular, 1rem);
  line-height: 1.4;
}
.moca-manage-membership__description p {
  margin: 0 0 0.75em;
}
.moca-manage-membership__description p:last-child {
  margin-bottom: 0;
}
.moca-manage-membership__media {
  max-width: 624px;
}
@media (min-width: 1025px) {
  .moca-manage-membership__media {
    align-self: center;
    width: 50%;
  }
}
.moca-manage-membership__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 65/53;
}
.moca-manage-membership__placeholder {
  margin: 0;
  opacity: 0.8;
}
.moca-manage-membership .gform_wrapper.gravity-theme .gform_heading,
.moca-manage-membership .gform_wrapper.gravity-theme .gfield_label {
  display: none;
}
.moca-manage-membership .gform_wrapper.gravity-theme input[type=email],
.moca-manage-membership .gform_wrapper.gravity-theme input[type=text] {
  border-color: var(--wp--preset--color--white, #fff);
  background: transparent;
  color: var(--wp--preset--color--white, #fff);
}
.moca-manage-membership .gform_wrapper.gravity-theme input[type=email]::placeholder,
.moca-manage-membership .gform_wrapper.gravity-theme input[type=text]::placeholder {
  color: var(--wp--preset--color--white, #fff);
}
.moca-manage-membership .gform_wrapper.gravity-theme input[type=submit],
.moca-manage-membership .gform_wrapper.gravity-theme .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 6px 14px 7px;
  border-radius: 999px;
  border-color: var(--wp--preset--color--white, #fff);
  background: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--blue, #3f738d);
  text-transform: uppercase;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 15.4px */
  text-transform: uppercase;
}
.moca-manage-membership .gform_wrapper.gravity-theme .gform-footer.gform_footer {
  padding: 7px 0 0;
  margin-inline: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Donation Banner" block (acf/donation-banner) styles.
 *
 * FIGMA-SPEC.md's 009 / Donation "Hero" section (Main Site frame
 * 1716:7847) — see inc/acf-blocks/donation-banner/render.php +
 * acf-json/group_moca_donation_banner.json. Two Layout variants share the
 * same two-column shell (`&__inner`): Image + Text pairs the content
 * column with a contained/cropped image, vertically centered with room
 * above/below; Text Only pairs it with a wider description column instead,
 * aligned near the top with a larger gap between columns. Mobile always
 * stacks content first (heading/description/button), then the image or
 * second-column description beneath it.
 */
.moca-donation-banner {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
  padding-block: clamp(40px, -29.2307692308px + 9.0144230769vw, 115px);
}
.moca-donation-banner__inner {
  gap: 20px clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .moca-donation-banner__inner {
    grid-template-columns: 53% 1fr;
    row-gap: 0;
  }
}
.moca-donation-banner__heading {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 40.6153846154px + 0.9615384615vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.016em;
  margin: 0;
}
.moca-donation-banner__heading-en {
  color: var(--wp--preset--color--brown);
}
.moca-donation-banner__heading-zh {
  text-transform: none;
}
.moca-donation-banner__description, .moca-donation-banner__description-col {
  font-size: var(--wp--preset--font-size--body-regular, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--brown);
  align-self: end;
  order: 2;
}
@media (min-width: 768px) {
  .moca-donation-banner__description, .moca-donation-banner__description-col {
    order: unset;
  }
}
.moca-donation-banner__description :last-child, .moca-donation-banner__description-col :last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .moca-donation-banner--image-text .moca-donation-banner__heading {
    margin: clamp(30px, -6.9230769231px + 4.8076923077vw, 70px) 0 0;
  }
  .moca-donation-banner--image-text .moca-donation-banner__description {
    max-width: 440px;
    margin-left: auto;
  }
}
.moca-donation-banner--image-text .moca-donation-banner__media {
  max-width: 464px;
}
@media (min-width: 768px) {
  .moca-donation-banner--image-text .moca-donation-banner__media {
    grid-column: 2/4;
    grid-row: 1/3;
  }
}
.moca-donation-banner--image-text .moca-donation-banner__image {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 0;
}
@media (min-width: 1025px) {
  .moca-donation-banner--text-only .moca-donation-banner__inner {
    align-items: flex-start;
    gap: clamp(48px, -18.4615384615px + 8.6538461538vw, 120px);
  }
}
.moca-donation-banner--text-only .moca-donation-banner__description-col {
  max-width: 42rem;
}
@media (min-width: 1025px) {
  .moca-donation-banner--text-only .moca-donation-banner__description-col {
    flex: 1 1 50%;
    padding-top: clamp(0, -11.0769230769px + 1.4423076923vw, 12px);
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Donate Online Form" block (acf/donate-form).
 *
 * Donation (009) — bilingual heading left, form right; square preset
 * amount tiles and bordered payment-method tabs per Figma 1716:7847.
 */
.moca-donate-form {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-donate-form__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-donate-form__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 639px);
    align-items: start;
    gap: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  }
}
.moca-donate-form__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3.0769230769px + 1.6826923077vw, 30px);
  margin: 0;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.moca-donate-form__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-donate-form__heading-zh {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.moca-donate-form__intro {
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.33;
  font-size: 18px;
}
.moca-donate-form__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1025px) {
  .moca-donate-form__form {
    padding-top: clamp(48px, -33.2307692308px + 10.5769230769vw, 136px);
  }
}
.moca-donate-form__form .gform_heading {
  display: none;
}
.moca-donate-form__field {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.moca-donate-form__label {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
.moca-donate-form__input {
  width: 100%;
  padding: 11px 21px;
  border: 1px solid var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
  font: inherit;
  color: var(--wp--preset--color--brown);
}
.moca-donate-form__input[type=number] {
  font-size: clamp(24px, 18.4615384615px + 0.7211538462vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.moca-donate-form__presets-label {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
.moca-donate-form__presets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.moca-donate-form__preset {
  min-width: clamp(120px, 97.8461538462px + 2.8846153846vw, 144px);
  min-height: clamp(80px, 57.8461538462px + 2.8846153846vw, 104px);
  padding: 12px var(--wp--preset--spacing--40, 16px);
  border-radius: 0;
  border-color: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--brown);
  background: transparent;
  font-size: clamp(22px, 14.6153846154px + 0.9615384615vw, 30px);
  font-weight: 400;
  line-height: 1;
}
.moca-donate-form__preset.is-active {
  background: var(--wp--preset--color--moca-red);
  border-color: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--sand);
}
.moca-donate-form__methods-label {
  margin: 0;
}
.moca-donate-form__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.moca-donate-form__tab {
  appearance: none;
  border: 1px solid var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
  padding: 11px 21px;
  min-height: 40px;
  font: inherit;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
  cursor: pointer;
  color: var(--wp--preset--color--brown);
}
.moca-donate-form__tab.is-active {
  background: var(--wp--preset--color--moca-red);
  border-color: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--sand);
}
.moca-donate-form__panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, 24px);
}
.moca-donate-form__panel:not(.is-active) {
  display: none;
}
.moca-donate-form__panel.is-active {
  display: flex;
}
.moca-donate-form__panel-note {
  margin: 0;
  color: var(--wp--preset--color--moca-red);
  line-height: 1.4;
}
.moca-donate-form__reference {
  margin: 0;
}
.moca-donate-form__tax-note {
  margin: 0;
  line-height: 1.4;
  font-size: 18px;
}
.moca-donate-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.moca-donate-form .gform_wrapper.gravity-theme input[type=color],
.moca-donate-form .gform_wrapper.gravity-theme input[type=date],
.moca-donate-form .gform_wrapper.gravity-theme input[type=datetime-local],
.moca-donate-form .gform_wrapper.gravity-theme input[type=datetime],
.moca-donate-form .gform_wrapper.gravity-theme input[type=email],
.moca-donate-form .gform_wrapper.gravity-theme input[type=month],
.moca-donate-form .gform_wrapper.gravity-theme input[type=number],
.moca-donate-form .gform_wrapper.gravity-theme input[type=password],
.moca-donate-form .gform_wrapper.gravity-theme input[type=search],
.moca-donate-form .gform_wrapper.gravity-theme input[type=tel],
.moca-donate-form .gform_wrapper.gravity-theme input[type=text],
.moca-donate-form .gform_wrapper.gravity-theme input[type=time],
.moca-donate-form .gform_wrapper.gravity-theme input[type=url],
.moca-donate-form .gform_wrapper.gravity-theme input[type=week],
.moca-donate-form .gform_wrapper.gravity-theme input[type=text],
.moca-donate-form .gform_wrapper.gravity-theme input[type=email] {
  padding: 11px 12px 10px !important;
}
.moca-donate-form .gform_wrapper.gravity-theme .gform_button {
  background-color: var(--wp--preset--color--moca-red);
  border-color: var(--wp--preset--color--moca-red);
}
.moca-donate-form .gform_wrapper.gravity-theme .gform_confirmation_message {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--wp--preset--color--brown);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.gfield--type-product,
.gfield--type-total {
  height: 0;
  overflow: hidden;
}

.moca-bank-transfer-confirmation {
  font-size: 18px;
}
.moca-bank-transfer-confirmation p:last-child {
  margin-bottom: 0;
}
.moca-bank-transfer-confirmation__heading {
  margin: 0 0 20px;
  color: var(--wp--preset--color--moca-red);
  font-size: clamp(20px, 16.3076923077px + 0.4807692308vw, 24px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.moca-bank-transfer-confirmation__subheading {
  margin: 0 0 12px;
}
.moca-bank-transfer-confirmation__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.moca-bank-transfer-confirmation__details li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.moca-bank-transfer-confirmation__reference-label {
  margin: 0 0 4px;
}
.moca-bank-transfer-confirmation__reference {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: clamp(24px, 20.3076923077px + 0.4807692308vw, 28px);
}
.moca-bank-transfer-confirmation__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  color: var(--wp--preset--color--moca-red);
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.moca-bank-transfer-confirmation__copy:hover, .moca-bank-transfer-confirmation__copy:focus-visible {
  text-decoration: underline;
}
.moca-bank-transfer-confirmation__copy svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
.moca-bank-transfer-confirmation__check-icon {
  display: none;
}
.moca-bank-transfer-confirmation__copy.is-copied .moca-bank-transfer-confirmation__copy-icon {
  display: none;
}
.moca-bank-transfer-confirmation__copy.is-copied .moca-bank-transfer-confirmation__check-icon {
  display: block;
}
.moca-bank-transfer-confirmation__note {
  margin: 0 0 20px;
  line-height: 1.4;
}
.moca-bank-transfer-confirmation__address {
  margin: 0 0 20px;
  line-height: 1.4;
}
.moca-bank-transfer-confirmation__button {
  display: inline-block;
  border-radius: 999px;
  padding: 14px 28px;
  background: var(--wp--preset--color--moca-red);
  color: var(--wp--preset--color--white, #fff);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.moca-bank-transfer-confirmation__button:hover, .moca-bank-transfer-confirmation__button:focus-visible {
  opacity: 0.9;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Exhibition Index Header" (acf/exhibition-index-header).
 *
 * 004 — bilingual page title + pill anchor tabs.
 */
.moca-exhibition-index-header {
  padding-block: clamp(48px, 18.4615384615px + 3.8461538462vw, 80px) clamp(20px, -12.3076923077px + 4.2067307692vw, 55px);
}
.moca-exhibition-index-header__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
}
@media (min-width: 1025px) {
  .moca-exhibition-index-header__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.moca-exhibition-index-header__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.48px;
}
.moca-exhibition-index-header__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-exhibition-index-header__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.moca-exhibition-index-header__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid var(--wp--preset--color--brown);
  border-radius: 999px;
  color: var(--wp--preset--color--brown);
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.moca-exhibition-index-header__tab:hover, .moca-exhibition-index-header__tab:focus-visible {
  background: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--white);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Current Exhibition" (acf/current-exhibition).
 *
 * 004 — featured image + copy row.
 */
.moca-current-exhibition {
  padding-block: 0 80px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-current-exhibition__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -9.2307692308px + 4.3269230769vw, 60px);
}
@media (min-width: 1025px) {
  .moca-current-exhibition__inner {
    flex-direction: row;
    align-items: stretch;
  }
}
.moca-current-exhibition__media {
  flex: 1 1 57%;
  position: relative;
  aspect-ratio: 1/1.06;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  max-height: 500px;
  width: calc(100% + 24px);
  margin-left: -12px;
}
@media (min-width: 1025px) {
  .moca-current-exhibition__media {
    width: 100%;
    margin-left: 0;
    max-height: none;
  }
}
.moca-current-exhibition__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-current-exhibition__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, -6.4615384615px + 2.4038461538vw, 32px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.7) 100%);
}
.moca-current-exhibition__overlay-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 0.4em 1em;
  border-radius: 999px;
  background-color: var(--wp--preset--color--moca-red);
  font-size: var(--wp--preset--font-size--body-small, 12px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--white);
}
.moca-current-exhibition__overlay-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--wp--preset--color--white);
}
.moca-current-exhibition__overlay-heading {
  margin: 0;
  font-size: clamp(32px, 21.6615384615px + 1.3461538462vw, 43.2px);
  font-weight: 500;
  line-height: 104.005%;
  letter-spacing: -0.216px;
  text-transform: uppercase;
}
.moca-current-exhibition__overlay-caption {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small, 12px);
  letter-spacing: 2.16px;
  text-transform: uppercase;
}
.moca-current-exhibition__content {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.moca-current-exhibition__content--top {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, -1.8461538462px + 1.8028846154vw, 27px);
}
.moca-current-exhibition__tag {
  align-self: flex-start;
  font-size: clamp(12px, 8.3076923077px + 0.4807692308vw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.moca-current-exhibition__tag::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--wp--preset--color--brown);
}
.moca-current-exhibition__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-style: normal;
  font-weight: 500;
  line-height: 105.104%;
  letter-spacing: 1.03px;
  text-transform: uppercase;
}
.moca-current-exhibition__title-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
  line-height: 89%;
}
.moca-current-exhibition__title-zh {
  color: var(--wp--preset--color--moca-red);
  font-weight: 400;
}
.moca-current-exhibition__meta {
  margin: 0;
  color: var(--wp--preset--color--moca-red);
  font-weight: 400;
  font-size: clamp(12px, 8.3076923077px + 0.4807692308vw, 16px);
  font-family: "Fragment Mono", monospace;
}
.moca-current-exhibition__meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: uppercase;
}
.moca-current-exhibition__description {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
@media (min-width: 1025px) {
  .moca-current-exhibition__description {
    line-height: 1.4;
    max-width: 36rem;
  }
}
.moca-current-exhibition__button {
  align-self: flex-start;
  margin-top: var(--wp--preset--spacing--30, 8px);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "What's Next (Exhibitions)" (acf/whats-next-exhibitions).
 *
 * 004 — dark full-bleed section: bilingual heading + 2-up asymmetric card
 * grid (first card wider). Cards are this block's own markup (render.php
 * builds them inline rather than delegating to card-event-exhibition.php,
 * since that partial is shared with other sections and this design
 * diverges from its look) — no `.moca-card` classes involved.
 */
.moca-whats-next-exhibitions {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
}
.moca-whats-next-exhibitions__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-whats-next-exhibitions__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-whats-next-exhibitions__heading-en {
  text-transform: uppercase;
}
.moca-whats-next-exhibitions__grid {
  display: flex;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  flex-direction: column;
}
@media (min-width: 768px) {
  .moca-whats-next-exhibitions__grid {
    flex-direction: row;
  }
}
@media (min-width: 1025px) {
  .moca-whats-next-exhibitions__grid {
    grid-template-columns: 3fr 2fr;
  }
}
.moca-whats-next-exhibitions__card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  color: inherit;
  text-decoration: none;
  width: 100%;
}
.moca-whats-next-exhibitions__card-thumbnail {
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  aspect-ratio: 1.6/1;
}
@media (min-width: 768px) {
  .moca-whats-next-exhibitions__card--default {
    max-width: 515px;
  }
}
@media (min-width: 1025px) {
  .moca-whats-next-exhibitions__card--default .moca-whats-next-exhibitions__card-thumbnail {
    aspect-ratio: 1/1.14;
  }
}
.moca-whats-next-exhibitions__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.moca-whats-next-exhibitions__card:hover .moca-whats-next-exhibitions__card-image, .moca-whats-next-exhibitions__card:focus-visible .moca-whats-next-exhibitions__card-image {
  transform: scale(1.03);
}
.moca-whats-next-exhibitions__card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.moca-whats-next-exhibitions__card-tag {
  font-size: var(--wp--preset--font-size--body-small, 12px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--moca-red);
}
.moca-whats-next-exhibitions__card-title {
  margin: 0;
  font-size: clamp(18px, 12.4615384615px + 0.7211538462vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.moca-whats-next-exhibitions__card:hover .moca-whats-next-exhibitions__card-title, .moca-whats-next-exhibitions__card:focus-visible .moca-whats-next-exhibitions__card-title {
  opacity: 1;
}
.moca-whats-next-exhibitions__card-date {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-regular, 1rem);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wp--preset--color--moca-red);
}
.moca-whats-next-exhibitions__card-location {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small, 0.875rem);
  opacity: 0.7;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Past Exhibitions" (acf/past-exhibitions).
 *
 * 004 — sand section, bilingual heading, 3-up grid, Load More.
 */
.moca-past-exhibitions {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
}
.moca-past-exhibitions__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-past-exhibitions__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-past-exhibitions__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-past-exhibitions__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-past-exhibitions__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
}
@media (min-width: 768px) {
  .moca-past-exhibitions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1025px) {
  .moca-past-exhibitions__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.moca-past-exhibitions__load-more {
  align-self: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--moca-red);
}
.moca-past-exhibitions .moca-card--default .moca-card__title {
  font-size: 24px;
  line-height: 112%; /* 26.88px */
  letter-spacing: -0.24px;
}
@media (min-width: 768px) {
  .moca-past-exhibitions .moca-card--default .moca-card__title {
    line-height: 122.222%;
    letter-spacing: 0.17px;
    font-size: 18px;
  }
}
.moca-past-exhibitions__load-more[disabled] {
  opacity: 0.6;
  cursor: default;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Exhibition Hero (acf/exhibition-hero).
 * FIGMA 005 — Single Exhibition hero (1716:6152).
 */
.moca-exhibition-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 613px;
  color: var(--wp--preset--color--white);
}
@media (min-width: 1025px) {
  .moca-exhibition-hero {
    align-items: flex-end;
  }
}
.moca-exhibition-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wp--preset--color--brown);
}
.moca-exhibition-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-exhibition-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wp--preset--color--brown);
  opacity: 0.7;
}
.moca-exhibition-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  padding: clamp(18px, 5.0769230769px + 1.6826923077vw, 32px);
  min-height: 100%;
  align-items: stretch;
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .moca-exhibition-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 28.9rem);
    column-gap: clamp(32px, 9.8461538462px + 2.8846153846vw, 56px);
    row-gap: clamp(12px, 6.4615384615px + 0.7211538462vw, 18px);
    align-items: end;
  }
}
.moca-exhibition-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 53.625rem;
}
.moca-exhibition-hero__title-en {
  font-size: clamp(32px, 13.5384615385px + 2.4038461538vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .moca-exhibition-hero__title-en {
    line-height: 1.35;
  }
}
.moca-exhibition-hero__title-zh {
  font-size: clamp(28px, 9.5384615385px + 2.4038461538vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .moca-exhibition-hero__title-zh {
    line-height: 1.05;
  }
}
.moca-exhibition-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-family: var(--wp--preset--font-family--cabin);
  line-height: 1.3;
}
@media (min-width: 1025px) {
  .moca-exhibition-hero__meta {
    grid-column: 1;
    grid-row: 2;
    line-height: 1.44;
  }
}
.moca-exhibition-hero__meta > * + * {
  padding-left: 0;
  border-left: 0;
}
.moca-exhibition-hero__description {
  max-width: 28.9rem;
  font-size: 18px;
  line-height: 1.3;
}
@media (min-width: 1025px) {
  .moca-exhibition-hero__description {
    grid-column: 2;
    grid-row: 1;
  }
}
.moca-exhibition-hero__description :last-child {
  margin-bottom: 0;
}
.moca-exhibition-hero__button {
  margin-top: 18px;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Exhibition Banner (acf/exhibition-banner).
 * FIGMA 015 — Past Exhibition banner (2710:5830).
 */
.moca-exhibition-banner {
  position: relative;
  overflow: hidden;
  min-height: 613px;
  background: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--white);
}
.moca-exhibition-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: clamp(18px, 6px + 1.5625vw, 31px);
}
.moca-exhibition-banner__collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  flex: none;
  height: auto;
  pointer-events: none;
}
.moca-exhibition-banner__collage-item {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.moca-exhibition-banner__collage-item--1 {
  top: 27%;
  left: 30%;
  z-index: 1;
  width: 16%;
  min-width: 7rem;
  aspect-ratio: 230/348;
}
@media (min-width: 768px) {
  .moca-exhibition-banner__collage-item--1 {
    left: 30%;
    width: 16%;
  }
}
.moca-exhibition-banner__collage-item--2 {
  top: 11%;
  left: 49%;
  z-index: 2;
  width: 27%;
  min-width: 10rem;
  aspect-ratio: 395/272;
}
@media (min-width: 768px) {
  .moca-exhibition-banner__collage-item--2 {
    left: 49%;
  }
}
.moca-exhibition-banner__collage-item--3 {
  top: 22%;
  right: 4%;
  left: auto;
  z-index: 3;
  width: 16%;
  min-width: 7rem;
  aspect-ratio: 230/348;
}
.moca-exhibition-banner__collage-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-exhibition-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 8.9230769231px + 1.4423076923vw, 32px);
}
@media (min-width: 1025px) {
  .moca-exhibition-banner__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 28.9rem);
    grid-template-rows: auto auto;
    column-gap: clamp(32px, 9.8461538462px + 2.8846153846vw, 56px);
    row-gap: clamp(12px, 4.6153846154px + 0.9615384615vw, 20px);
    align-items: end;
  }
}
.moca-exhibition-banner__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 4.6153846154px + 0.9615384615vw, 20px);
  max-width: 53.625rem;
}
@media (min-width: 1025px) {
  .moca-exhibition-banner__title {
    grid-column: 1;
    grid-row: 1;
  }
}
.moca-exhibition-banner__title-en {
  font-size: clamp(32px, 13.5384615385px + 2.4038461538vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .moca-exhibition-banner__title-en {
    line-height: 1.35;
  }
}
.moca-exhibition-banner__title-zh {
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 768px) {
  .moca-exhibition-banner__title-zh {
    line-height: 1.05;
    letter-spacing: 1.03px;
  }
}
.moca-exhibition-banner__period {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.44;
}
@media (min-width: 1025px) {
  .moca-exhibition-banner__period {
    grid-column: 1;
    grid-row: 2;
  }
}
.moca-exhibition-banner__description {
  max-width: 28.9rem;
  font-size: var(--wp--preset--font-size--body-small, 0.875rem);
  line-height: 1.55;
}
@media (min-width: 1025px) {
  .moca-exhibition-banner__description {
    grid-column: 2;
    grid-row: 1/3;
    align-self: end;
  }
}
.moca-exhibition-banner__description :last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Past Exhibition Banner (acf/past-exhibition-banner).
 * FIGMA 015 — Single Past Exhibition, Banner frame (2710:5830).
 *
 * Every measurement below comes from that 1440 × 613 frame: the collage
 * positions are its absolute coordinates expressed as percentages, and the
 * type sizes are its desktop values, which the theme's 768 → 1600 clamp
 * reaches at 1600 (so 1440 renders ~7% tighter, as everywhere else).
 */
.moca-past-exhibition-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(448px, 295.6923076923px + 19.8317307692vw, 613px);
  background: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--white);
}
.moca-past-exhibition-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  padding: 50px 12px;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__inner {
    padding: clamp(20px, 9.8461538462px + 1.3221153846vw, 31px) clamp(20px, 9.8461538462px + 1.3221153846vw, 31px) 20px;
  }
}
.moca-past-exhibition-banner__collage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-block: 25px;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__collage {
    position: absolute;
    inset: 0;
    display: block;
    margin-block: unset 0;
    pointer-events: none;
    z-index: -1;
  }
}
.moca-past-exhibition-banner__collage-item {
  position: relative;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__collage-item {
    position: absolute;
  }
}
.moca-past-exhibition-banner__collage-item--1 {
  align-self: flex-end;
  width: 26%;
  aspect-ratio: 230/348;
  margin-top: 45px;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__collage-item--1 {
    top: 26.75%;
    left: 30.14%;
    z-index: 1;
    width: 15.94%;
    min-width: 7rem;
    margin-top: unset;
  }
}
.moca-past-exhibition-banner__collage-item--2 {
  width: 44%;
  aspect-ratio: 395/272;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__collage-item--2 {
    top: 10.77%;
    left: 49.44%;
    z-index: 2;
    width: 27.42%;
    min-width: 10rem;
  }
}
.moca-past-exhibition-banner__collage-item--3 {
  align-self: center;
  width: 26%;
  aspect-ratio: 230/348;
  margin-top: 45px;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__collage-item--3 {
    top: 21.7%;
    right: 3.92%;
    left: auto;
    z-index: 3;
    width: 15.94%;
    min-width: 7rem;
    margin-top: unset;
  }
}
.moca-past-exhibition-banner__collage-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-past-exhibition-banner__content {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 8.9230769231px + 1.4423076923vw, 32px);
  width: 100%;
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__content {
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
  }
}
.moca-past-exhibition-banner__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 53.625rem;
}
@media (min-width: 1025px) {
  .moca-past-exhibition-banner__title {
    grid-column: 1;
    grid-row: 1;
  }
}
.moca-past-exhibition-banner__title-en {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -1.008px;
  text-transform: uppercase;
}
.moca-past-exhibition-banner__title-zh {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1.03px;
}
.moca-past-exhibition-banner__period {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.44;
  margin-top: 12px;
}
.moca-past-exhibition-banner__description {
  max-width: 28.9rem;
  font-size: 14px;
  line-height: 1.55;
}
.moca-past-exhibition-banner__description :last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Exhibition Content Chapter (acf/exhibition-content-chapter).
 * FIGMA 005 — reusable chapter sections (1716:6164+).
 */
.moca-exhibition-chapter {
  padding-block: clamp(48px, 27.6923076923px + 2.6442307692vw, 70px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout1 .moca-exhibition-chapter__eyebrow-zh {
    margin-left: calc(clamp(32px, 15.3846153846px + 2.1634615385vw, 50px) - clamp(12px, 7.3846153846px + 0.6009615385vw, 17px));
  }
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout1 .moca-exhibition-chapter__inner-wrap {
    flex-direction: column;
  }
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout2 .moca-exhibition-chapter__eyebrow-zh {
    margin-left: calc(clamp(32px, 15.3846153846px + 2.1634615385vw, 50px) - clamp(12px, 7.3846153846px + 0.6009615385vw, 17px));
  }
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout2 .moca-exhibition-chapter__inner-wrap {
    flex-direction: column;
  }
}
.moca-exhibition-chapter--layout2 .moca-exhibition-chapter__image-item.image1 {
  max-width: 574px;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout3 .moca-exhibition-chapter__eyebrow-en {
    max-width: 433px;
  }
}
.moca-exhibition-chapter--layout3 .moca-exhibition-chapter__inner {
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout3 .moca-exhibition-chapter__inner {
    flex-direction: row;
  }
}
.moca-exhibition-chapter--layout3 .moca-exhibition-chapter__inner-wrap {
  max-width: 612px;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout3 .moca-exhibition-chapter__inner-wrap {
    flex-direction: column;
  }
}
.moca-exhibition-chapter--layout3 .moca-exhibition-chapter__images {
  max-width: 664px;
}
.moca-exhibition-chapter--layout4 .moca-exhibition-chapter__header {
  max-width: 326px;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--layout4 .moca-exhibition-chapter__body {
    align-self: flex-end;
  }
}
.moca-exhibition-chapter--layout5 .moca-exhibition-chapter__eyebrow {
  flex-direction: column;
}
.moca-exhibition-chapter--layout5 .moca-exhibition-chapter__eyebrow-en {
  max-width: unset;
}
.moca-exhibition-chapter__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 15.3846153846px + 2.1634615385vw, 50px);
}
.moca-exhibition-chapter__inner-wrap {
  display: flex;
  justify-content: space-between;
  gap: clamp(38px, 26.9230769231px + 1.4423076923vw, 50px);
  flex-direction: column;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter__inner-wrap {
    flex-direction: row;
  }
}
.moca-exhibition-chapter__header {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 7.3846153846px + 0.6009615385vw, 17px);
}
.moca-exhibition-chapter__eyebrow {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 7.3846153846px + 0.6009615385vw, 17px);
  font-size: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.moca-exhibition-chapter__eyebrow-en {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  width: 100%;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter__eyebrow-en {
    max-width: 471px;
  }
}
.moca-exhibition-chapter__date-range {
  margin: 0;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 112%; /* 26.88px */
  letter-spacing: -0.24px;
}
.moca-exhibition-chapter__content {
  display: flex;
  gap: clamp(32px, 15.3846153846px + 2.1634615385vw, 50px);
  flex-direction: column;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter__content {
    flex-direction: row;
  }
}
.moca-exhibition-chapter__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.3;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter__body {
    max-width: 471px;
    line-height: 1.4;
  }
}
.moca-exhibition-chapter__body :last-child {
  margin-bottom: 0;
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--images-single .moca-exhibition-chapter__content {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(32px, 6.1538461538px + 3.3653846154vw, 60px);
  }
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--images-single .moca-exhibition-chapter__body {
    flex: 1 1 45%;
    max-width: 29.4375rem;
  }
}
.moca-exhibition-chapter__images--multi {
  display: flex;
  gap: clamp(24px, -9.2307692308px + 4.3269230769vw, 60px);
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .moca-exhibition-chapter__images--multi {
    flex-direction: row;
    align-items: flex-start;
  }
}
@media (min-width: 1025px) {
  .moca-exhibition-chapter--images-count-2 .moca-exhibition-chapter__images--multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.moca-exhibition-chapter__image-item {
  margin: 0;
}
.moca-exhibition-chapter__image-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.moca-exhibition-chapter__image-item.image0 {
  max-width: 669px;
}
.moca-exhibition-chapter__image-item.image1 {
  max-width: 386px;
}
.moca-exhibition-chapter__image-item.image2 {
  max-width: 224px;
}
.moca-exhibition-chapter__caption {
  margin: 0;
  line-height: 1.4;
  opacity: 1;
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  font-style: normal;
  font-weight: 400;
  margin-top: 20px;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Overview (acf/overview).
 * FIGMA 015 — Past Exhibition overview (2386:7184).
 *
 * Desktop is three 56px-gutter columns: heading (flex remainder, 326px at
 * 1440), body (471px), credits (471px). Body stays in the middle column;
 * credits sit on the following row in the right column.
 */
.moca-overview {
  padding-block: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
}
.moca-overview__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 9.8461538462px + 2.8846153846vw, 56px);
}
.moca-overview__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, -0.3076923077px + 1.0817307692vw, 17px);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-overview__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
.moca-overview__body p {
  margin: 0 0 1.4em;
}
.moca-overview__body p:last-child {
  margin-bottom: 0;
}
.moca-overview__credits {
  margin: 0;
  font-style: italic;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
.moca-overview__placeholder {
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
}
@media (min-width: 1025px) {
  .moca-overview__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    column-gap: 56px;
    row-gap: 56px;
    align-items: start;
  }
  .moca-overview__heading {
    grid-column: 1;
    grid-row: 1;
  }
  .moca-overview__body {
    grid-column: 2;
    grid-row: 1;
  }
  .moca-overview__credits {
    grid-column: 3;
    grid-row: 2;
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Event Hero (acf/event-hero).
 * FIGMA 007 — Events Single hero (1716:7244).
 */
.moca-event-hero {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
  overflow: visible;
  min-height: 0;
}
.moca-event-hero .moca-container {
  display: flex;
  gap: clamp(24px, 14.7692307692px + 1.2019230769vw, 34px);
  flex-direction: column;
}
@media (min-width: 1025px) {
  .moca-event-hero .moca-container {
    flex-direction: row;
  }
}
.moca-event-hero__media {
  position: relative;
  z-index: 0;
  order: 2;
  background: transparent;
  aspect-ratio: 845/424;
  overflow: hidden;
  max-width: 845px;
  width: 100%;
}
@media (min-width: 1025px) {
  .moca-event-hero__media {
    order: 2;
  }
}
.moca-event-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.moca-event-hero__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.moca-event-hero__overlay {
  display: none;
}
.moca-event-hero__content {
  position: relative;
  z-index: 1;
  order: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
  max-width: 500px;
}
@media (min-width: 1025px) {
  .moca-event-hero__content {
    order: 1;
  }
}
.moca-event-hero__tag {
  font-size: var(--wp--preset--font-size--body-xs, 11px);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--moca-red);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: 8px;
}
.moca-event-hero__title {
  margin: 0;
  max-width: none;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.003em;
  text-transform: uppercase;
}
.moca-event-hero__rsvp {
  align-self: flex-start;
  margin-top: clamp(15px, -17.3076923077px + 4.2067307692vw, 50px);
}
.moca-event-hero__placeholder {
  position: relative;
  z-index: 2;
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Event Details (acf/event-details).
 * FIGMA 007 — Events Single details (1716:7255).
 */
.moca-event-details {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
}
.moca-event-details__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-event-details__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(24px, 20.3076923077px + 0.4807692308vw, 28px);
  }
}
.moca-event-details__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  flex: 1 1 auto;
}
@media (min-width: 1025px) {
  .moca-event-details__meta {
    flex: 0 0 45%;
    max-width: 507px;
  }
}
.moca-event-details__meta-row {
  display: flex;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  justify-content: space-between;
}
.moca-event-details__meta-label {
  flex: 0 0 auto;
  min-width: 6.5rem;
  color: var(--wp--preset--color--moca-red);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
}
.moca-event-details__meta-value {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.1;
  max-width: 264px;
  letter-spacing: 0.17px;
}
.moca-event-details__date {
  font-weight: 400;
}
.moca-event-details__rsvp {
  align-self: flex-start;
  margin-top: clamp(8px, 0.6153846154px + 0.9615384615vw, 16px);
  padding: 6px 10px 7px;
}
.moca-event-details__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  flex: 1 1 auto;
}
@media (min-width: 1025px) {
  .moca-event-details__copy {
    flex: 1 1 52.8125rem;
    max-width: 52.8125rem;
    padding-top: clamp(1px, -135.6153846154px + 17.7884615385vw, 149px);
  }
}
.moca-event-details__heading {
  font-size: 24px;
  text-transform: uppercase;
}
.moca-event-details__heading p {
  margin: 0;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17px;
}
.moca-event-details__description {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
.moca-event-details__description-col > :last-child {
  margin-bottom: 0;
}
.moca-event-details__description--two-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .moca-event-details__description--two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
    column-count: unset;
  }
}
.moca-event-details__placeholder {
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — Agenda (acf/agenda).
 * FIGMA 007 — Events Single agenda (1716:7295).
 */
.moca-agenda {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--white);
}
.moca-agenda__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 10.7692307692px + 2.7644230769vw, 55px);
  max-width: var(--wp--style--global--wide-size, 1440px);
  margin-inline: auto;
  padding-inline: clamp(0, -9.2307692308px + 1.2019230769vw, 10px);
}
.moca-agenda__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.3076923077px + 0.4807692308vw, 8px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.moca-agenda__heading-en {
  color: var(--wp--preset--color--brown);
  letter-spacing: -0.02em;
}
.moca-agenda__heading-zh {
  letter-spacing: 0.02em;
}
.moca-agenda__body {
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
@media (min-width: 1025px) {
  .moca-agenda__body {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  }
}
.moca-agenda__poster {
  flex: 0 0 auto;
  order: 1;
  overflow: hidden;
  max-width: 534px;
}
@media (min-width: 1025px) {
  .moca-agenda__poster {
    order: 2;
    flex: 0 0 33.375rem;
  }
}
.moca-agenda__poster-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.moca-agenda__content {
  flex: 1 1 auto;
  order: 2;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  max-width: 690px;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}
@media (min-width: 1025px) {
  .moca-agenda__content {
    order: 1;
  }
}
.moca-agenda__event-title {
  margin: 0;
  font-size: clamp(24px, 11.0769230769px + 1.6826923077vw, 38px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.003em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.moca-agenda__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 11.3846153846px + 0.6009615385vw, 21px);
}
.moca-agenda__row {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 0;
  border-bottom: 0;
}
@media (min-width: 768px) {
  .moca-agenda__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  }
}
.moca-agenda__row-time {
  flex: 0 0 auto;
  min-width: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--wp--preset--color--moca-red);
  letter-spacing: 0.003em;
}
.moca-agenda__row-description {
  flex: 1 1 auto;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.25;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .moca-agenda__row-description {
    max-width: 33.125rem;
  }
}
.moca-agenda__rsvp {
  align-self: flex-start;
  margin-top: 16px;
  padding-inline: 20px;
}
@media (min-width: 1025px) {
  .moca-agenda__rsvp {
    display: none;
  }
}
.moca-agenda__placeholder {
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — About MOCA + Newsletter (acf/about-moca-newsletter).
 * FIGMA 005/015 — About MOCA section (1716:6320 / 2386:7334).
 */
.moca-about-moca-newsletter {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  color: var(--wp--preset--color--sand);
  background: var(--wp--preset--color--blue);
}
.moca-about-moca-newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 25.2307692308px + 1.9230769231vw, 56px);
  margin-inline: auto;
}
@media (min-width: 1025px) {
  .moca-about-moca-newsletter__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(40px, 38.1538461538px + 0.2403846154vw, 42px);
  }
}
.moca-about-moca-newsletter__copy {
  gap: clamp(20px, -16.9230769231px + 4.8076923077vw, 60px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .moca-about-moca-newsletter__copy {
    max-width: 487px;
  }
}
.moca-about-moca-newsletter__newsletter {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 487px;
}
.moca-about-moca-newsletter__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, -10.7692307692px + 1.9230769231vw, 20px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.moca-about-moca-newsletter__heading-en {
  color: var(--wp--preset--color--sand);
}
.moca-about-moca-newsletter__heading-zh {
  color: var(--wp--preset--color--sand);
}
.moca-about-moca-newsletter__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .moca-about-moca-newsletter__body {
    max-width: 22.3125rem;
  }
}
.moca-about-moca-newsletter__body :last-child {
  margin-bottom: 0;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gfield_required {
  color: #F5ECE4;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme input[type=email] {
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--white);
  color: var(--wp--preset--color--white);
  padding: 12px 12px 10px !important;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme input[type=email]::placeholder {
  color: var(--wp--preset--color--white);
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gfield_label {
  margin-bottom: 15px !important;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gform_footer {
  margin-top: 15px !important;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gform_footer {
  padding: 0;
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gform_footer .gform_button {
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
  cursor: pointer;
  border-color: var(--wp--preset--color--white);
}
.moca-about-moca-newsletter .gform_wrapper.gravity-theme .gform_footer .gform_button:hover, .moca-about-moca-newsletter .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
  opacity: 0.85;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-about-moca-newsletter__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30, 8px);
  width: 100%;
  margin-top: auto;
}
.moca-about-moca-newsletter__follow-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
}
.moca-about-moca-newsletter__social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 7.2307692308px + 0.3605769231vw, 13px);
}
.moca-about-moca-newsletter__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--sand);
  text-decoration: none;
}
.moca-about-moca-newsletter__social-link:hover, .moca-about-moca-newsletter__social-link:focus-visible {
  opacity: 0.85;
}
.moca-about-moca-newsletter__social-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}
.moca-about-moca-newsletter__social-icon svg path {
  fill: var(--wp--preset--color--sand);
}
.moca-about-moca-newsletter__social-fallback {
  font-size: var(--wp--preset--font-size--body-xs);
}
.moca-about-moca-newsletter__newsletter-heading {
  margin: 0;
  font-size: clamp(18px, 14.3076923077px + 0.4807692308vw, 22px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.003em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .moca-about-moca-newsletter__newsletter-form {
    max-width: 16.9375rem;
  }
}
.moca-about-moca-newsletter__placeholder {
  padding: var(--wp--preset--spacing--40, 16px);
  color: var(--wp--preset--color--brown);
  background: var(--wp--preset--color--sand);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Featured Events" block (acf/featured-events).
 *
 * Events Index (006) featured 2-up + Upcoming/Past anchor tabs.
 */
.moca-featured-events {
  margin-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-featured-events__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 16px) var(--wp--preset--spacing--60, 32px);
  margin-inline: auto;
  margin-bottom: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-featured-events__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
}
@media (min-width: 992px) {
  .moca-featured-events__heading {
    gap: var(--wp--preset--spacing--20, 4px);
  }
}
.moca-featured-events__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-featured-events__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30, 8px);
}
.moca-featured-events__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid var(--wp--preset--color--brown);
  border-radius: 999px;
  color: var(--wp--preset--color--brown);
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.moca-featured-events__tab.is-active, .moca-featured-events__tab:hover, .moca-featured-events__tab:focus-visible {
  background: var(--wp--preset--color--brown);
  color: var(--wp--preset--color--white);
}
.moca-featured-events__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 10.7692307692px + 2.7644230769vw, 55px);
}
@media (min-width: 992px) {
  .moca-featured-events__grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: auto;
  }
}
@media (min-width: 992px) {
  .moca-featured-events__grid .moca-card--large:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.moca-featured-events__grid .moca-card__title {
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  line-height: 1;
}
.moca-featured-events__grid .moca-card__location {
  font-size: 16px;
}
.moca-featured-events .moca-card--large .moca-card__thumbnail {
  aspect-ratio: 2/1;
}
.moca-featured-events .moca-card--large .moca-card__thumbnail .moca-card__image {
  height: auto;
  object-fit: contain;
}
.moca-featured-events__empty {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Upcoming Events" block (acf/upcoming-events).
 *
 * Event single (007) related upcoming grid.
 */
.moca-upcoming-events {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
}
.moca-upcoming-events__heading {
  margin: 0 auto clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-upcoming-events__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-upcoming-events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .moca-upcoming-events__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Past Events" block (acf/past-events).
 *
 * Events Index (006) past events 3-up grid + Load More.
 */
.moca-past-events {
  margin-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
}
.moca-past-events--bg-white {
  background: var(--wp--preset--color--white);
}
.moca-past-events__heading {
  margin: 0 auto clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-past-events__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-past-events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 16.6153846154px + 0.9615384615vw, 32px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .moca-past-events__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1025px) {
  .moca-past-events__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.moca-past-events__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.moca-past-events__card-thumbnail {
  display: block;
  overflow: hidden;
  aspect-ratio: 2/1;
  background: var(--wp--preset--color--white);
}
.moca-past-events__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.moca-past-events__card-body {
  display: flex;
  gap: clamp(12px, 8.3076923077px + 0.4807692308vw, 16px);
}
.moca-past-events__card-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20, 4px);
  color: var(--wp--preset--color--brown);
  min-width: 38px;
}
.moca-past-events__card-date-day {
  font-size: clamp(34px, 24.7692307692px + 1.2019230769vw, 44px);
  font-weight: 500;
  line-height: 1;
}
.moca-past-events__card-date-month {
  font-size: var(--wp--preset--font-size--button-small, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.moca-past-events__card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.moca-past-events__card-presenter {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--moca-red);
}
.moca-past-events__card-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-past-events__card-title a {
  color: inherit;
  text-decoration: none;
}
.moca-past-events__card-title a:hover, .moca-past-events__card-title a:focus-visible {
  color: var(--wp--preset--color--moca-red);
}
.moca-past-events__card-location {
  margin: 0;
  color: #6b6b6b;
  font-size: 14px;
}
.moca-past-events__load-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  align-self: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--moca-red);
  width: 100%;
}
.moca-past-events__empty {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "People Showcase" block (acf/people-showcase).
 *
 * Speakers (007) and Our Chairs (010) — heading + intro row, then
 * three-up portrait cards (521px photo, 24px names).
 */
.moca-people-showcase {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-people-showcase:not(:has(.moca-people-showcase__intro)) {
  background: var(--wp--preset--color--yellow);
}
.moca-people-showcase__header {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -4.6153846154px + 3.7259615385vw, 55px);
  margin-bottom: clamp(30px, -16.1538461538px + 6.0096153846vw, 80px);
}
@media (min-width: 768px) {
  .moca-people-showcase__header {
    flex-direction: row;
  }
}
.moca-people-showcase__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.moca-people-showcase__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-people-showcase__heading-zh {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.moca-people-showcase__intro {
  margin: 0;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .moca-people-showcase__intro {
    max-width: 338px;
  }
}
@media (min-width: 1025px) {
  .moca-people-showcase__intro {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}
.moca-people-showcase__intro p {
  margin: 0 0 1em;
}
.moca-people-showcase__intro p:last-child {
  margin-bottom: 0;
}
.moca-people-showcase__grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  margin-left: auto;
  max-width: 1220px;
}
@media (min-width: 768px) {
  .moca-people-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .moca-people-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 31px;
  }
}
.moca-people-showcase__person {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, 24px);
}
.moca-people-showcase__photo {
  aspect-ratio: 386/521;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
}
.moca-people-showcase__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-people-showcase__body {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, -3.0769230769px + 1.4423076923vw, 20px);
}
.moca-people-showcase__name {
  margin: 0;
  font-size: clamp(18px, 12.4615384615px + 0.7211538462vw, 24px);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-people-showcase__bio p {
  font-size: 18px;
  margin: 0 0 0.75em;
  line-height: 1.4;
}
.moca-people-showcase__bio p:last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Related Products" block (acf/related-products).
 */
.moca-related-products {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-related-products__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 16px) var(--wp--preset--spacing--60, 32px);
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
  margin-bottom: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-related-products__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.moca-related-products__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-related-products__shop-link {
  color: var(--wp--preset--color--moca-red);
  font-size: var(--wp--preset--font-size--links-regular, 1.125rem);
  font-weight: 500;
  text-decoration: none;
}
.moca-related-products__shop-link:hover, .moca-related-products__shop-link:focus-visible {
  text-decoration: underline;
}
.moca-related-products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}
@media (min-width: 1025px) {
  .moca-related-products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.moca-related-products__empty {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Shopify Products" block (acf/shopify-products).
 *
 * Header/grid layout mirrors components/_related-products.scss (same
 * visual pattern, different data source — see that block's own comment).
 * Cards reuse `.moca-card`/`.moca-card--product` (components/_card.scss)
 * for the thumbnail/body/price/swatches/cart structure; `&__label` below
 * is this block's own addition for the "New Arrival"/"Sale" text (a
 * plain label in the card body, not the positioned-over-image
 * `.moca-card__badge` pill card-product.php's WooCommerce cards use).
 *
 * The label's visibility/colour is driven entirely by CSS, not PHP: the
 * render template loops every Shopify collection the product belongs to
 * (`<shopify-list-context type="collection" query="product.collections">`)
 * and stamps each one's handle onto a `.moca-card__label` via
 * `shopify-attr--data-collection-handle`. Every label starts hidden;
 * only the two handles below (matching the store's real "New Arrival"
 * and "Sale" collections) get shown, so a product in any other
 * collection (e.g. "Tote Bags") renders no badge at all.
 */
.moca-shopify-products {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-shopify-products__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40, 16px) var(--wp--preset--spacing--60, 32px);
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  margin-bottom: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-shopify-products__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, -4.6153846154px + 2.1634615385vw, 30px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
@media (min-width: 1025px) {
  .moca-shopify-products__heading {
    flex-direction: row;
  }
}
.moca-shopify-products__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-shopify-products__shop-link {
  color: var(--wp--preset--color--moca-red);
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-weight: 500;
  text-decoration: none;
}
.moca-shopify-products__shop-link:hover, .moca-shopify-products__shop-link:focus-visible {
  text-decoration: underline;
}
.moca-shopify-products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 8.6153846154px + 0.9615384615vw, 24px);
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
}
@media (min-width: 1025px) {
  .moca-shopify-products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.moca-shopify-products__empty {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1440px);
  padding-inline: clamp(20px, 1.5384615385px + 2.4038461538vw, 40px);
}
.moca-shopify-products .moca-card__body {
  gap: 8px;
}
.moca-shopify-products .moca-card__title {
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.22px;
  margin: 0;
}
.moca-shopify-products .moca-card__price {
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 25.3px; /* 140.556% */
  letter-spacing: 0.22px;
  text-transform: uppercase;
}
.moca-shopify-products .moca-card__button {
  font-size: clamp(14px, 10.3076923077px + 0.4807692308vw, 18px);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 999px;
  background: #000;
  margin-top: 2px;
  color: var(--wp--preset--color--sand);
}
.moca-shopify-products .moca-card__label {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.moca-shopify-products .moca-card--product .moca-card__thumbnail {
  aspect-ratio: 330/442;
}

.moca-card__label {
  display: none;
  align-self: flex-start;
  font-size: var(--wp--preset--font-size--body-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.moca-card__label-text {
  display: none;
}
.moca-card__label[data-collection-handle=new-arrival] {
  display: inline;
  color: var(--wp--preset--color--jade);
}
.moca-card__label[data-collection-handle=new-arrival] .moca-card__label-text--new-arrival {
  display: inline;
}
.moca-card__label[data-collection-handle=sale] {
  display: inline;
  color: var(--wp--preset--color--moca-red);
}
.moca-card__label[data-collection-handle=sale] .moca-card__label-text--sale {
  display: inline;
}

.moca-card--shopify .moca-card__thumbnail shopify-media {
  display: block;
  width: 100%;
  height: 100%;
}
.moca-card--shopify .moca-card__thumbnail shopify-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Image Gallery (Captioned)" block (acf/image-gallery-captioned).
 *
 * Layouts: grid-3 | pair-wide-tall (015 Past Exhibition).
 */
.moca-image-gallery-captioned {
  margin-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-image-gallery-captioned__inner {
  display: grid;
  gap: clamp(30px, 2.3076923077px + 3.6057692308vw, 60px);
}
.moca-image-gallery-captioned__item {
  margin: 0;
}
.moca-image-gallery-captioned__image {
  display: block;
  width: 100%;
  max-height: 584px;
  object-fit: cover;
}
.moca-image-gallery-captioned__caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--wp--preset--color--brown);
  opacity: 1;
  margin-top: 24px;
}
.moca-image-gallery-captioned--grid-3 .moca-image-gallery-captioned__inner {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .moca-image-gallery-captioned--grid-3 .moca-image-gallery-captioned__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .moca-image-gallery-captioned--grid-3 .moca-image-gallery-captioned__inner {
    grid-template-columns: repeat(3, minmax(0, 24.125rem));
    justify-content: start;
  }
}
.moca-image-gallery-captioned--grid-3 .moca-image-gallery-captioned__image {
  aspect-ratio: 386/584;
}
.moca-image-gallery-captioned--pair-wide-tall .moca-image-gallery-captioned__inner {
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  .moca-image-gallery-captioned--pair-wide-tall .moca-image-gallery-captioned__inner {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}
.moca-image-gallery-captioned--pair-wide-tall .moca-image-gallery-captioned__inner .moca-image-gallery-captioned__image {
  width: auto;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "About Banner" block (acf/about-banner).
 *
 * FIGMA-SPEC.md's 010 / Who We Are "Hero (About MOCA)" (Main Site frame
 * 1716:8064, banner node 1716:8067). Two equal columns on a solid jade
 * field: left = bilingual H1 + two body paragraphs; right = Acknowledgement
 * of Country + contained 415×360 image, right-aligned. No mobile page
 * frame exists — columns stack in DOM order (content, then aside).
 */
.moca-about-banner {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--sand);
  padding-block: clamp(40px, -81.8461538462px + 15.8653846154vw, 172px);
}
.moca-about-banner__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 7.6923076923px + 2.6442307692vw, 50px);
}
@media (min-width: 1025px) {
  .moca-about-banner__inner {
    flex-direction: row;
    align-items: flex-start;
  }
}
.moca-about-banner__content {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, -15.3846153846px + 5.6490384615vw, 75px);
  min-width: 0;
}
@media (min-width: 1025px) {
  .moca-about-banner__content {
    flex: 1 1 50%;
  }
}
.moca-about-banner__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, -20px + 3.125vw, 30px);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 35.0769230769px + 1.6826923077vw, 62px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--wp--preset--color--sand);
}
.moca-about-banner__heading-en, .moca-about-banner__heading-zh {
  color: var(--wp--preset--color--sand);
}
.moca-about-banner__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, 24px);
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--sand);
}
.moca-about-banner__body p {
  margin-bottom: 22px;
}
.moca-about-banner__body--desktop {
  display: none;
}
@media (min-width: 1025px) {
  .moca-about-banner__body--desktop {
    display: flex;
  }
}
.moca-about-banner__body--mobile {
  display: flex;
}
@media (min-width: 1025px) {
  .moca-about-banner__body--mobile {
    display: none;
  }
}
.moca-about-banner__body-item :last-child {
  margin-bottom: 0;
}
.moca-about-banner__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -27.6923076923px + 6.7307692308vw, 80px);
  min-width: 0;
}
@media (min-width: 1025px) {
  .moca-about-banner__aside {
    flex: 1 1 50%;
    align-items: flex-end;
  }
}
.moca-about-banner__acknowledgement {
  width: 100%;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--sand);
}
.moca-about-banner__acknowledgement--desktop {
  display: none;
}
@media (min-width: 1025px) {
  .moca-about-banner__acknowledgement--desktop {
    display: block;
  }
}
.moca-about-banner__acknowledgement--mobile {
  display: block;
}
@media (min-width: 1025px) {
  .moca-about-banner__acknowledgement--mobile {
    display: none;
  }
}
.moca-about-banner__acknowledgement :last-child {
  margin-bottom: 0;
}
.moca-about-banner__image {
  width: 100%;
  max-width: 415px;
  height: auto;
  aspect-ratio: 415/360;
  object-fit: cover;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "About Content" block (acf/about-content).
 *
 * FIGMA-SPEC.md's 010 / Who We Are "Our Building" (Main Site frame
 * 1716:8064, section node 2027:5731). Top row is heading + two body
 * columns (space-between); image is centered beneath. No mobile page
 * frame exists — the top row stacks in DOM order.
 */
.moca-about-content {
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
  padding-top: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
}
@media (min-width: 768px) {
  .moca-about-content {
    padding-block: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  }
}
.moca-about-content__inner {
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.moca-about-content__top {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
}
@media (min-width: 1025px) {
  .moca-about-content__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }
}
.moca-about-content__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, -5.2307692308px + 1.2019230769vw, 14px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 1025px) {
  .moca-about-content__heading {
    flex: 0 1 342px;
    max-width: 342px;
  }
}
.moca-about-content__heading-en {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 1025px) {
  .moca-about-content__heading-en {
    white-space: nowrap;
  }
}
.moca-about-content__heading-zh {
  letter-spacing: 0;
}
.moca-about-content__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 1025px) {
  .moca-about-content__body {
    flex: 0 1 319px;
    max-width: 319px;
  }
}
.moca-about-content__body :last-child {
  margin-bottom: 0;
}
.moca-about-content__media {
  display: flex;
  justify-content: center;
  width: calc(100% + 24px);
  margin-left: -12px;
}
@media (min-width: 768px) {
  .moca-about-content__media {
    margin-left: 0;
    width: auto;
  }
}
.moca-about-content__image {
  width: 100%;
  max-width: 1023px;
  height: auto;
  aspect-ratio: 1023/654;
  object-fit: cover;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Page Banner" block (acf/page-banner).
 *
 * FIGMA-SPEC.md's 011 / Our Supporters "Hero" (Main Site frame
 * 1716:8224, banner node 1716:8227). Two columns on Secondary Yellow:
 * bilingual H1 (62px EN / 48px ZH) on the left, 18px body on the right.
 * No mobile page frame — columns stack in DOM order.
 */
.moca-page-banner {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
  padding-block: clamp(40px, -34.7692307692px + 9.7355769231vw, 121px);
}
.moca-page-banner__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -36px + 7.8125vw, 89px);
  max-width: 1082px;
  margin-inline: auto;
  min-height: calc(647px - clamp(40px, -34.7692307692px + 9.7355769231vw, 121px) * 2);
  justify-content: center;
}
@media (min-width: 768px) {
  .moca-page-banner__inner {
    min-height: unset;
  }
}
@media (min-width: 1025px) {
  .moca-page-banner__inner {
    flex-direction: row;
  }
}
.moca-page-banner__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.4615384615px + 0.7211538462vw, 14px);
}
@media (min-width: 1025px) {
  .moca-page-banner__heading {
    flex: 0 1 481px;
    max-width: 481px;
  }
}
.moca-page-banner__heading-en {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 35.0769230769px + 1.6826923077vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.48px;
  color: var(--wp--preset--color--brown);
}
.moca-page-banner__heading-zh {
  text-transform: uppercase;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.48px;
}
@media (min-width: 1025px) {
  .moca-page-banner__heading-zh {
    white-space: nowrap;
  }
}
.moca-page-banner__body {
  min-width: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 1025px) {
  .moca-page-banner__body {
    flex: 0 1 512px;
    max-width: 512px;
    padding-top: 96px;
  }
}
.moca-page-banner__body :last-child {
  margin-bottom: 0;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Support List" block (acf/support-list).
 *
 * FIGMA-SPEC.md's 011 / Our Supporters featured rows (frame 1716:8224).
 * Per-item layout via data-layout / data-bg:
 * - title_image_text — 325 | image | 338 (Pang 571×413, Daphne 462×566)
 * - title_text_image — 325 | 338 | image (Gordon 462×566)
 * - title_text       — 325 | 338, text on the right (Wailum)
 * No mobile page frame — columns stack title, then image (if any), then body.
 */
.moca-support-list {
  color: var(--wp--preset--color--brown);
}
.moca-support-list__item {
  padding-block: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
  background: var(--wp--preset--color--white);
}
.moca-support-list__item[data-bg=sand] {
  background: var(--wp--preset--color--sand);
}
.moca-support-list__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1025px) {
  .moca-support-list__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.moca-support-list__item[data-image-width=narrow] .moca-support-list__media {
  max-width: 462px !important;
}
.moca-support-list__title {
  margin: 0;
  font-size: clamp(32px, 20.9230769231px + 1.4423076923vw, 44px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 1025px) {
  .moca-support-list__title {
    flex: 0 1 325px;
    max-width: 325px;
  }
}
.moca-support-list__body {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  color: var(--wp--preset--color--brown);
  order: 2;
}
@media (min-width: 1025px) {
  .moca-support-list__body {
    order: unset;
  }
}
@media (min-width: 1025px) {
  .moca-support-list__body {
    flex: 0 1 338px;
    max-width: 338px;
  }
}
.moca-support-list__body :last-child {
  margin-bottom: 0;
}
.moca-support-list__media {
  width: 100%;
  min-width: 0;
}
@media (min-width: 1025px) {
  .moca-support-list__media {
    flex: 0 1 auto;
  }
}
.moca-support-list__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 566px;
}
@media (min-width: 1025px) {
  .moca-support-list__item[data-layout=title_image_text] .moca-support-list__media {
    max-width: 571px;
    flex: 1 1 40%;
  }
}
@media (min-width: 1025px) {
  .moca-support-list__item[data-layout=title_text_image] .moca-support-list__media {
    max-width: 462px;
    flex: 0 1 462px;
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Board Members" block (acf/board-members).
 *
 * Who We Are (010) — yellow band, bilingual heading, 4-up name + role.
 */
.moca-board-members {
  padding-block: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
}
.moca-board-members__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 17.8461538462px + 2.8846153846vw, 64px);
}
.moca-board-members__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, -5.2307692308px + 1.2019230769vw, 14px);
  max-width: 21rem;
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.moca-board-members__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-board-members__heading-zh {
  text-transform: none;
  line-height: 1;
}
.moca-board-members__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  max-width: 1220px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .moca-board-members__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
  }
}
@media (min-width: 1025px) {
  .moca-board-members__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--70, 40px);
    row-gap: 48px;
  }
}
.moca-board-members__member {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  max-width: 250px;
}
.moca-board-members__name {
  font-size: clamp(20px, 16.3076923077px + 0.4807692308vw, 24px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.moca-board-members__role {
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  line-height: 1.4;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Founding Donors List" block (acf/founding-donors-list).
 *
 * FIGMA-SPEC.md's 011 gratitude section (node 1716:8273): bilingual
 * heading + two name columns on Primary Sand. Featured donor
 * portraits live on acf/support-list, not here.
 *
 * Desktop (1440): 80px block padding, 60px heading-to-list gap,
 * 38px EN/ZH gap, 48px Medium headings, two 18/23 Medium columns
 * with 38px gutter.
 */
.moca-founding-donors-list {
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
  padding-block: clamp(40px, 3.0769230769px + 4.8076923077vw, 80px);
}
.moca-founding-donors-list .moca-container {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -9.2307692308px + 4.3269230769vw, 60px);
}
.moca-founding-donors-list__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, -5.2307692308px + 1.2019230769vw, 14px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  max-width: 624px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.moca-founding-donors-list__heading-en {
  display: block;
  width: 100%;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-founding-donors-list__heading-zh {
  display: block;
  width: 100%;
  max-width: 533px;
}
@media (min-width: 1025px) {
  .moca-founding-donors-list__heading-zh {
    text-align: right;
  }
}
.moca-founding-donors-list__names {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 100%;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.2777777778;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 768px) {
  .moca-founding-donors-list__names {
    flex-direction: row;
    align-items: flex-start;
  }
}
.moca-founding-donors-list__names-col {
  min-width: 0;
}
@media (min-width: 768px) {
  .moca-founding-donors-list__names-col {
    flex: 1 1 0;
  }
}
.moca-founding-donors-list__names-col p {
  margin: 0;
}
.moca-founding-donors-list__names-col br {
  line-height: inherit;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Visit Info" block (acf/visit-info).
 *
 * Visit (013), Figma `1796:2338` + map `1779:3190` — intro | details | map;
 * block labels brown uppercase, values Moca Red in the case they're typed
 * (the address is typed in capitals in the design, so it's forced upper
 * here rather than relying on the editor's caps lock).
 *
 * Column geometry is the design's, not an even split: within the 1380px
 * content area the three columns are 327 / 427 / 362 wide, sitting at
 * x 0 / 534 / 1018 — a 207px gutter on the left of the details column and
 * a 57px one before the map. That's why the middle grid track is flexible
 * with its content pushed to the end instead of three fixed tracks with
 * `space-between`, which would split the slack evenly (132px each).
 */
.moca-visit-info {
  margin-block: clamp(50px, -5.3846153846px + 7.2115384615vw, 110px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-visit-info__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 24.6153846154px + 0.9615384615vw, 40px);
}
@media (min-width: 1025px) {
  .moca-visit-info__inner {
    grid-template-columns: minmax(0, 327px) minmax(0, 1fr) minmax(0, 362px);
    column-gap: clamp(32px, 8.9230769231px + 3.0048076923vw, 57px);
    align-items: start;
  }
}
.moca-visit-info__heading {
  margin: 0 0 clamp(16px, 7.6923076923px + 1.0817307692vw, 25px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3.6923076923px + 1.0817307692vw, 21px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.moca-visit-info__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-visit-info__intro {
  max-width: 327px;
  line-height: 1.4;
}
.moca-visit-info__intro p {
  margin: 0 0 1em;
}
.moca-visit-info__intro p:last-child {
  margin-bottom: 0;
}
.moca-visit-info__column--details {
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-size: 18px;
}
@media (min-width: 1025px) {
  .moca-visit-info__column--details {
    width: 427px;
    justify-self: end;
  }
}
.moca-visit-info__block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.moca-visit-info__block-heading {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-visit-info__block-body {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--wp--preset--color--moca-red);
}
.moca-visit-info__block-body a {
  color: inherit;
  text-decoration: none;
}
.moca-visit-info__block-body a:hover, .moca-visit-info__block-body a:focus-visible {
  text-decoration: underline;
}
.moca-visit-info__block-body--address {
  text-transform: uppercase;
}
.moca-visit-info__directions {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 8px;
  font-size: var(--wp--preset--font-size--button-small, 0.875rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.moca-visit-info__map {
  display: block;
  width: 100%;
  max-width: 362px;
  min-height: 320px;
  aspect-ratio: 362/459;
  border: 0;
  background: var(--wp--preset--color--sand);
}
.moca-visit-info__map-placeholder {
  margin: 0;
  padding: var(--wp--preset--spacing--70, 40px);
  background: var(--wp--preset--color--sand);
  max-width: 362px;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "Before Your Visit" block (acf/before-your-visit).
 *
 * Visit (013) — sand band, accessibility | visiting + group/school.
 */
.moca-before-your-visit {
  padding-block: clamp(50px, -5.3846153846px + 7.2115384615vw, 110px);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--brown);
}
.moca-before-your-visit__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
}
.moca-before-your-visit__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.moca-before-your-visit__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-before-your-visit__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 37px;
}
@media (min-width: 1025px) {
  .moca-before-your-visit__columns {
    grid-template-columns: 1fr 1fr;
  }
}
.moca-before-your-visit__column--visiting {
  display: flex;
  flex-direction: column;
  gap: 37px;
}
.moca-before-your-visit__body {
  line-height: 1.4;
  max-width: 425px;
}
.moca-before-your-visit__body p {
  margin: 0 0 1em;
}
.moca-before-your-visit__body p:last-child {
  margin-bottom: 0;
}
.moca-before-your-visit__body h3,
.moca-before-your-visit__body strong {
  display: block;
  margin: 0 0 0.35em;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — "FAQ Accordion" block (acf/faq-accordion).
 *
 * FAQs (014) — accordion + sticky building illustration.
 */
.moca-faq {
  padding-block: clamp(50px, -5.3846153846px + 7.2115384615vw, 110px);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
}
.moca-faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 17.8461538462px + 2.8846153846vw, 64px);
}
@media (min-width: 1025px) {
  .moca-faq__inner {
    grid-template-columns: minmax(0, 627px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(48px, 18.4615384615px + 3.8461538462vw, 80px);
  }
}
.moca-faq__heading {
  margin: 0 0 clamp(30px, -84.4615384615px + 14.9038461538vw, 154px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 18.4615384615px + 0.7211538462vw, 30px);
  font-size: clamp(32px, 17.2307692308px + 1.9230769231vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 28rem;
}
.moca-faq__heading-en {
  text-transform: uppercase;
  color: var(--wp--preset--color--brown);
}
.moca-faq__category {
  border-bottom: 1px solid var(--wp--preset--color--sand);
}
@media (min-width: 1025px) {
  .moca-faq__category {
    max-width: 627px;
  }
}
.moca-faq__category:last-child {
  border-color: transparent;
}
.moca-faq__category .moca-accordion__item {
  border-color: transparent;
}
.moca-faq__category .moca-accordion__trigger[aria-expanded=true] {
  color: var(--wp--preset--color--moca--brown);
}
.moca-faq__category-trigger {
  padding-block: 10px;
  font-size: clamp(18px, 14.3076923077px + 0.4807692308vw, 22px);
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
}
.moca-faq__category-panel .moca-faq__questions-inner {
  padding-bottom: 16px;
}
.moca-faq__category-heading, .moca-faq__question-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.moca-faq__questions {
  padding: 0 0 0 32px;
}
.moca-faq__question-trigger {
  padding: 10px 6px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}
.moca-faq__answer {
  padding: 0;
  color: var(--wp--preset--color--brown);
  line-height: 1.4;
}
.moca-faq__answer-inner {
  padding: 10px 6px 10px 6px;
}
.moca-faq__answer p {
  margin: 0 0 0.75em;
}
.moca-faq__answer p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1025px) {
  .moca-faq__column--illustration {
    margin-top: clamp(50px, 22.3076923077px + 3.6057692308vw, 80px);
  }
}
.moca-faq__illustration {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  max-width: 80%;
  margin: 0 auto;
}
@media (min-width: 1025px) {
  .moca-faq__illustration {
    max-width: 610px;
    margin-top: unset;
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — site-wide newsletter popup (options page: Newsletter Popup).
 */
.moca-newsletter-popup {
  --moca-popup-duration: 1s;
  --moca-popup-overlay-duration: 1.2s;
  --moca-popup-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.moca-newsletter-popup.is-open {
  pointer-events: auto;
}
.moca-newsletter-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--moca-popup-overlay-duration) var(--moca-popup-easing);
}
.moca-newsletter-popup__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow: auto;
  padding: clamp(24px, 7.3846153846px + 2.1634615385vw, 42px) clamp(24px, 9.2307692308px + 1.9230769231vw, 40px) clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  color: var(--wp--preset--color--brown);
  outline: none;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--wp--preset--color--sand, #f5f0e8);
  max-width: 526px;
  border-top: 4px solid var(--wp--preset--color--moca-red);
  box-shadow: 1px 4px 10px 2px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--moca-popup-duration) var(--moca-popup-easing), transform var(--moca-popup-duration) var(--moca-popup-easing);
}
.moca-newsletter-popup.is-open .moca-newsletter-popup__overlay {
  opacity: 1;
}
.moca-newsletter-popup.is-open .moca-newsletter-popup__dialog {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .moca-newsletter-popup__overlay, .moca-newsletter-popup__dialog {
    transition: none;
    transform: none;
  }
}
.moca-newsletter-popup__close {
  position: absolute;
  top: 16px;
  right: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--brown);
  cursor: pointer;
  width: 11px;
  height: 20px;
}
.moca-newsletter-popup__close:hover, .moca-newsletter-popup__close:focus-visible {
  opacity: 0.7;
}
.moca-newsletter-popup__inner {
  display: flex;
  flex-direction: column;
  max-width: 512px;
}
.moca-newsletter-popup__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  color: #8B6240;
}
.moca-newsletter-popup__heading {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.moca-newsletter-popup__description {
  max-width: 36rem;
  margin: 0 0 40px;
  font-size: 12px;
  line-height: 1.3;
}
.moca-newsletter-popup__description :last-child {
  margin-bottom: 0;
}
.moca-newsletter-popup__form {
  max-width: 640px;
}
.moca-newsletter-popup__form .gform_wrapper.gravity-theme .gform_footer {
  padding: 0 !important;
}
.moca-newsletter-popup__form .gform_heading,
.moca-newsletter-popup__form .gform_required_legend {
  display: none;
}
.moca-newsletter-popup__form .gfield_label {
  margin-bottom: 10px !important;
  font-size: 18px;
  font-weight: 400 !important;
  text-transform: uppercase;
}
.moca-newsletter-popup__form input[type=email],
.moca-newsletter-popup__form input[type=text] {
  width: 100%;
  margin-bottom: 0;
  padding: 14px 16px !important;
  border: 1px solid var(--wp--preset--color--brown);
  border-radius: 0;
  background: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--brown);
  font-size: 16px !important;
  text-transform: uppercase;
}
.moca-newsletter-popup__form input[type=email]::placeholder,
.moca-newsletter-popup__form input[type=text]::placeholder {
  color: var(--wp--preset--color--brown);
  opacity: 0.45;
}
.moca-newsletter-popup__form .gform_footer,
.moca-newsletter-popup__form .gform-footer {
  margin-top: 16px !important;
  padding: 0;
}
.moca-newsletter-popup__form .gform_button,
.moca-newsletter-popup__form input[type=submit] {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--moca-red, #b45b38) !important;
  color: var(--wp--preset--color--white, #fff);
  border-color: var(--wp--preset--color--moca-red) !important;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}
.moca-newsletter-popup__disclaimer {
  margin: 16px 0 0;
  line-height: 1.3;
  font-size: 12px;
  text-align: center;
  color: #6B5F4A;
}

body.moca-popup-open {
  overflow: hidden;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — header.php styling.
 *
 * Class names here must match header.php exactly (both use moca) —
 * update both together, never one without the other. Nav item/submenu
 * markup itself comes from Moca_Nav_Walker (inc/nav-walker.php).
 *
 * Breakpoint: the desktop nav / hamburger swap happens at `desktop`
 * (1025px) — FIGMA-SPEC.md has no mobile page frames to measure an exact
 * switch point against (see its "No mobile frames" note), so this keeps
 * the project-wide default already used elsewhere in this file rather
 * than inventing a new one.
 */
.moca-top-banner {
  background: var(--wp--preset--color--moca-red);
  color: var(--wp--preset--color--white, #fff);
}
.moca-top-banner__text {
  margin: 0;
  padding-block: 5px;
  font-size: clamp(12px, 6.4615384615px + 0.7211538462vw, 18px);
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.home .moca-top-banner {
  display: none;
}

:root {
  --moca-header-bar-height: 62px;
  --moca-sticky-header-offset: 0px;
}
@media (min-width: 1025px) {
  :root {
    --moca-header-bar-height: 76px;
  }
}

.admin-bar {
  --moca-sticky-header-offset: var(--wp-admin--admin-bar--height, 32px);
}

.moca-site-header {
  position: sticky;
  top: var(--moca-sticky-header-offset, 0px);
  z-index: 100;
  overflow: visible;
  background: var(--wp--preset--color--sand, #f5ece4);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.moca-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding-block: 16px;
  gap: 20px;
}
@media (min-width: 1025px) {
  .moca-site-header__inner {
    min-height: 76px;
    padding-block: 0;
  }
}
.moca-site-header__branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 1025px) {
  .moca-site-header__branding {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-right: auto;
  }
}
.moca-site-header__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.moca-site-header__logo-img,
.moca-site-header__logo img {
  display: block;
  width: 102px;
  max-width: 100%;
  height: auto;
}
.moca-site-header__logo svg path {
  fill: var(--wp--preset--color--moca-red, #b45b38);
}
.moca-site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.moca-site-header__membership {
  display: none;
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 1025px) {
  .moca-site-header__membership {
    display: inline-flex;
  }
}
.moca-site-header__membership:hover, .moca-site-header__membership:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
.moca-site-header__right {
  display: flex;
  max-width: 80%;
  justify-content: space-between;
  width: 950px;
  gap: 20px;
}
@media (min-width: 1280px) {
  .moca-site-header__right {
    gap: clamp(20px, -7.6923076923px + 3.6057692308vw, 50px);
  }
}
.moca-site-header__donate {
  display: none;
  background: var(--wp--preset--color--moca-red, #b45b38);
  border-color: var(--wp--preset--color--moca-red, #b45b38);
  color: var(--wp--preset--color--white, #fff);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
@media (min-width: 1025px) {
  .moca-site-header__donate {
    display: inline-flex;
  }
}
.moca-site-header__donate:hover, .moca-site-header__donate:focus-visible {
  background: var(--wp--preset--color--brown, #2e1505);
  border-color: var(--wp--preset--color--brown, #2e1505);
  opacity: 1;
}

.moca-primary-nav {
  display: none;
}
@media (min-width: 1025px) {
  .moca-primary-nav {
    display: flex;
    align-self: stretch;
  }
}
@media (min-width: 1280px) {
  .moca-primary-nav {
    margin-right: 32px;
  }
}

.moca-nav {
  display: flex;
  gap: clamp(20px, 8.9230769231px + 1.4423076923vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.moca-nav--primary {
  align-items: stretch;
  height: 100%;
}
.moca-nav__item {
  position: static;
}
.moca-nav__item.moca-nav__item--plain {
  display: none;
}

.moca-primary-nav li.moca-nav__item {
  position: static !important;
  display: flex;
  align-items: center;
}
.moca-primary-nav li.moca-nav__item:hover .moca-nav__link, .moca-primary-nav li.moca-nav__item:focus-visible .moca-nav__link {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--brown, #2e1505);
}

.moca-nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s ease;
  font-size: 16px;
}
@media (min-width: 1280px) {
  .moca-nav__link {
    font-size: 18px;
  }
}

.moca-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
@media (min-width: 1025px) {
  .moca-nav__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.moca-nav__toggle-icon {
  transition: transform 0.2s ease;
}
.moca-nav__toggle[aria-expanded=true] .moca-nav__toggle-icon {
  transform: rotate(180deg);
}

.moca-primary-nav .moca-nav__submenu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.moca-site-header__megamenu {
  height: 0;
  overflow: hidden;
  background: var(--wp--preset--color--white, #fff);
}
@media (max-width: 1024px) {
  .moca-site-header__megamenu {
    display: none;
  }
}
.moca-site-header__megamenu.is-open {
  border-bottom-color: rgba(17, 17, 17, 0.08);
}
.moca-site-header__megamenu-inner {
  position: relative;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.moca-site-header__megamenu-panel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin: 0;
  padding: 28px 0;
  list-style: none;
}
.moca-site-header__megamenu-panel.is-open {
  display: flex;
}
.moca-site-header__megamenu-panel:has(.moca-nav__nested) {
  gap: 28px 64px;
}
.moca-site-header__megamenu .moca-nav__item--has-nested {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 160px;
}
.moca-site-header__megamenu .moca-nav__nested {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}
.moca-site-header__megamenu .moca-nav__submenu-link,
.moca-site-header__megamenu .moca-nav__nested-link {
  display: block;
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.moca-site-header__megamenu .moca-nav__submenu-link:hover, .moca-site-header__megamenu .moca-nav__submenu-link:focus-visible,
.moca-site-header__megamenu .moca-nav__nested-link:hover,
.moca-site-header__megamenu .moca-nav__nested-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.moca-site-header__megamenu .moca-nav__submenu-link {
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.24px;
}
.moca-site-header__megamenu .moca-nav__nested-link {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.moca-primary-nav .moca-nav__item--has-children.is-open > .moca-nav__link {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--brown, #2e1505);
}

.moca-site-header.is-submenu-open .moca-primary-nav .moca-nav__item:not(.is-open) > .moca-nav__link {
  opacity: 0.3;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.moca-lang-switcher {
  position: relative;
}
.moca-lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 41px;
  padding: 6px;
  border: 1px solid var(--wp--preset--color--brown, #2e1505);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--brown, #2e1505);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  font-size: 16px;
}
@media (min-width: 1280px) {
  .moca-lang-switcher__toggle {
    font-size: 18px;
    min-width: 75px;
  }
}
.moca-lang-switcher__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 999;
  min-width: 88px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--wp--preset--color--white, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: var(--wp--preset--spacing--20, 4px);
  overflow: hidden;
}
.moca-lang-switcher__list[hidden] {
  display: none;
}
.moca-lang-switcher__link {
  display: block;
  padding: 0.4em 1em;
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}
.moca-lang-switcher__link.is-current {
  font-weight: 500;
}
.moca-lang-switcher__link:hover, .moca-lang-switcher__link:focus-visible {
  background: var(--wp--preset--color--sand, #f5ece4);
}

.moca-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--brown, #2e1505);
  flex-shrink: 0;
  z-index: 2;
}
@media (min-width: 1025px) {
  .moca-nav-toggle {
    display: none;
  }
}
.moca-nav-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
}
.moca-nav-toggle__bar {
  display: block;
  height: 2px;
  background: currentcolor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.moca-nav-toggle[aria-expanded=true] .moca-nav-toggle__bars {
  gap: 0;
}
.moca-nav-toggle[aria-expanded=true] .moca-nav-toggle__bars .moca-nav-toggle__bar:nth-child(1) {
  transform: translateY(1.5px) rotate(45deg);
}
.moca-nav-toggle[aria-expanded=true] .moca-nav-toggle__bars .moca-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.moca-nav-toggle[aria-expanded=true] .moca-nav-toggle__bars .moca-nav-toggle__bar:nth-child(3) {
  transform: translateY(-1.5px) rotate(-45deg);
}

.moca-mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease;
  max-height: 0;
}
@media (min-width: 1025px) {
  .moca-mobile-nav {
    display: none;
  }
}
.moca-mobile-nav.is-open {
  pointer-events: auto;
  max-height: calc(100dvh - var(--moca-header-bar-height, 62px) - var(--moca-sticky-header-offset, 0px));
  overflow-y: auto;
}
.moca-mobile-nav__panel {
  background: var(--wp--preset--color--white, #fff);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  padding: 24px 12px 25px;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  justify-content: space-between;
  gap: 20px;
}
.moca-mobile-nav__nav {
  position: relative;
  margin-bottom: 20px;
}
.moca-mobile-nav .moca-nav {
  flex-direction: column;
  align-items: stretch;
  gap: 17px;
}
.moca-mobile-nav__screen {
  display: none;
  flex-direction: column;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}
.moca-mobile-nav__screen.is-active {
  display: flex;
}
.moca-mobile-nav__screen--root {
  display: flex;
  overflow: visible;
}
.moca-mobile-nav .moca-nav__link:hover, .moca-mobile-nav .moca-nav__link:focus-visible,
.moca-mobile-nav .moca-nav__submenu-link:hover,
.moca-mobile-nav .moca-nav__submenu-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--brown, #2e1505);
}
.moca-mobile-nav__back-item {
  list-style: none;
}
.moca-mobile-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--brown, #2e1505);
  opacity: 0.5;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.moca-mobile-nav__back-icon {
  display: inline-flex;
  width: 9px;
  height: 15px;
}
.moca-mobile-nav__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 17px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}
.moca-mobile-nav__membership {
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.moca-mobile-nav__membership:hover, .moca-mobile-nav__membership:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
.moca-mobile-nav__donate {
  display: inline-flex;
  background: var(--wp--preset--color--moca-red, #b45b38);
  border-color: var(--wp--preset--color--moca-red, #b45b38);
  color: var(--wp--preset--color--sand, #f5ece4);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  padding: 8px;
  border-radius: 999px;
}
.moca-mobile-nav .moca-nav__submenu {
  padding-left: 20px;
}
.moca-mobile-nav .moca-nav__submenu > li:first-child {
  padding-top: 17px;
}
.moca-mobile-nav .moca-nav__submenu-link {
  display: block;
  padding: 0;
  color: var(--wp--preset--color--brown, #2e1505);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.18px;
  text-transform: uppercase;
}
.moca-mobile-nav .moca-nav__submenu-link:last-child {
  margin-bottom: 5px;
}
.moca-mobile-nav .moca-nav__item {
  display: flex;
  align-items: stretch;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
}
.moca-mobile-nav .moca-nav__item:hover .moca-nav__link, .moca-mobile-nav .moca-nav__item:focus-visible .moca-nav__link {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wp--preset--color--brown, #2e1505);
}
.moca-mobile-nav .moca-nav__link {
  flex: 1;
  font-size: 18px;
  padding-block: 0;
  white-space: normal;
}
.moca-mobile-nav .moca-nav__item--has-children .moca-nav__link {
  cursor: pointer;
}

body.moca-nav-open {
  overflow: hidden;
}

.admin-bar .moca-site-header {
  top: 0;
}
@media (min-width: 768px) {
  .admin-bar .moca-site-header {
    top: 32px;
  }
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * Moca — footer.php styling (Frame 31508 / Footer component intent).
 *
 * Terracotta / moca-red background, large white wordmark, 3-col
 * address / contact / newsletter, partner logos, bottom legal bar.
 */
.moca-site-footer {
  padding-block: clamp(48px, 46.1538461538px + 0.2403846154vw, 50px) clamp(30px, 11.5384615385px + 2.4038461538vw, 50px);
  background: var(--wp--preset--color--moca-red);
  color: var(--wp--preset--color--white);
}
.moca-site-footer__wordmark {
  max-width: 100%;
  margin-bottom: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
}
.moca-site-footer__wordmark-img, .moca-site-footer__wordmark img {
  display: block;
  width: 100%;
  max-width: 1380px;
  height: auto;
}
.moca-site-footer__tagline {
  margin-bottom: 0;
  font-size: clamp(12px, 6.4615384615px + 0.7211538462vw, 18px);
  line-height: 1.4;
  color: var(--wp--preset--color--white);
  text-align: center;
}
@media (min-width: 768px) {
  .moca-site-footer__tagline {
    text-align: unset;
  }
}
.moca-site-footer__tagline__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.moca-site-footer__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  gap: 22px;
}
@media (min-width: 768px) {
  .moca-site-footer__main {
    flex-direction: row;
    gap: unset;
  }
}
.moca-site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .moca-site-footer__column {
    gap: var(--wp--preset--spacing--40, 16px);
  }
}
.moca-site-footer__column.moca-site-footer__column--newsletter {
  gap: 12px;
}
.moca-site-footer__social--desktop {
  display: none;
}
@media (min-width: 768px) {
  .moca-site-footer__social--desktop {
    display: inline-flex;
  }
}
.moca-site-footer__social--mobile {
  display: inline-flex;
}
@media (min-width: 768px) {
  .moca-site-footer__social--desktop {
    display: inline-flex;
  }
  .moca-site-footer__social--mobile {
    display: none;
  }
}
@media (min-width: 1025px) {
  .moca-site-footer__column--address {
    grid-column: 1;
  }
}
.moca-site-footer__address {
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 19.8px */
  text-transform: uppercase;
}
.moca-site-footer__directions {
  align-self: flex-start;
  color: #3a4c3c;
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
  padding: 4px 10px;
  order: 2;
}
@media (min-width: 768px) {
  .moca-site-footer__directions {
    order: unset;
  }
}
.moca-site-footer__hours {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 4px);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
@media (min-width: 768px) {
  .moca-site-footer__hours {
    margin-top: clamp(10px, 0.7692307692px + 1.2019230769vw, 20px);
  }
}
@media (min-width: 992px) {
  .moca-site-footer__hours {
    line-height: 140%;
  }
}
.moca-site-footer__hours-label {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  display: none;
}
@media (min-width: 768px) {
  .moca-site-footer__hours-label {
    display: block;
  }
}
.moca-site-footer__contact-heading, .moca-site-footer__newsletter-heading {
  margin: 0;
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.moca-site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--body-regular, 1rem);
}
@media (min-width: 768px) {
  .moca-site-footer__contact-list {
    gap: 12px;
  }
}
.moca-site-footer__contact-list li {
  font-weight: 400;
  font-size: clamp(16px, 14.1538461538px + 0.2403846154vw, 18px);
  line-height: 110%;
}
@media (min-width: 992px) {
  .moca-site-footer__contact-list li {
    line-height: 140%;
  }
}
.moca-site-footer__contact-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.moca-site-footer__contact-button {
  align-self: flex-start;
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
}
.moca-site-footer__newsletter-form {
  font-size: 14px;
}
@media (min-width: 768px) {
  .moca-site-footer__newsletter-form {
    max-width: 240px;
  }
}
.moca-site-footer__newsletter-form .gform_wrapper input[type=text],
.moca-site-footer__newsletter-form .gform_wrapper input[type=email] {
  width: 100%;
  margin-bottom: 0;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--white);
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--brown);
  text-transform: uppercase;
}
.moca-site-footer__newsletter-form .gform_wrapper input[type=text]::placeholder,
.moca-site-footer__newsletter-form .gform_wrapper input[type=email]::placeholder {
  color: rgba(58, 76, 60, 0.4);
}
.moca-site-footer__newsletter-form .gform_wrapper button,
.moca-site-footer__newsletter-form .gform_wrapper input[type=submit] {
  padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--white);
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--moca-red);
  font-weight: 500;
  cursor: pointer;
}
.moca-site-footer__newsletter-form .gform_wrapper .gform_footer {
  margin-top: 0;
}
.moca-site-footer__newsletter-form .gform_wrapper .gform_button {
  border: 1px solid var(--wp--preset--color--white);
  border-radius: 999px;
  background: var(--wp--preset--color--white);
  color: #3A4C3C;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
  width: auto;
}
.moca-site-footer__newsletter-form .gform_wrapper .gform_button:hover:not(:disabled) {
  color: var(--wp--preset--color--moca-red);
}
.moca-site-footer__newsletter-form .gform_wrapper .gfield_error input {
  border-color: var(--wp--preset--color--brown) !important;
}
.moca-site-footer__partners {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  margin-block: clamp(24px, 9.2307692308px + 1.9230769231vw, 40px);
  justify-content: space-between;
}
@media (min-width: 768px) {
  .moca-site-footer__partners {
    flex-direction: row;
    grid-template-columns: repeat(3, 1fr);
  }
}
.moca-site-footer__partners-group {
  display: flex;
  gap: 24px;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group {
    max-width: 612px;
  }
}
.moca-site-footer__partners-group:first-child .moca-site-footer__partners-logo {
  max-width: calc((100% - 42px) / 3);
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group:first-child .moca-site-footer__partners-logo {
    max-width: unset;
  }
}
.moca-site-footer__partners-group:not(:first-child) {
  padding-top: 22px;
  border-top: 1px solid var(--wp--preset--color--white);
  width: 100%;
  flex-direction: row;
  align-items: center;
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group:not(:first-child) {
    flex-direction: column;
    padding-top: unset;
    border-top: unset;
    align-items: unset;
  }
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group.footer_partners_technology {
    max-width: 190px;
  }
  .moca-site-footer__partners-group.footer_partners_super {
    max-width: 230px;
  }
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group.footer_partners_technology {
    max-width: 190px;
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .moca-site-footer__partners-group.footer_partners_super {
    max-width: 230px;
    flex-direction: column;
  }
}
.moca-site-footer__partners-heading {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--wp--preset--color--white);
}
@media (min-width: 1025px) {
  .moca-site-footer__partners-heading {
    font-weight: 500;
  }
}
.moca-site-footer__partners-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 21px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .moca-site-footer__partners-logos {
    gap: var(--wp--preset--spacing--50, 24px);
  }
}
.moca-site-footer__partners-logo {
  display: flex;
  align-items: center;
}
.moca-site-footer__partners-logo img {
  max-height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}
@media (min-width: 768px) {
  .moca-site-footer__partners-logo img {
    max-height: 40px;
  }
}
.moca-site-footer__partners-name {
  font-size: var(--wp--preset--font-size--body-small);
}
.moca-site-footer__bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  font-size: var(--wp--preset--font-size--body-xs, 0.6875rem);
  flex-direction: column;
}
@media (min-width: 768px) {
  .moca-site-footer__bottom-bar {
    flex-direction: row;
  }
}
.moca-site-footer__bottom-link {
  color: inherit;
  text-decoration: unset;
  text-underline-offset: 2px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .moca-site-footer__bottom-link {
    font-weight: 500;
  }
}
.moca-site-footer__bottom-link:hover {
  text-decoration: underline;
}
.moca-site-footer__copyright {
  margin: 0;
  flex: 1 0 100%;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 15.4px */
  text-transform: uppercase;
  order: 3;
}
@media (min-width: 768px) {
  .moca-site-footer__copyright {
    order: 0;
    flex: 0 1 auto;
    text-align: center;
  }
}
@media (min-width: 1025px) {
  .moca-site-footer__copyright {
    font-weight: 500;
  }
}

.moca-social-list {
  align-items: center;
  gap: var(--wp--preset--spacing--40, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.moca-social-list__link {
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.moca-social-list__link:hover, .moca-social-list__link:focus-visible {
  opacity: 0.8;
}
.moca-social-list__icon {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
.moca-social-list__label {
  font-size: var(--wp--preset--font-size--body-small);
  text-decoration: underline;
}

/**
 * Moca — base typography.
 *
 * Figma Main Site bindings use Helvetica Neue:
 * - Regular (400) for body / supporting copy
 * - Medium (500) for headings, nav, buttons, labels
 * Never Bold (700) — that was making chrome and sections look too heavy.
 *
 * theme.json holds sizes/colors; this file maps Helvetica Neue faces to
 * those weights and sets structural rhythm. `local()` sources are tried
 * first (macOS/iOS ship Helvetica Neue, so most visitors need no
 * download); the `url()` woff2 (self-hosted from src/fonts/helvetica-neue/,
 * under a purchased webfont license) is the fallback for everyone else,
 * so the typeface renders consistently across platforms.
 */
/**
 * 404 page — same yellow two-column banner as .moca-page-banner.
 */
.moca-404 {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--brown);
  padding-block: clamp(40px, -34.7692307692px + 9.7355769231vw, 121px);
}
.moca-404__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, -36px + 7.8125vw, 89px);
  max-width: 1082px;
  margin-inline: auto;
  min-height: calc(647px - clamp(40px, -34.7692307692px + 9.7355769231vw, 121px) * 2);
  justify-content: center;
}
@media (min-width: 768px) {
  .moca-404__inner {
    min-height: unset;
  }
}
@media (min-width: 1025px) {
  .moca-404__inner {
    flex-direction: row;
  }
}
.moca-404__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.4615384615px + 0.7211538462vw, 14px);
}
@media (min-width: 1025px) {
  .moca-404__heading {
    flex: 0 1 481px;
    max-width: 481px;
  }
}
.moca-404__code {
  font-weight: 500;
  font-size: clamp(48px, 35.0769230769px + 1.6826923077vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.48px;
  color: var(--wp--preset--color--moca-red);
}
.moca-404__heading-en {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(48px, 35.0769230769px + 1.6826923077vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.48px;
  color: var(--wp--preset--color--brown);
}
.moca-404__heading-zh {
  text-transform: uppercase;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.48px;
}
@media (min-width: 1025px) {
  .moca-404__heading-zh {
    white-space: nowrap;
  }
}
.moca-404__body {
  min-width: 0;
  font-size: var(--wp--preset--font-size--body-large, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--brown);
}
@media (min-width: 1025px) {
  .moca-404__body {
    flex: 0 1 512px;
    max-width: 512px;
    padding-top: 96px;
  }
}
.moca-404__body :last-child {
  margin-bottom: 0;
}
.moca-404__button {
  margin-top: var(--wp--preset--spacing--40, 16px);
}

/**
 * Page with container — vertical padding on #main-content.
 */
.moca-page-container {
  padding-block: 80px;
}

/*# sourceMappingURL=style-global.css.map*/