/*
Theme Name: KaiyiChen Official Theme
Theme URI: https://kaiyichen.com
Author: Kaiyi Chen
Author URI: https://kaiyichen.com
Description: Official WordPress theme for Kaiyi Chen.
Version: 1.3.36
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: kaiyichen-official-theme
*/

/* Link Hub contract */
.link-hub{width:min(100%,600px);margin-inline:auto;padding-block:clamp(40px,8vw,96px)}.link-hub__header{display:grid;gap:16px}.link-hub__profile{width:120px;height:120px;object-fit:cover;border-radius:50%}.link-hub__tabs{position:sticky;top:0;z-index:2;display:flex;gap:8px;overflow-x:auto;padding-block:16px;background:var(--theme-color-background)}.link-hub__tabs button{border:0;background:transparent;color:var(--theme-color-surface-muted);padding:10px 14px}.link-hub__tabs button[aria-selected=true]{color:var(--theme-color-title)}.link-hub__panel{display:grid;gap:12px}.link-hub__button{justify-content:space-between;width:100%}.link-hub__button>span{display:grid;text-align:left}.link-hub__button small{color:var(--theme-color-text-muted)}.link-hub__item{padding:20px;border-radius:20px;background:var(--theme-color-surface)}.link-hub__socials{display:flex;flex-wrap:wrap;gap:8px}.link-hub__socials a,.link-hub__share{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--theme-color-border);border-radius:var(--theme-radius-extra);background:var(--theme-color-surface-muted);color:var(--theme-color-text);font:inherit;text-decoration:none;cursor:pointer}

:root {
  color-scheme: light dark;
  /* Light mode palette. */
  --theme-light-color-1: #5eff14;
  --theme-light-color-2: #6940ff;
  --theme-light-color-3: #000000;
  --theme-light-color-4: #ffffff;
  --theme-light-color-5: #ececec;
  --theme-light-color-6: #eeeeee;
  --theme-light-color-7: #fafafa;
  --theme-light-color-8: #ffffff;
  --theme-light-color-9: #000000;
  --theme-light-color-10: #ffffff;
  --theme-light-color-11: #c62828;

  /* Dark mode palette. */
  --theme-dark-color-1: #5eff14;
  --theme-dark-color-2: #6940ff;
  --theme-dark-color-3: #ffffff;
  --theme-dark-color-4: #ffffff;
  --theme-dark-color-5: #282a2c;
  --theme-dark-color-6: #eeeeee;
  --theme-dark-color-7: #1a1c1e;
  --theme-dark-color-8: #0e0f11;
  --theme-dark-color-9: #000000;
  --theme-dark-color-10: #ffffff;
  --theme-dark-color-11: #c62828;

  /* Active semantic tokens. */
  --theme-color-primary: var(--theme-light-color-1);
  --theme-color-secondary: var(--theme-light-color-2);
  --theme-color-primary-hover: color-mix(in srgb, var(--theme-light-color-1) 82%, var(--theme-light-color-3));
  --theme-color-secondary-hover: color-mix(in srgb, var(--theme-light-color-2) 82%, var(--theme-light-color-3));
  --theme-color-text: var(--theme-light-color-3);
  --theme-color-surface: var(--theme-light-color-4);
  --theme-color-border: var(--theme-light-color-5);
  --theme-color-text-muted: color-mix(in srgb, var(--theme-color-text) 68%, transparent);
  --theme-color-surface-muted: var(--theme-light-color-7);
  --theme-color-overlay: var(--theme-light-color-8);
  --theme-color-button-text: var(--theme-light-color-9);
  --theme-color-button-hover-text: var(--theme-light-color-10);
  --theme-color-on-primary: #000000;
  --theme-color-on-secondary: #ffffff;
  --theme-color-danger: var(--theme-light-color-11);
  --theme-color-7: var(--theme-light-color-7);
  --theme-color-9: var(--theme-light-color-9);

  /* Background */
  --theme-color-background: var(--theme-color-surface);
  --theme-color-summary: var(--theme-color-text-muted);
  --theme-radius-light: 5px;
  --theme-radius-medium: 10px;
  --theme-radius-heavy: 20px;
  --theme-radius-extra: 100px;

  /* Fixed theme-owned typography tokens. */
  --theme-font-family-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-font-family-brand: "Poppins", var(--theme-font-family-sans);
  --theme-font-family: var(--theme-font-family-sans);
  --theme-font-size-h1: 4.5rem;
  --theme-font-size-h2: 3.5rem;
  --theme-font-size-h3: 2.5rem;
  --theme-font-size-h4: 2rem;
  --theme-font-size-h5: 1.5rem;
  --theme-font-size-h6: 1.25rem;
  --theme-font-size-body: 1.25rem;
  --theme-font-size-text: var(--theme-font-size-body);
  --theme-font-size-body-sm: 1rem;
  --theme-font-size-label: .875rem;
  --theme-font-size-caption: .75rem;
  --theme-font-size-button: 1rem;
  --theme-font-size-card-title: 1.75rem;
  --theme-font-size-display-xl: clamp(4rem, 10vw, 11rem);
  --theme-font-size-display: clamp(3rem, 6vw, 6rem);
  --theme-font-size-page-title: var(--theme-font-size-h1);
  --theme-font-size-section-title: var(--theme-font-size-h2);
  --theme-font-size-body-lg: 1.25rem;
  --theme-font-size-archive-breadcrumb: 1.25rem;
  --theme-font-size-archive-description: 1.25rem;
  --theme-font-size-post-meta: 1rem;
  --theme-single-article-title: 4.5rem;
  --theme-single-article-excerpt: 1.5rem;
  --theme-single-toc: 1.0625rem;
  --theme-line-height-heading: 1.15;
  --theme-line-height-body: 1.75;
  --theme-line-height-text: 1.75;
  --theme-line-height-button: 1.25;
  --theme-line-height-h1: 1.5;
  --theme-line-height-h2: 1.5;
  --theme-line-height-h3: 1.5;
  --theme-line-height-h4: 1.5;
  --theme-line-height-h5: 1.5;
  --theme-line-height-h6: 1.5;
  --theme-line-height-card-title: 1.35;
  --theme-line-height-archive-breadcrumb: 1.5;
  --theme-line-height-archive-description: 1.75;
  --theme-line-height-post-meta: 1.5;
  --theme-single-line-height-article-title: 1.5;
  --theme-single-line-height-article-excerpt: 1.6;
  --theme-single-line-height-toc: 1.6;
  --theme-font-weight-regular: 400;
  --theme-font-weight-medium: 500;
  --theme-font-weight-semibold: 600;
  --theme-font-weight-bold: 700;
  --theme-letter-spacing-display: -0.045em;
  --theme-letter-spacing-heading: -0.03em;
  --theme-letter-spacing-body: 0;
  --theme-letter-spacing-meta: 0;
  --theme-line-height-display: 1.08;
  --theme-line-height-ui: 1.25;
  --theme-space-1: .25rem;
  --theme-space-2: .5rem;
  --theme-space-3: .75rem;
  --theme-space-4: 1rem;
  --theme-space-5: 1.25rem;
  --theme-space-6: 1.5rem;
  --theme-space-7: 2rem;
  --theme-space-8: 2.5rem;
  --theme-space-9: 3rem;
  --theme-space-section: clamp(4rem, 8vw, 8rem);
  --theme-section-padding: var(--theme-space-section);
  --theme-radius-sm: .3125rem;
  --theme-radius-md: .625rem;
  --theme-radius-lg: 1.25rem;
  --theme-radius-pill: 999px;
  --theme-radius-round: 50%;
  --theme-control-height-sm: 2.75rem;
  --theme-control-height: 3.125rem;
  --theme-control-height-lg: 3.4375rem;
  --theme-header-marquee-font-size: 16px;
  --theme-header-marquee-line-height: 1.5;
  --theme-header-top-height: 3.4375rem;
  --theme-page-padding: 2.5vw;
  --theme-layout-gap: 1.5rem;
  --theme-content-header-footer-spacing: 40px;
  --theme-menu-angle-color: var(--theme-color-primary);
}

@media (max-width: 1024px) {
  :root {
    --theme-page-padding: 5vw;
    --theme-font-size-h1: 3.75rem;
    --theme-font-size-h2: 3rem;
    --theme-font-size-h3: 2.125rem;
    --theme-font-size-h4: 1.75rem;
    --theme-font-size-h5: 1.375rem;
    --theme-font-size-h6: 1.125rem;
    --theme-font-size-body: 1.0625rem;
    --theme-font-size-text: var(--theme-font-size-body);
    --theme-font-size-button: 1rem;
    --theme-font-size-card-title: 1.5rem;
    --theme-font-size-archive-breadcrumb: 1.125rem;
    --theme-font-size-archive-description: 1.125rem;
    --theme-font-size-post-meta: .9375rem;
    --theme-single-article-title: 3.75rem;
    --theme-single-article-excerpt: 1.375rem;
    --theme-single-toc: 1.0625rem;
    --theme-header-marquee-font-size: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --theme-page-padding: 6vw;
    --theme-font-size-h1: 2.75rem;
    --theme-font-size-h2: 2.25rem;
    --theme-font-size-h3: 1.875rem;
    --theme-font-size-h4: 1.5rem;
    --theme-font-size-h5: 1.25rem;
    --theme-font-size-h6: 1.0625rem;
    --theme-font-size-body: 1rem;
    --theme-font-size-text: var(--theme-font-size-body);
    --theme-font-size-button: 1rem;
    --theme-font-size-card-title: 1.375rem;
    --theme-font-size-archive-breadcrumb: 1.0625rem;
    --theme-font-size-archive-description: 1rem;
    --theme-font-size-post-meta: .875rem;
    --theme-single-article-title: 2.75rem;
    --theme-single-article-excerpt: 1.25rem;
    --theme-single-toc: 1.0625rem;
    --theme-header-marquee-font-size: .9375rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-color-primary: var(--theme-dark-color-1);
    --theme-color-secondary: var(--theme-dark-color-2);
    --theme-color-primary-hover: color-mix(in srgb, var(--theme-dark-color-1) 82%, var(--theme-dark-color-3));
    --theme-color-secondary-hover: color-mix(in srgb, var(--theme-dark-color-2) 82%, var(--theme-dark-color-3));
    --theme-color-text: var(--theme-dark-color-3);
    --theme-color-surface: var(--theme-dark-color-8);
    --theme-color-border: var(--theme-dark-color-5);
    --theme-color-text-muted: color-mix(in srgb, var(--theme-color-text) 68%, transparent);
    --theme-color-surface-muted: var(--theme-dark-color-7);
    --theme-color-overlay: var(--theme-dark-color-4);
    --theme-color-button-text: var(--theme-dark-color-9);
    --theme-color-button-hover-text: var(--theme-dark-color-10);
    --theme-color-danger: var(--theme-dark-color-11);
    --theme-color-7: var(--theme-dark-color-7);
    --theme-color-9: var(--theme-dark-color-9);
    --theme-color-on-primary: #000000;
    --theme-color-on-secondary: #ffffff;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-color-primary: var(--theme-light-color-1);
  --theme-color-secondary: var(--theme-light-color-2);
  --theme-color-primary-hover: color-mix(in srgb, var(--theme-light-color-1) 82%, var(--theme-light-color-3));
  --theme-color-secondary-hover: color-mix(in srgb, var(--theme-light-color-2) 82%, var(--theme-light-color-3));
  --theme-color-text: var(--theme-light-color-3);
  --theme-color-surface: var(--theme-light-color-4);
  --theme-color-border: var(--theme-light-color-5);
  --theme-color-text-muted: color-mix(in srgb, var(--theme-color-text) 68%, transparent);
  --theme-color-summary: var(--theme-color-text-muted);
  --theme-color-surface-muted: var(--theme-light-color-7);
  --theme-color-overlay: var(--theme-light-color-8);
  --theme-color-button-text: var(--theme-light-color-9);
  --theme-color-button-hover-text: var(--theme-light-color-10);
  --theme-color-danger: var(--theme-light-color-11);
  --theme-color-on-primary: #000000;
  --theme-color-on-secondary: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-color-primary: var(--theme-dark-color-1);
  --theme-color-secondary: var(--theme-dark-color-2);
  --theme-color-primary-hover: color-mix(in srgb, var(--theme-dark-color-1) 82%, var(--theme-dark-color-3));
  --theme-color-text: var(--theme-dark-color-3);
  --theme-color-surface: var(--theme-dark-color-8);
  --theme-color-border: var(--theme-dark-color-5);
  --theme-color-text-muted: color-mix(in srgb, var(--theme-color-text) 68%, transparent);
  --theme-color-summary: var(--theme-color-text-muted);
  --theme-color-surface-muted: var(--theme-dark-color-7);
  --theme-color-overlay: var(--theme-dark-color-4);
  --theme-color-button-text: var(--theme-dark-color-9);
  --theme-color-button-hover-text: var(--theme-dark-color-10);
  --theme-color-danger: var(--theme-dark-color-11);
  --theme-color-on-primary: #000000;
  --theme-color-on-secondary: #ffffff;
}


* {
  box-sizing: border-box;
}

html {
  font-family: var(--theme-font-family);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size-body);
  line-height: var(--theme-line-height-body);
  max-width: 100%;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 0.65em;
  color: var(--theme-color-text);
  font-family: var(--theme-font-family);
  font-weight: 600;
  letter-spacing: var(--theme-letter-spacing-heading);
}

h1 {
  font-weight: 700;
  font-size: var(--theme-font-size-h1);
  line-height: var(--theme-line-height-h1);
  letter-spacing: var(--theme-letter-spacing-display);
}

h2 {
  font-size: var(--theme-font-size-h2);
  line-height: var(--theme-line-height-h2);
}

h3 {
  font-size: var(--theme-font-size-h3);
  line-height: var(--theme-line-height-h3);
}

h4 {
  font-size: var(--theme-font-size-h4);
  line-height: var(--theme-line-height-h4);
}

h5 {
  font-size: var(--theme-font-size-h5);
  line-height: var(--theme-line-height-h5);
}

h6 {
  font-size: var(--theme-font-size-h6);
  line-height: var(--theme-line-height-h6);
}

/* Written twice rather than joined: a selector list containing a pseudo-element
   the browser does not know is dropped whole, so Firefox would lose both. */
::selection {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  text-shadow: none;
}

::-moz-selection {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  text-shadow: none;
}

.site-main,
.site-header__middle,
.site-footer {
  padding-inline: var(--theme-page-padding);
}

.site-main {
  padding-block: var(--theme-content-header-footer-spacing);
}

.site-footer {
  margin-top: var(--theme-content-header-footer-spacing);
  padding-top: clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--theme-radius-heavy) var(--theme-radius-heavy) 0 0;
  background: var(--theme-color-surface-muted);
}

.site-footer__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(12rem, .65fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  border-radius: var(--theme-radius-heavy) var(--theme-radius-heavy) 0 0;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.site-footer__cta {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}

.site-footer__eyebrow,
.site-footer__contact h3,
.site-footer__menu h3 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  line-height: var(--theme-line-height-post-meta);
  opacity: .65;
}

.site-footer__cta h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h3);
  line-height: var(--theme-line-height-h3);
}

.site-footer__button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .75rem;
  min-height: 50px;
  padding: .875rem 1.5rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9) !important;
  font-size: var(--theme-font-size-button);
  font-weight: 700;
  text-decoration: none !important;
}

.site-footer__button::before,
.site-footer__button::after,
.site-footer__menu a::before,
.site-footer__menu a::after,
.site-footer__contact a::before,
.site-footer__contact a::after,
.site-footer__bottom a::before,
.site-footer__bottom a::after {
  content: none !important;
}

.site-footer__menus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.site-footer__menu {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.site-footer__menu .menu {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu a,
.site-footer__contact a,
.site-footer__bottom a {
  color: var(--theme-color-text);
  text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__contact a:hover,
.site-footer__bottom a:hover {
  color: var(--theme-color-primary);
}

.site-footer__contact {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.site-footer__contact p {
  margin: 0;
  color: var(--theme-color-text);
  line-height: var(--theme-line-height-text);
  opacity: .65;
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__socials a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: .25rem .75rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  font-size: var(--theme-font-size-post-meta);
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--theme-color-border);
  font-size: var(--theme-font-size-post-meta);
  line-height: var(--theme-line-height-post-meta);
}

.site-footer__bottom p {
  margin: 0;
  opacity: .65;
}

@media (max-width: 1024px) {
  .site-footer__panel {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: 1rem;
  }

  .site-footer__panel {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2rem;
  }

  .site-footer__menus {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer__contact {
    grid-column: auto;
  }

  .site-footer__bottom {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
  }
}

.content-grid {
  display: grid;
  gap: var(--theme-layout-gap);
}

.insight-layout {
  width: 100%;
}

.insight-header {
  display: grid;
  gap: 30px;
  margin-bottom: 2.5rem;
}

.insight-header h1,
.insight-header__description {
  margin: 0;
}

.insight-header__description {
  max-width: 48rem;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-archive-description);
  line-height: var(--theme-line-height-archive-description);
  opacity: .65;
}

.insight-category-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.insight-category-cloud a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 8px;
  padding: .5rem .75rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.insight-category-cloud a:hover,
.insight-category-cloud a:focus-visible {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-primary);
}

.insight-category-cloud a.is-active,
.insight-category-cloud a:hover,
.insight-category-cloud a:focus-visible {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.insight-category-cloud a.is-active .insight-category-cloud__count,
.insight-category-cloud a:hover .insight-category-cloud__count,
.insight-category-cloud a:focus-visible .insight-category-cloud__count {
  background: var(--theme-color-9);
  color: var(--theme-color-primary);
}

.insight-category-cloud__count {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .75em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.post-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.post-card {
  --post-card-avatar-size: 5rem;
  --post-card-author-gutter: 0rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

.post-card__image {
  display: block;
  overflow: hidden;
  border-radius: var(--theme-radius-medium);
  aspect-ratio: 16 / 9;
  background: var(--theme-color-surface-muted);
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__content {
  display: grid;
  align-content: start;
  gap: 20px;
}

.post-card__reading-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
}

.post-card__reading-time svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--theme-color-primary);
  flex: 0 0 auto;
}

.post-card__content h2,
.post-card__content p {
  margin: 0;
}

.kaiyichen-feed-item__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: var(--theme-font-weight-bold);
}

.post-card__content h2 {
  color: var(--theme-color-text);
  font-size: 30px !important;
  line-height: 45px !important;
}

.post-card__content h2 a {
  color: inherit;
  text-decoration: none;
}

.post-card__category {
  width: fit-content;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
}

.post-card__excerpt {
  font-size: 18px !important;
  line-height: 32px !important;
  opacity: 0.65;
}

.post-card__meta {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  line-height: var(--theme-line-height-post-meta);
  opacity: .65;
}

.empty-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.empty-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-primary);
}

.empty-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.empty-card>div {
  display: grid;
  gap: 10px;
}

.empty-card h2,
.empty-card p {
  margin: 0;
  color: var(--theme-color-text);
}

.empty-card h2 {
  font-size: var(--theme-font-size-h5);
  line-height: var(--theme-line-height-h5);
}

.empty-card p {
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

@media (max-width: 1024px) {
  .post-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .breadcrumbs span:not(:last-child) {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 767px) {
  .post-card-grid {
    grid-template-columns: 1fr;
  }
}

.single-layout {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 15px;
}

.single-sidebar {
  padding-right: 30px;
}

.single-content {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 25px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-archive-breadcrumb);
  line-height: var(--theme-line-height-archive-breadcrumb);
  opacity: .65;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs span:not(:last-child) {
  width: 1rem;
  height: 1rem;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumbs span:not(:last-child) {
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  border: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}

.article-title {
  width: 100%;
  color: var(--theme-color-text);
  font-size: var(--theme-single-article-title);
  line-height: var(--theme-single-line-height-article-title);
  letter-spacing: var(--theme-letter-spacing-display);
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .article-toc--mobile {
    padding-block: 1.25rem;
  }
}

.site-header__top {
  padding-inline: var(--theme-page-padding);
}

.site-header__top {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .breadcrumbs span:not(:last-child) {
    width: .85rem;
    height: .85rem;
  }
}

.article-excerpt {
  color: var(--theme-color-text);
  font-size: var(--theme-single-article-excerpt);
  line-height: var(--theme-single-line-height-article-excerpt);
  opacity: 0.65;
}

.article-featured-image {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: var(--theme-radius-medium);
}

.article-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.article-toc,
.single-sidebar {
  font-size: var(--theme-single-toc);
  line-height: var(--theme-single-line-height-toc);
}

.article-toc {
  position: static;
  top: auto;
  color: var(--theme-color-text);
}

.article-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.25rem;
  color: var(--theme-color-text);
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: normal;
  list-style: none;
}

.article-toc summary::-webkit-details-marker {
  display: none;
}

.article-toc summary::after {
  width: 1rem;
  height: 1rem;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.article-toc[open] summary::after {
  transform: rotate(180deg);
}

.article-toc summary::after {
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='%23292D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  border: 0;
  -webkit-mask: none;
  mask: none;
  transform: none;
}

.article-toc[open] summary::after {
  transform: rotate(180deg);
}

.article-toc ol {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--theme-color-border);
  list-style: none;
}

.article-toc a {
  position: relative;
  display: block;
  color: inherit;
  line-height: 1.35;
  text-decoration: none;
}

.article-toc a::after {
  content: none !important;
}

.article-toc a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1.25rem - 1px);
  width: 2px;
  content: "" !important;
  background: var(--theme-color-border);
}

.article-toc a.is-active::before {
  background: var(--theme-color-primary);
}

.article-toc .toc-h3 a::before {
  left: calc(-2.75rem - 1px);
}

.article-toc .toc-h4 a::before {
  left: calc(-3.75rem - 1px);
}

@media (min-width: 768px) {
  .article-toc:not(.article-toc--mobile) summary {
    pointer-events: none;
  }

  .article-toc:not(.article-toc--mobile) summary::after {
    display: none;
  }
}

.article-toc .toc-h3 {
  padding-left: 1.5rem;
}

.article-toc .toc-h4 {
  padding-left: 2.5rem;
}

/* Animated underline for content links; navigation and button-like links opt out. */
a.underline-motion,
.single-content__body a,
.article-excerpt a,
.author-card a,
.site-footer a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: color .3s ease;
}

a.underline-motion:is(:hover, :focus, :active, :visited),
.single-content__body a:is(:hover, :focus, :active, :visited),
.article-excerpt a:is(:hover, :focus, :active, :visited),
.author-card a:is(:hover, :focus, :active, :visited),
.site-footer a:is(:hover, :focus, :active, :visited) {
  text-decoration: none !important;
  box-shadow: none !important;
}

a.underline-motion::before,
.single-content__body a::before,
.article-excerpt a::before,
.author-card a::before,
.site-footer a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-text);
  opacity: .1;
}

a.underline-motion::after,
.single-content__body a::after,
.article-excerpt a::after,
.author-card a::after,
.site-footer a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

a.underline-motion:hover::after,
.single-content__body a:hover::after,
.article-excerpt a:hover::after,
.author-card a:hover::after,
.site-footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Article-wide link treatment. Block buttons and action controls are never underlined. */
.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a) {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  text-decoration: none !important;
}

.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a)::before,
.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a)::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
}

.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a)::before {
  opacity: .15;
}

.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a)::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.single-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ui-button):not(.post-action):not(.article-featured-image):not(.article-toc a):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.single-content .wp-block-button__link,
.single-content .wp-element-button,
.single-content .post-action {
  padding-bottom: .5rem;
  text-decoration: none !important;
}

.single-content .wp-block-button__link::before,
.single-content .wp-block-button__link::after,
.single-content .wp-element-button::before,
.single-content .wp-element-button::after,
.single-content .post-action::before,
.single-content .post-action::after {
  content: none !important;
}

.single-content__body {
  margin-top: 0;
}

.single-content__body p {
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-block: 20px;
  border-block: 1.5px solid var(--theme-color-border);
}

.post-action {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.post-action>span {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  line-height: 1;
}

.post-action:last-child {
  margin-left: auto;
}

.post-action svg {
  display: block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
}

.post-action__icon--saved {
  display: none;
}

.post-action.is-saved .post-action__icon--bookmark {
  display: none;
}

.post-action.is-saved .post-action__icon--saved {
  display: inline-flex;
}

.post-action .post-action__icon--saved {
  display: none !important;
}

.post-action.is-saved .post-action__icon--saved {
  display: inline-flex !important;
}

.post-action.is-saved .post-action__icon--bookmark {
  display: none !important;
}

.post-action__count {
  align-self: center;
  display: inline-grid !important;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
}

.post-action.is-saved {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.single-content .article-toc a {
  position: relative;
  display: block;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.single-content .article-toc a::after {
  content: none !important;
}

.single-content .article-toc a::before {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: calc(-1.25rem - 1px);
  width: 2px;
  height: auto;
  background: var(--theme-color-border);
  border-radius: 0;
  content: "" !important;
  opacity: 1;
  transform: none;
  transition: none;
}

.single-content .article-toc a.is-active::before {
  background: var(--theme-color-primary);
}

.single-content .article-toc .toc-h3 a::before,
.single-content .article-toc .toc-h4 a::before {
  left: calc(-1.25rem - 1px);
}

@media (max-width: 767px) {
  .single-content .article-toc--mobile ol {
    border-left: 1.5px solid var(--theme-color-border);
  }

  .single-content .article-toc--mobile a::before {
    background: var(--theme-color-border);
  }

  .single-content .article-toc--mobile a.is-active::before {
    background: var(--theme-color-primary);
  }
}

.author-card {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1.5px solid var(--theme-color-border);
}

.author-card .avatar {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.author-card>div {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
}

.author-card__label {
  margin: 0;
  color: var(--theme-color-primary);
  font-size: .875rem;
}

.author-card h4 {
  margin: 0;
  color: var(--theme-color-text);
}

.author-card>div>p:last-child {
  margin: 0;
}

@media (max-width: 767px) {
  .author-card {
    flex-wrap: wrap;
  }

  .author-card>div {
    flex-basis: 13rem;
  }
}

.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1.5px solid var(--theme-color-border);
}

.comments-area>h4,
.comments-area .comment-reply-title {
  color: var(--theme-color-text);
}

.comment-list {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.comment-list .children {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0 0 4.5rem;
  padding: 0;
  list-style: none;
}

.comment-card>article {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.comment-card>article>.avatar {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.comment-card__column {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
}

.comment-card__header {
  display: flex;
  align-items: start;
  gap: 1rem;
}

.comment-card__meta {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.comment-card__author,
.comment-card__time {
  margin: 0;
}

.comment-card__author {
  color: var(--theme-color-text);
  font-weight: 700;
}

.comment-card__time {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  line-height: var(--theme-line-height-post-meta);
  opacity: .65;
  text-align: right;
}

.comment-card__edit {
  flex: 0 0 auto;
}

.comment-card__edit a,
.comment-card__reply a {
  color: var(--theme-color-text);
}

.comment-card__edit a {
  font-size: var(--theme-font-size-post-meta);
}

.comment-card__bubble {
  padding: 1.25rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.comment-card__bubble> :first-child {
  margin-top: 0;
}

.comment-card__bubble> :last-child {
  margin-bottom: 0;
}

.comment-card__reply {
  width: fit-content;
}

.comment-card__edit a,
.comment-card__reply a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  text-decoration: none !important;
}

.comment-card__edit a::before,
.comment-card__reply a::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-text);
  opacity: .1;
}

.comment-card__edit a::after,
.comment-card__reply a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.comment-card__edit a:hover::after,
.comment-card__reply a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 767px) {
  .comment-list .children {
    margin-left: 1.5rem;
  }

  .comment-card>article>.avatar {
    width: 3.5rem;
    height: 3.5rem;
  }

  .comment-card__meta {
    flex-wrap: wrap;
    gap: .35rem;
  }

  .comment-card__time {
    text-align: left;
  }

  .comment-card__bubble {
    padding: 1rem;
  }
}

.comment-respond {
  margin-top: 50px;
  padding: 40px 30px;
  border-top: 5px solid var(--theme-color-primary);
  background: var(--theme-color-surface-muted);
}

.comment-form {
  display: grid;
  gap: 1rem;
}

.comment-form label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

/*
 * Both element types: the reveal needs two labels, which an <input> cannot
 * hold, so ui.js swaps it for a real <button>. A rule naming only the input
 * would stop applying the moment the script ran.
 */
.comment-form .form-submit :is(input, button) {
  width: 100%;
  min-height: 50px;
  padding: .75rem 1.25rem;
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  cursor: pointer;
}

.comment-respond .akismet_comment_form_privacy_notice {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  line-height: var(--theme-line-height-post-meta);
  opacity: .7;
}

.comment-respond .akismet_comment_form_privacy_notice a {
  color: inherit;
}


.article-toc--mobile {
  display: none;
}

@media (max-width: 767px) {
  .single-layout {
    grid-template-columns: 1fr;
  }

  .single-sidebar {
    display: none;
  }

  .article-toc--mobile {
    display: flex;
    flex-direction: column;
    position: static;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: var(--theme-radius-medium);
    background: var(--theme-color-surface-muted);
  }

  .article-toc--mobile[open] {
    flex-direction: column-reverse;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .article-toc--mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .article-toc--mobile summary::after {
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.3s ease;
  }

  .article-toc--mobile[open] summary::after {
    transform: rotate(180deg);
  }

  .article-toc--mobile[open] summary {
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .article-toc--mobile ol {
    padding-bottom: .25rem;
  }

  .article-toc--mobile a {
    font-size: 0.9375rem;
  }
}

/* Article controls and mobile TOC refinements. */
.article-toc ol {
  position: relative;
}

.article-toc ol::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  background: var(--theme-color-border);
  content: "";
}

.article-toc a {
  text-decoration: none !important;
}

.article-toc a::after {
  content: none !important;
}

.article-toc a::before {
  z-index: 1;
  width: 3px;
  background: transparent;
}

.article-toc a.is-active::before {
  background: var(--theme-color-primary) !important;
}

@media (max-width: 767px) {
  .post-actions {
    flex-wrap: nowrap;
    overflow-x: hidden;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }

  .post-actions::-webkit-scrollbar {
    display: none;
  }

  .post-actions .post-action {
    flex: none !important;
    width: auto !important;
    max-width: max-content !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    margin-right: 20px !important;
  }

  .post-actions [data-bookmark-label] {
    display: none;
  }

  .post-actions .post-action:first-child {
    min-width: 50px;
    padding-inline: .75rem;
  }

  .article-toc--mobile {
    position: sticky !important;
    bottom: 30px;
    z-index: 8;
    margin-bottom: 30px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-color-text) 12%, transparent);
  }

  .article-toc--mobile summary::after {
    display: block;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .article-toc--mobile ol::before {
    background: var(--theme-color-border);
  }
}

/* Desktop utility controls are not part of the mobile header row. */
@media (max-width: 1024px) {
  .site-header__desktop-utilities {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .post-actions [href="#comments"]>span:first-of-type {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Current interface refinements: footer, menu dropdown and editorial cards.
   These rules deliberately live last so legacy component styles cannot alter
   the new shared geometry.                                                   */

/* A slightly more open default rhythm for every post-card heading. */
.post-card__content h2 {
  line-height: 1.6;
}

/* The lower-left portrait is flush to the card edge. Its breathing room is
   assigned above the portrait instead of leaving an unnecessary outer gutter. */
.post-card__author-mask {
  --post-card-author-gutter: 0px;
}




/* Phone announcement and the navigation menu form one continuous header
   stack. The menu is a dropdown anchored by ui.js to middle-row bottom. */
@media (max-width: 767px) {

  .site-header__top,
  .header-marquee {
    min-height: 55px;
    height: 55px;
  }

  .ui-drawer[data-ui-drawer] {
    top: var(--ui-menu-top, 125px);
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - var(--ui-menu-top, 125px));
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    border: 0;
    border-top: 1px solid var(--theme-color-border);
    border-radius: 0 0 var(--theme-radius-medium) var(--theme-radius-medium);
    box-shadow: 0 1.5rem 2.5rem rgb(0 0 0 / 16%);
  }

  .ui-drawer[data-ui-drawer]>.ui-sheet__header {
    width: calc(100% + 2.5rem);
    margin: 0 -1.25rem;
    border-bottom: 1px solid var(--theme-color-border);
  }
}

/* Rebuilt shape footer, adapted to Kaiyi's palette and registered WP menus. */
.kaiyi-footer-section {
  position: relative;
  width: 100%;
  margin-top: var(--theme-content-footer-gap, 40px);
  padding: 34px 42px 42px;
  overflow: hidden;
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
}

.kaiyi-footer-layout {
  width: 100%;
  max-width: 1920px;
  margin: auto;
  border-radius: 0 0 var(--theme-radius-heavy) var(--theme-radius-heavy);
}

.kaiyi-footer {
  position: relative;
  min-height: 600px;
  padding: 60px 0 40px;
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  display: flex;
  flex-direction: column;
}

.kaiyi-cutout-top-left,
.kaiyi-cutout-top-right {
  position: absolute;
  z-index: 5;
  top: 0;
  background: var(--theme-color-surface);
}

.kaiyi-cutout-top-left {
  left: 0;
  padding: 0 20px 20px 0;
  border-bottom-right-radius: var(--theme-radius-heavy);
}

.kaiyi-cutout-top-right {
  right: 0;
  padding: 0 0 20px 20px;
  border-bottom-left-radius: var(--theme-radius-heavy);
}

.kaiyi-socials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaiyi-social-link {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
  font-weight: 700;
  text-decoration: none;
}

/*
 * The size belongs here, not in the footer.
 *
 * An inline SVG with a viewBox and no width or height has no intrinsic size,
 * and the only rule giving these one was scoped to .site-footer -- so the rail
 * drew fine there and came out as three empty circles anywhere else.
 */
.kaiyi-social-link svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.has-hover-reveal::before,
.has-hover-reveal::after {
  pointer-events: none;
}

.kaiyi-footer-message {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--theme-color-text);
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}

.kaiyi-footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(130px, .65fr) minmax(130px, .65fr) minmax(200px, .9fr);
  gap: clamp(32px, 5vw, 90px);
  padding: 0 clamp(32px, 4vw, 80px) 0 clamp(88px, 8vw, 130px);
}

.kaiyi-footer-cta-title {
  max-width: 10ch;
  margin: 0 0 1.5rem;
  color: var(--theme-color-text);
  font-size: clamp(2.2rem, 3.2vw, 3.7rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.kaiyi-footer .site-footer__eyebrow {
  margin: 0 0 .75rem;
  color: var(--theme-color-summary);
}

.kaiyi-cta-button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  padding: 10px 13px 10px 24px;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
  font-weight: 600;
  text-decoration: none;
}

.kaiyi-cta-button-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  font-size: 1.1rem;
}

.kaiyi-footer-column-title {
  margin: 0 0 1rem;
  color: var(--theme-color-text);
  font-size: 1rem;
  font-weight: 600;
}

.kaiyi-footer-links .menu {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaiyi-footer-links a {
  color: var(--theme-color-summary);
  text-decoration: none;
}

.kaiyi-footer-links a:hover {
  color: var(--theme-color-text);
}

.kaiyi-contact-list {
  display: grid;
  gap: .85rem;
  color: var(--theme-color-summary);
  font-size: .95rem;
  line-height: 1.55;
}

.kaiyi-contact-list :is(a, p) {
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.kaiyi-footer-giant {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(20px, 3vh, 40px);
  overflow: hidden;
}

.kaiyi-footer .marquee-content {
  display: inline-flex;
  animation: kaiyi-footer-marquee 28s linear infinite;
}

/* Scroll-activated contact CTA.

   The inset and size are custom properties because the chat launcher anchors
   itself to this button — 30px above it, sharing its centre line — and the two
   live in different packages. Hard-coding the numbers twice would mean the
   launcher drifts off-centre the first time this button is resized. */
:root {
  --kc-dock-inset: clamp(1rem, 2vw, 2rem);
  --kc-dock-size: clamp(88px, 8vw, 112px);
  --kc-dock-gap: 30px;
}

.sticky-contact {
  position: fixed;
  z-index: 40;
  right: var(--kc-dock-inset);
  bottom: var(--kc-dock-inset);
  width: var(--kc-dock-size);
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 1rem, 0);
  transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
}

.sticky-contact.is-visible {
  opacity: var(--sticky-contact-opacity, 1);
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.sticky-contact:not(.is-visible),
.sticky-contact.is-visible[style*="--sticky-contact-opacity: 0"] {
  pointer-events: none;
}

.sticky-contact__link {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
  text-decoration: none;
  transition: background-color .28s ease, color .28s ease, transform .28s ease;
}

.sticky-contact__link:hover,
.sticky-contact__link:focus-visible {
  background: var(--theme-color-secondary);
  color: var(--theme-color-button-hover-text);
  transform: scale(1.04);
}

.sticky-contact__core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 36%;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 50%;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
}

.sticky-contact__core svg {
  width: 58%;
  height: 58%;
}

.sticky-contact__label {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  overflow: visible;
  fill: currentColor;
  transform: rotate(var(--sticky-contact-rotation, 0deg));
  transform-origin: center;
  transition: transform .5s cubic-bezier(.2, .75, .2, 1);
}

.sticky-contact__link:hover .sticky-contact__label,
.sticky-contact__link:focus-visible .sticky-contact__label {
  transform: rotate(calc(var(--sticky-contact-rotation, 0deg) + 180deg));
}

.sticky-contact__label text {
  font-family: var(--theme-font-family-sans);
  font-size: 8.75px;
  font-weight: 700;
  letter-spacing: .04em;
}

@media (max-width: 767px) {
  .sticky-contact {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-contact,
  .sticky-contact__link,
  .sticky-contact__label {
    transition: none;
  }
}

@keyframes kaiyi-footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

.kaiyi-footer-giant-text {
  margin: 0;
  padding: 10px 40px 20px 0;
  color: var(--theme-color-text);
  font-size: clamp(4.5rem, 12vw, 15rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.kaiyi-footer-giant-text span {
  color: var(--theme-color-primary);
}

.kaiyi-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 0 clamp(24px, 3vw, 60px);
  color: var(--theme-color-summary);
  font-size: .9rem;
}

.kaiyi-footer-bottom :is(.kaiyi-footer-bottom-left, .kaiyi-footer-bottom-right, .menu) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaiyi-footer-bottom strong {
  color: var(--theme-color-text);
}

.kaiyi-footer-bottom a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .kaiyi-footer-section {
    padding: 24px var(--theme-page-padding) 30px;
  }

  .kaiyi-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 2rem;
  }

  .kaiyi-footer-cta {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .kaiyi-footer-section {
    padding: 20px var(--theme-page-padding) 30px;
  }

  .kaiyi-footer {
    min-height: 0;
    padding-top: 7rem;
    border-radius: var(--theme-radius-medium) var(--theme-radius-medium) 0 0;
  }

  .kaiyi-cutout-top-left {
    padding-right: 12px;
    padding-bottom: 12px;
  }

  .kaiyi-cutout-top-right {
    padding-left: 12px;
    padding-bottom: 12px;
  }

  .kaiyi-socials {
    flex-direction: row;
    gap: 8px;
  }

  .kaiyi-social-link {
    width: 2.25rem;
    height: 2.25rem;
  }

  .kaiyi-footer-message {
    max-width: none;
    font-size: .875rem;
  }

  .kaiyi-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
    padding: 0 1.5rem;
  }

  .kaiyi-footer-cta {
    grid-column: span 2;
  }

  .kaiyi-footer-cta-title {
    max-width: 12ch;
    font-size: 2.35rem;
  }

  .kaiyi-footer-giant-text {
    font-size: clamp(4rem, 20vw, 7.5rem);
  }

  .kaiyi-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 1.5rem;
  }
}

/* Tablet collapses the navigation into the action cluster: keep it flush on
   the right rather than preserving desktop icon gaps. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header__actions {
    gap: 0;
  }
}

/* Works archive uses the same editorial rows as the home portfolio section. */
.works-archive__toolbar {
  justify-content: flex-end;
  min-height: 50px;
}

.works-view-toggle {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.works-view-toggle button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  height: auto;
  padding: 1.25rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  transition: border-color .3s ease, color .3s ease;
}

.works-view-toggle button+button {
  border-left: 1px solid var(--theme-color-border);
}

.works-view-toggle button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--theme-color-primary);
  content: "";
  transform: translate3d(0, 105%, 0);
  transition: transform .36s cubic-bezier(.2, .75, .2, 1);
}

.works-view-toggle button:is(:hover, :focus-visible)::before,
.works-view-toggle button.is-active::before {
  transform: translate3d(0, 0, 0);
}

.works-view-toggle button:is(:hover, :focus-visible),
.works-view-toggle button.is-active {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.works-archive__list {
  border-top: 0;
}

.works-archive__head,
.works-archive__row {
  padding-inline: 20px;
}

.works-archive__head {
  min-height: 58px;
  padding-block: 15px;
  border-bottom: 1.5px solid var(--theme-color-border);
  color: var(--theme-color-summary);
  font-size: max(1rem, var(--theme-font-size-post-meta));
  font-weight: 500;
}

.works-archive__row {
  border-top: 0;
  border-bottom: 1px solid var(--theme-color-border);
}

/* On phones and tablets the navigation becomes a compact dropdown instead of an edge drawer. */
@media (max-width: 1024px) {
  .ui-drawer[data-ui-drawer] {
    top: max(1rem, 9svh);
    right: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    max-height: min(78svh, 42rem);
    min-height: 0;
    padding: 0 1.25rem 1.25rem;
    border: 1px solid var(--theme-color-border);
    border-radius: var(--theme-radius-medium);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 22%);
    overflow: auto;
  }

  .ui-drawer[data-ui-drawer]>.ui-sheet__header {
    width: calc(100% + 2.5rem);
    min-height: 4.5rem;
    margin: 0 -1.25rem 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--theme-color-border);
  }

  .ui-drawer[data-ui-drawer]>.ui-sheet__header h2 {
    font-size: 1.25rem;
  }

  .ui-drawer[data-ui-drawer] .menu {
    gap: 0;
    margin-top: .5rem;
  }

  .ui-drawer[data-ui-drawer] .menu>li {
    border-bottom: 1px solid var(--theme-color-border);
  }

  .ui-drawer[data-ui-drawer] .menu>li>a {
    width: 100%;
    min-height: 3.5rem;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
  }

  .ui-drawer[data-ui-drawer] .menu-item-has-children>a {
    justify-content: flex-start;
  }

  .ui-drawer[data-ui-drawer] .ui-submenu-toggle {
    width: 3.5rem;
    height: 3.5rem;
  }

  .ui-drawer[data-ui-drawer] .sub-menu {
    margin: 0;
  }

  .ui-drawer[data-ui-drawer] .sub-menu>li {
    padding: .45rem 0 .45rem 1rem;
    border: 0;
  }

  .ui-drawer[data-ui-drawer] .sub-menu>li>a {
    min-height: 2.25rem;
    justify-content: flex-start;
    font-size: 1rem;
  }

  .ui-drawer[data-ui-drawer] .sub-menu>li::before {
    left: 0;
    width: .45rem;
    height: .45rem;
  }

  .ui-drawer[data-ui-drawer] .ui-drawer__actions {
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 0;
  }

  .ui-drawer[data-ui-drawer] .ui-drawer__button {
    min-height: 3rem;
  }

  .works-archive__toolbar {
    justify-content: flex-end;
  }

  .works-archive__head,
  .works-archive__row {
    padding-inline: 0;
  }
}

/* About page: editorial 7:3 hero, full-width motion picture and three service columns. */
.site-main--about {
  display: grid;
  gap: clamp(4rem, 9vw, 9rem);
  padding-block: clamp(2.5rem, 6vw, 6rem);
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(15rem, 3fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.about-hero__main {
  display: grid;
  gap: 30px;
}

.about-hero__breadcrumbs {
  margin: 0;
}

.about-hero h1 {
  margin: 0;
  color: var(--theme-color-text);
}

.about-hero__summary {
  display: grid;
  align-self: start;
  justify-items: end;
}

.about-hero__summary p {
  max-width: 27ch;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  font-weight: 500;
  line-height: var(--theme-line-height-text);
  text-align: right;
}

.about-hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.about-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: .8rem 1.25rem;
  border-radius: var(--theme-radius-medium);
  font-size: var(--theme-font-size-button);
  font-weight: 600;
  text-decoration: none !important;
}

.about-button::before,
.about-button::after {
  content: none !important;
}

.about-button svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.about-button--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-9) !important;
}

.about-button--secondary {
  border: 1.5px solid var(--theme-color-border);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text) !important;
}

.about-video {
  width: 100%;
  overflow: hidden;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  aspect-ratio: 16 / 8;
}

/* Full-width editorial statement placed above the introduction video. Each
   line keeps its own theme colour and is progressively highlighted by the
   scroll controller. */
.highlight-text-on-scroll {
  grid-column: 1 / -1;
  width: 100%;
  padding-block: clamp(1rem, 2vw, 2rem);
}

.highlight-text-on-scroll__lines {
  display: grid;
  width: 100%;
  gap: clamp(.35rem, 1vw, 1rem);
}

.highlight-text-on-scroll__line {
  margin: 0;
  color: var(--theme-color-surface-muted);
  font-size: clamp(1.75rem, 5.25vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
  will-change: color;
}

.highlight-text-on-scroll__line .word,
.highlight-text-on-scroll__line .char {
  color: inherit;
}

.highlight-text-on-scroll__line--primary {
  --highlight-color: var(--theme-color-primary);
}

.highlight-text-on-scroll__line--secondary {
  --highlight-color: var(--theme-color-secondary);
}

@media (max-width: 767px) {
  .highlight-text-on-scroll {
    padding-block: .5rem;
  }

  .highlight-text-on-scroll__lines {
    gap: .6rem;
  }

  .highlight-text-on-scroll__line {
    font-size: clamp(1.7rem, 8.5vw, 3rem);
    line-height: 1.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-text-on-scroll__line {
    transition: none;
  }

  .highlight-text-on-scroll__line--primary { color: var(--theme-color-primary); }
  .highlight-text-on-scroll__line--secondary { color: var(--theme-color-secondary); }
}

.about-video :is(.about-video__media, .about-video__poster) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-video__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  gap: .75rem;
  padding: 2rem;
  color: var(--theme-color-text);
  text-align: center;
}

.about-video__placeholder span {
  color: var(--theme-color-primary);
  font-weight: 700;
}

.about-video__placeholder p {
  margin: 0;
  color: var(--theme-color-text-muted);
}

.about-services {
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
}

.about-services>h2 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: clamp(2.5rem, 5.75vw, 7rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
}

.about-services__dots {
  display: inline-flex;
  color: var(--theme-color-primary);
}

.about-services__dots i {
  display: inline-block;
  font-style: normal;
  animation: about-dot-pulse 1.8s infinite both;
}

.about-services__dots i:nth-child(2) {
  animation-delay: .15s;
}

.about-services__dots i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes about-dot-pulse {

  0%,
  75%,
  100% {
    opacity: .2;
    transform: translateY(0);
  }

  38% {
    opacity: 1;
    transform: translateY(-.14em);
  }
}

.about-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 5rem);
}

.about-service-card {
  display: grid;
  align-content: start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.about-service-card__number {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-post-meta);
}

.about-service-card__rule {
  height: 1.5px;
  background: var(--theme-color-border);
}

.about-service-card h3 {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h3);
  font-weight: 500;
  line-height: var(--theme-line-height-h3);
}

.about-service-card__spark {
  width: 1.6em;
  height: 1.6em;
  color: var(--theme-color-primary);
}

.about-service-card>p:last-child {
  max-width: 32ch;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

@media (max-width: 767px) {
  .site-main--about {
    gap: 3.5rem;
    padding-block: 30px;
  }

  .about-hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-hero__main {
    gap: 25px;
  }

  .about-hero__summary {
    justify-items: start;
  }

  .about-hero__summary p {
    max-width: 38ch;
    font-size: calc(var(--theme-font-size-text) + 1px);
    text-align: left;
  }

  .about-hero__actions {
    flex-wrap: wrap;
  }

  .about-video {
    aspect-ratio: 16 / 10;
  }

  .about-services {
    gap: 3rem;
  }

  .about-services__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-service-card {
    gap: 1.5rem;
  }
}

/* Reusable shadcn-inspired HTML components. */
.ui-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 0;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  padding: 2rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 20%);
}

.ui-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

.ui-dialog__header,
.ui-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ui-dialog__header h4,
.ui-sheet__header h4 {
  margin: 0;
  font-size: 1.25rem;
}

.ui-icon-button {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.ui-icon-button svg,
.ui-toast button svg {
  width: 1rem;
  height: 1rem;
}

.ui-dialog form,
.ui-search-drawer form {
  display: grid;
  gap: 1rem;
}

.ui-dialog form input,
.ui-dialog form button,
.ui-search-drawer form input,
.ui-search-drawer form button {
  height: 55px;
  font-size: 1.125rem;
}

.ui-dialog form button,
.ui-search-drawer form button {
  width: 100%;
  min-height: 55px;
  border: 0;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.ui-search-tags {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--theme-color-border);
}

.ui-search-tags h4 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.ui-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ui-tag-cloud a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  padding: .375rem .75rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  color: var(--theme-color-text);
  font-size: .875rem;
  text-decoration: none;
}

.ui-tag-cloud a:hover {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.ui-overlay {
  position: fixed;
  z-index: 49;
  inset: 0;
  background: rgb(0 0 0 / 50%);
}

@media (max-width: 767px) {
  .ui-overlay {
    z-index: 10020 !important;
  }

  .ui-search-drawer,
  .ui-drawer[data-ui-drawer] {
    z-index: 10021 !important;
  }
}

.ui-sheet,
.ui-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  display: flex;
  height: 100dvh;
  flex-direction: column;
  padding: 1.5rem;
  border-left: 1.5px solid var(--theme-color-border);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  box-shadow: -1rem 0 2rem rgb(0 0 0 / 12%);
}

.ui-sheet {
  width: min(500px, 90vw);
}

.ui-sheet>.ui-sheet__header,
.ui-drawer:not(.ui-search-drawer)>.ui-sheet__header {
  min-height: 3rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--theme-color-border);
}

.ui-sheet__header h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.ui-sheet>.ui-sheet__header .ui-icon-button,
.ui-drawer:not(.ui-search-drawer)>.ui-sheet__header .ui-icon-button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.ui-sheet>.ui-sheet__header .ui-icon-button svg,
.ui-drawer:not(.ui-search-drawer)>.ui-sheet__header .ui-icon-button svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-sheet .menu,
.ui-drawer .menu {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-sheet a,
.ui-drawer a {
  color: inherit;
  text-decoration: none;
}

.ui-toast-region {
  position: fixed;
  z-index: 60;
  right: var(--theme-page-padding);
  bottom: var(--theme-page-padding);
}

.ui-toast {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 18rem;
  padding: 1rem;
  border: 1.5px solid var(--theme-color-border);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / 12%);
}

.ui-toast[hidden],
.ui-sheet[hidden],
.ui-drawer[hidden],
.ui-overlay[hidden],
.ui-spinner[hidden] {
  display: none !important;
}

.ui-toast button {
  margin-left: auto;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.ui-spinner {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--theme-color-border);
  border-top-color: var(--theme-color-primary);
  border-radius: 50%;
  animation: ui-spin .8s linear infinite;
}

.ui-drawer {
  width: 90vw;
  touch-action: manipulation;
}

.ui-drawer .menu {
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
}

.ui-drawer__actions {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.ui-drawer__button {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-3);
  border-radius: var(--theme-radius-medium);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.ui-drawer__button svg {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}

.ui-drawer__button--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
}

.ui-drawer__button--secondary {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  border: 1.5px solid var(--theme-color-border);
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1024px) {
  .ui-sheet {
    display: none;
  }

  .ui-drawer {
    width: 90vw;
  }
}

@media (min-width: 1025px) {
  .ui-drawer {
    display: none;
  }
}

@media (max-width: 767px) {
  .article-ai-assistant__actions { flex-direction: column; }
  .article-ai-assistant__actions > .ui-button {
    width: 100%;
    flex: 0 0 100%;
    flex-basis: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .single-post .single-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .single-resource .single-resource__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .single-post .home-posts-slider__track,
  .single-resource .home-posts-slider__track,
  .single-work .home-posts-slider__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
  }
}

.article-title {
  display: flex;
  align-items: center;
  gap: .5em;
}
.article-title__verified { width: 1em; height: 1em; flex: 0 0 auto; }
.byline-wrapper { gap: 16px; margin: 8px 0 24px; }
.byline-wrapper__avatar,
.byline-wrapper__avatar img { width: 56px; height: 56px; }
.byline-wrapper__avatar { flex-basis: 56px; }
.byline-wrapper__copy { gap: 6px; }
.byline-wrapper__author { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; }
.byline-wrapper__verified,
.author-card__verified { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.byline-wrapper__details { font-size: .875rem; }
.author-card__label { display: inline-flex; align-items: center; gap: 8px; }
.author-card h4 { display: inline-flex; align-items: center; gap: 8px; }
.author-card h4 .author-card__verified { display: inline-block; }
.ui-button .hover-reveal__text svg,
.ui-button > svg { width: 20px; height: 20px; flex: 0 0 20px; }
[data-line-login] > svg,
[data-line-login] .hover-reveal__text > span > svg { width: 20px; height: 20px; flex: 0 0 20px; }
.site-header__member-actions { gap: var(--theme-space-6) !important; }

@media (max-width: 1024px) {
  .ui-drawer .menu-item-has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .ui-drawer .menu-item>a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .ui-drawer .menu-item-has-children>a {
    min-width: 0;
    flex: 1 1 0;
  }

  .ui-drawer .menu-item__badge {
    margin-left: 5px;
  }

  .ui-drawer .sub-menu {
    display: none;
    flex-basis: 100%;
    order: 3;
    margin: 0 0 .5rem;
    padding-left: 0;
    list-style: none;
  }

  .ui-drawer .menu-item-has-children.is-open>.sub-menu {
    display: grid;
    gap: 1rem;
  }

  .ui-drawer .sub-menu>li {
    position: relative;
    padding-left: 0;
  }

  .ui-drawer .sub-menu>li::before {
    position: absolute;
    top: .65em;
    left: -.9rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--theme-color-primary);
    content: "";
  }

  .ui-drawer .sub-menu a {
    font-size: .85em;
  }

  .ui-submenu-toggle {
    position: static;
    order: 2;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--theme-color-text);
  }

  .ui-submenu-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .ui-submenu-toggle svg path {
    stroke-width: 2;
  }

  .ui-drawer:not(.ui-search-drawer)>.ui-sheet__header {
    width: calc(100% + 3rem);
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .ui-drawer .sub-menu {
    margin-block: 0;
    padding-block: 0;
  }

  .ui-drawer .menu-item-has-children.is-open>.sub-menu {
    gap: 0;
  }

  .ui-drawer .sub-menu>li {
    padding-block: .5rem;
    padding-left: 1.25rem;
  }

  .ui-drawer .sub-menu>li::before {
    top: 50%;
    left: 0;
    width: .65rem;
    height: .65rem;
    transform: translateY(-50%);
  }

  .ui-drawer .sub-menu>li>a {
    padding-block: 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--theme-color-text);
  font-family: var(--theme-font-family);
  font-weight: 600;
  line-height: var(--theme-line-height-heading);
}

h1 {
  font-weight: 700;
  font-size: var(--theme-font-size-h1);
  line-height: var(--theme-line-height-h1);
}

h2 {
  font-size: var(--theme-font-size-h2);
  line-height: var(--theme-line-height-h2);
}

h3 {
  font-size: var(--theme-font-size-h3);
  line-height: var(--theme-line-height-h3);
}

h4 {
  font-size: var(--theme-font-size-h4);
  line-height: var(--theme-line-height-h4);
}

h5 {
  font-size: var(--theme-font-size-h5);
  line-height: var(--theme-line-height-h5);
}

h6 {
  font-size: var(--theme-font-size-h6);
  line-height: var(--theme-line-height-h6);
}

p {
  font-size: var(--theme-font-size-body);
  line-height: var(--theme-line-height-body);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size-button);
  font-weight: 600;
  line-height: var(--theme-line-height-button);
  border-radius: var(--theme-radius-medium);
  color: var(--theme-color-9);
}

input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link {
  min-height: 50px;
  padding: .75rem 1.25rem;
}

.site-header__top {
  position: relative;
  z-index: 35;
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: center;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.site-header__top-nav {
  display: none !important;
}

.site-header__top .site-header__desktop-utilities :is(button, svg) {
  color: var(--theme-color-button-text);
}

.site-header__announcements {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding-inline: 0;
}

.header-marquee__label,
.header-marquee {
  padding-block: .5rem;
}

.site-header__top-nav {
  padding: .5rem var(--theme-page-padding);
}

.site-header__top,
.header-marquee,
.header-marquee__item,
.header-marquee__label {
  font-size: var(--theme-header-marquee-font-size);
  line-height: var(--theme-header-marquee-line-height);
}

.header-marquee__label {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.header-marquee__label::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 10px;
  content: "";
  vertical-align: -.125em;
  background: color-mix(in srgb, var(--theme-color-9) 10%, transparent);
}

.header-marquee {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 2.5rem;
  text-align: var(--marquee-align);
}

.header-marquee__item {
  position: absolute;
  top: 50%;
  left: 0;
  display: none;
  color: var(--theme-color-9);
  text-decoration: none;
  transform: translateY(-50%);
}

.header-marquee__item.is-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  animation: marquee-slide-up .35s ease both;
}

.header-marquee__item::after {
  width: 1rem;
  height: 1rem;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6V15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6V15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes marquee-slide-up {
  from {
    opacity: 0;
    transform: translateY(80%);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.header-marquee a,
.site-header__top-nav a {
  color: inherit;
  text-decoration: none;
}

.site-header__top-nav ul {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--theme-layout-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

form {
  width: min(100%, var(--theme-form-width, 100%));
}

input,
textarea,
select {
  width: 100%;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  padding: .75rem;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-color-primary);
  outline: none;
}

@media (max-width: 767px) {
  .site-header__top {
    grid-template-columns: 1fr;
  }

  .site-header__top-nav ul {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .site-header__top {
    min-height: 70px;
  }

  .site-header__top-nav,
  .header-marquee__label {
    display: none;
  }

  .site-header__announcements {
    width: 100%;
  }

  .header-marquee {
    min-height: 70px;
    padding-block: 0;
  }
}

.site-header__middle {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 2.5fr 5fr 2.5fr;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  gap: var(--theme-layout-gap);
  background: var(--theme-color-surface-muted);
  border-bottom: 1.5px solid var(--theme-color-border);
  transition: height .25s ease, border-color .25s ease;
  will-change: transform;
}

.reading-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header__middle.is-sticky .reading-progress-bar {
  opacity: 1;
  visibility: visible;
}

.reading-progress-bar__fill {
  height: 100%;
  background: var(--theme-color-primary);
  width: 0%;
  will-change: width;
}

.site-header {
  --site-header-flow-height: 100px;
  --site-header-sticky-height: 85px;
  --site-header-z-index: 48;
  position: relative;
  z-index: var(--site-header-z-index);
  overflow: visible;
}

.site-header__top {
  min-height: var(--theme-header-top-height);
}

.site-header.is-middle-sticky {
  padding-bottom: var(--site-header-flow-height);
}

.site-header__middle.is-sticky {
  position: fixed;
  top: var(--wp-admin-bar-height, 0px);
  right: 0;
  left: 0;
  width: 100%;
  height: var(--site-header-sticky-height);
  border-bottom: 1.5px solid var(--theme-color-border);
}

.site-header__middle.is-hidden {
  transform: translateY(-100%);
}

.site-header__middle>nav {
  justify-self: end;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.theme-toggle {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--theme-color-text);
  cursor: pointer;
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
}

.site-header__desktop-utilities {
  display: none;
}

.site-header__member-actions {
  display: none;
}

.site-header__member-theme-toggle {
  display: none;
}

@media (min-width: 1025px) {
  .site-header__top-nav {
    display: none;
  }

  .site-header__actions {
    display: none !important;
  }

  .site-header__desktop-utilities .theme-toggle {
    display: inline-flex !important;
    width: auto;
    min-width: 0;
    height: auto;
    align-items: center;
    gap: 6px;
  }

  .site-header__desktop-utilities .theme-toggle svg {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
  }

  .site-header__desktop-utilities .theme-toggle__label {
    font-size: var(--theme-header-marquee-font-size);
    line-height: var(--theme-header-marquee-line-height);
    white-space: nowrap;
  }

  .site-header__member-theme-toggle {
    position: absolute;
    z-index: 6;
    top: 100px;
    right: calc(var(--theme-page-padding) + 210px);
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--theme-color-text);
    cursor: pointer;
  }

  .site-header__member-theme-toggle svg {
    width: 100%;
    height: 100%;
  }

  .site-header__desktop-utilities button[data-header-search]::after {
    content: "搜尋此網站";
    margin-left: 4px;
    font-size: var(--theme-header-marquee-font-size);
    white-space: nowrap;
  }

  .site-header__desktop-utilities button[data-header-search] {
    width: auto;
  }

  .site-header__top {
    position: relative;
    padding-inline: var(--theme-page-padding);
  }

  .site-header__desktop-utilities {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .site-header__desktop-utilities button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--theme-color-text);
    cursor: pointer;
    font: inherit;
  }

  .site-header__desktop-utilities svg {
    width: 1em;
    height: 1em;
  }

  .site-header__utility-divider {
    width: 1px;
    height: 1em;
    background: var(--theme-color-border);
  }

  .site-header__language span {
    font-size: var(--theme-header-marquee-font-size);
    line-height: var(--theme-header-marquee-line-height);
  }

  .site-header__member-actions {
    position: absolute;
    z-index: 5;
    top: 100px;
    right: var(--theme-page-padding);
    display: flex;
    align-items: center;
    gap: var(--theme-space-7);
  }

  .site-header__middle.is-sticky .site-header__member-actions {
    top: 22px;
  }

  .site-header__account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-color-text);
    text-decoration: none;
  }

  .site-header__account svg {
    width: 24px;
    height: 24px;
  }

  .site-header__consult {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: .65rem 1.5rem;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-primary);
    color: var(--theme-color-button-text);
    font-weight: 700;
    text-decoration: none;
  }

  .site-header__actions>a[aria-label="Cart"] {
    display: none;
  }

  .site-header__actions>button[data-header-search] {
    display: none;
  }

  .site-header__middle {
    padding-right: var(--theme-page-padding);
  }
}

.site-header__member-actions {
  z-index: 100 !important;
  color: var(--theme-color-text) !important;
}

.site-header__member-actions>a,
.site-header__member-actions>button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.site-header__member-actions>a {
  color: var(--theme-color-text) !important;
}

.site-header__member-actions .site-header__consult {
  color: var(--theme-color-9) !important;
}

.site-header__member-theme-toggle {
  z-index: 101 !important;
  color: var(--theme-color-text) !important;
}

@media (min-width: 1025px) {
  .site-header__member-theme-toggle {
    display: none !important;
  }
}

/* Keep desktop member controls above the middle navigation layer.  They are
 * rendered after the middle row, so an explicit containing block and stack
 * order prevents the row background from hiding them. */
@media (min-width: 1025px) {
  .site-header__member-actions {
    position: absolute !important;
    top: 100px !important;
    right: var(--theme-page-padding) !important;
    z-index: 55 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header__member-theme-toggle {
    position: absolute !important;
    top: 100px !important;
    right: calc(var(--theme-page-padding) + 220px) !important;
    z-index: 55 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header__member-actions .site-header__account,
  .site-header__member-actions .site-header__consult {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.site-footer__social-rail a,
.site-footer.kaiyi-footer-section .kaiyi-social-link {
  color: var(--theme-color-9) !important;
}

.member-button,
.site-header__consult,
.site-footer__button,
.kaiyi-cta-button {
  color: var(--theme-color-9) !important;
}

.member-button:hover,
.site-header__consult:hover,
.site-footer__button:hover,
.kaiyi-cta-button:hover {
  color: var(--theme-color-9) !important;
  transform: none;
}

.member-button,
.site-header__consult,
.site-footer__button,
.kaiyi-cta-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.member-button::after,
.site-header__consult::after,
.site-footer__button::after,
.kaiyi-cta-button::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--theme-color-secondary-hover);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .75, .2, 1);
}

.member-button:hover::after,
.site-header__consult:hover::after,
.site-footer__button:hover::after,
.kaiyi-cta-button:hover::after {
  transform: scaleX(1);
}

.site-footer .site-footer__social-rail a,
.site-footer .kaiyi-social-link {
  color: var(--theme-color-9) !important;
}

/*
 * The footer rail draws the same marks as the sidebar rail -- one helper
 * renders both -- so it must not restyle them.
 *
 * It used to force a stroke as well as a fill. Every mark in the set is drawn
 * with fills alone, so that stroke did not colour anything: it added a 1px
 * outline around each shape, which is why the footer's icons read heavier than
 * the same icons in the sidebar. Only the colour belongs here.
 */
.site-footer .kaiyi-social-link svg {
  color: var(--theme-color-9) !important;
  fill: var(--theme-color-9) !important;
}

.site-footer button,
.site-footer a.site-footer__button,
.site-footer a.kaiyi-cta-button,
.member-button {
  color: var(--theme-color-9) !important;
}

@media (min-width: 768px) {
  .site-header__desktop-utilities {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  .site-header__desktop-utilities button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--theme-color-text);
    cursor: pointer;
    font: inherit;
  }

  .site-header__desktop-utilities svg {
    width: 22px;
    height: 22px;
  }

  .site-header__utility-divider {
    width: 1px;
    height: 22px;
    background: color-mix(in srgb, var(--theme-color-9) 28%, transparent);
  }

  .site-header__member-actions {
    position: absolute;
    z-index: 5;
    top: 100px;
    right: var(--theme-page-padding);
    display: flex !important;
    align-items: center;
    gap: var(--theme-space-7);
  }

  .site-header__account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-color-text);
    text-decoration: none;
  }

  .site-header__account svg {
    width: 24px;
    height: 24px;
  }

  .site-header__consult {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: .65rem 1.5rem;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-primary);
    color: var(--theme-color-9) !important;
    font-weight: 700;
    text-decoration: none;
  }
}

@media (min-width: 1025px) {
  .site-header__middle {
    padding-right: var(--theme-page-padding) !important;
  }

  .insight-mega-menu {
    left: calc(-1 * var(--theme-page-padding));
    right: calc(-1 * var(--theme-page-padding));
  }

  .insight-mega-menu__inner {
    padding-inline: var(--theme-page-padding);
  }

  .insight-mega-menu {
    z-index: 100 !important;
  }
}

.theme-toggle__moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__moon {
  display: block;
}

.site-header__middle nav .menu {
  gap: 35px;
  font-size: 1.125rem;
}

.site-header__middle nav a {
  color: var(--theme-color-text);
  text-decoration: none;
}

.site-header__logo>a {
  color: var(--theme-color-text);
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.site-header__logo-mobile {
  display: none;
}

.site-header nav .menu-item>a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.menu-item__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}

.menu-item__icon svg {
  width: 100%;
  height: 100%;
}

.menu-item__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.9em;
  padding: .3em .9em;
  border-radius: var(--theme-radius-light);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .52em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__actions {
  justify-self: end;
}

.site-header__actions button,
.site-header__actions a {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--theme-color-text) !important;
}

.site-header__actions svg {
  width: 100%;
  height: 100%;
}

.site-header__actions [data-header-menu] svg {
  transform: scaleY(1.55);
  transform-origin: center;
}

@media (max-width: 1024px) {
  .site-header__middle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__primary-nav {
    display: none;
  }

  .theme-toggle {
    display: none;
  }

  .site-header__actions .theme-toggle {
    display: grid !important;
    width: 30px;
    height: 30px;
  }

  .site-header__actions .theme-toggle__label {
    display: none;
  }
}

@media (min-width: 1025px) {
  .site-header__actions [data-header-menu] {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-header {
    --site-header-sticky-height: 70px;
  }

  .site-header__middle {
    grid-template-columns: 1fr auto;
    height: 70px;
  }

  .site-header__middle.is-sticky {
    height: 70px;
  }

  .site-header__primary-nav {
    display: none;
  }

  .theme-toggle {
    display: none;
  }

  .site-header__actions {
    gap: 15px;
  }

  .site-header__logo>a {
    font-size: 22px;
  }

  .site-header__logo-desktop {
    display: none;
  }

  .site-header__logo-mobile {
    display: inline;
  }

  .site-header__actions button,
  .site-header__actions a {
    width: 24px;
    height: 24px;
  }

  .site-main {
    padding-block: 30px;
  }

  .site-footer {
    margin-top: 30px;
  }

  .resources-archive__header .breadcrumbs {
    font-size: 19px;
    line-height: 1.5;
  }

  .resources-archive__header h1 {
    font-size: 48px;
    line-height: 1.15;
  }

  .resources-archive__title>p,
  .insight-header__description,
  .contact-layout__summary,
  .page-hero__summary {
    font-size: 19px;
    line-height: 1.75;
  }
}

@media (min-width: 768px) {
  .site-header__middle nav .menu {
    gap: 35px;
    font-size: 1.125rem;
  }
}

/* Resource cards keep their complementary upper-right curve at rest.  The
   category badge is centered in that reserved area and both retreat on hover
   so the preview image can take over. */
.resource-card__image {
  isolation: isolate;
  overflow: hidden;
}

/* Dynamic SVG Mask for Cards */
.resource-card__mask {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--theme-color-surface-muted);
  padding-left: 10px;
  padding-bottom: 10px;
  border-bottom-left-radius: var(--theme-radius-medium);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2, .75, .2, 1);
}

.resource-card__mask-curve {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--theme-color-surface-muted);
  fill: currentColor;
  pointer-events: none;
}

.resource-card__mask-curve--left {
  top: 0;
  left: 1px;
  transform: translateX(-100%);
}

.resource-card__mask-curve--bottom {
  bottom: 1px;
  right: 0;
  transform: translateY(100%);
}

.resource-card__image img {
  position: relative;
  z-index: 0;
}

.resource-card__category {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: auto;
  min-height: auto;
  padding: 8px 15px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-weight: 700;
  font-size: calc(var(--theme-font-size-post-meta) * .85);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.post-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (hover: hover) and (pointer: fine) {
  .resource-card:is(:hover, :focus-visible) .resource-card__mask {
    opacity: 0;
    transform: translate3d(2rem, -2rem, 0);
  }
}

/* WordPress navigation submenus. */
.site-header__middle nav .menu,
.site-header__top-nav .menu {
  display: flex;
  align-items: center;
  gap: var(--theme-layout-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__middle nav .menu-item,
.site-header__top-nav .menu-item {
  position: relative;
}

@media (min-width: 1025px) {
  .site-header__middle>nav>.menu>.menu-item::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-primary);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }

  .site-header__middle>nav>.menu>.menu-item:hover::before,
  .site-header__middle>nav>.menu>.menu-item:focus-within::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-header__middle>nav>.menu>.current-menu-item::before,
  .site-header__middle>nav>.menu>.current-menu-ancestor::before {
    transform: scaleX(1);
  }
}

.site-header__middle nav .menu-item-has-children>a,
.site-header__top-nav .menu-item-has-children>a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.site-header__middle nav .menu-item-has-children>a::after,
.site-header__top-nav .menu-item-has-children>a::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.25rem;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  transition: transform 0.25s ease;
}

.site-header__middle nav .sub-menu,
.site-header__top-nav .sub-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 1.25rem);
  left: -.75rem;
  display: grid;
  min-width: 15rem;
  gap: .25rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease;
}

.site-header__middle nav .menu-item:hover>.sub-menu,
.site-header__middle nav .menu-item:focus-within>.sub-menu,
.site-header__top-nav .menu-item:hover>.sub-menu,
.site-header__top-nav .menu-item:focus-within>.sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header__middle nav .menu-item-has-children:hover>a::after,
.site-header__middle nav .menu-item-has-children:focus-within>a::after,
.site-header__middle nav .menu-item-has-children.is-open>a::after,
.site-header__top-nav .menu-item-has-children:hover>a::after,
.site-header__top-nav .menu-item-has-children:focus-within>a::after,
.site-header__top-nav .menu-item-has-children.is-open>a::after {
  transform: rotate(-180deg);
}

.site-header__middle nav .sub-menu a,
.site-header__top-nav .sub-menu a {
  display: block;
  padding: .625rem .75rem;
  color: var(--theme-color-text);
  text-decoration: none;
}

.site-header__middle nav .sub-menu a:hover,
.site-header__middle nav .sub-menu a:focus,
.site-header__top-nav .sub-menu a:hover,
.site-header__top-nav .sub-menu a:focus {
  background: transparent;
  color: var(--theme-color-text);
}

@media (max-width: 767px) {

  .site-header__middle nav .menu,
  .site-header__top-nav .menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-header__middle nav .sub-menu,
  .site-header__top-nav .sub-menu {
    position: static;
    display: grid;
    min-width: 0;
    margin-top: .5rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }
}

.site-header__top-nav .sub-menu {
  right: 0;
  left: auto;
}

@media (min-width: 1025px) {
  .site-header__middle>nav>.menu {
    gap: 45px;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .site-header__middle>nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
  }

  .site-header__middle>nav>.menu {
    height: 100%;
  }

  .site-header__middle>nav>.menu>.menu-item {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .site-header__middle>nav>.menu>.current-menu-item::after,
  .site-header__middle>nav>.menu>.current-menu-ancestor::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-primary);
    content: "";
  }
}

/* Home page hero. */
.site-main--home {
  padding-top: clamp(2rem, 5vw, 6rem);
}

.home-hero {
  display: grid;
  /* Closer to the words above it than it was. */
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: calc(100svh - 100px);
  /* Room for the frame to finish opening before the hero ends, since it is
     sticky and stops at that edge. */
  padding-bottom: clamp(6rem, 30vh, 22rem);
}

.home-hero__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  overflow: hidden;
  color: var(--theme-color-text);
  font-size: clamp(3.25rem, 8vw, 9rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .92;
}

.home-hero__lead,
.home-hero__words {
  min-width: 0;
}

.home-hero__words {
  color: var(--theme-color-primary);
}

.home-hero__words span {
  display: block;
  transition: opacity .22s ease, transform .22s ease;
}

.home-hero__words span.is-changing {
  opacity: 0;
  transform: translateY(-.25em);
}

.home-hero__middle {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 7rem);
}

.home-hero__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.home-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__media-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, var(--theme-color-primary), var(--theme-color-primary-hover));
  color: var(--theme-color-9);
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: .25em;
}

.home-hero__content {
  display: grid;
  gap: 2rem;
  align-content: end;
}

.home-hero__content h1 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: clamp(1.375rem, 1.6vw, 2rem);
  font-weight: 500;
  line-height: 1.45;
}

.home-hero__cta {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  color: var(--theme-color-text);
  font-size: 1.125rem;
  font-weight: 700;
}

.home-hero__cta svg {
  width: 1.25em;
  height: 1.25em;
}

.home-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--theme-color-text);
}

.home-hero__bottom>a,
.home-hero__meta a {
  color: inherit;
  font-weight: 600;
}

.home-hero__meta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  color: var(--theme-color-text-muted);
}

.home-hero__meta time {
  margin-left: .35em;
}

/* Homepage scroll-controlled feature steps. */
.home-sticky-steps {
  position: relative;
  margin-top: clamp(5rem, 12vw, 12rem);
}

.home-sticky-steps__sticky {
  position: sticky;
  top: calc(var(--site-header-sticky-height, 85px) + 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
  min-height: min(70svh, 48rem);
  overflow: hidden;
}

.home-sticky-steps__content,
.home-sticky-steps__visuals {
  position: relative;
  min-height: 100%;
}

.home-sticky-steps__card,
.home-sticky-steps__visual {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.home-sticky-steps__card.is-active,
.home-sticky-steps__visual.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.home-sticky-steps__card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: clamp(2rem, 6vw, 7rem);
  color: var(--theme-color-text);
}

.home-sticky-steps__eyebrow {
  margin: 0;
  color: var(--theme-color-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-sticky-steps__card h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--theme-color-text);
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.05;
}

.home-sticky-steps__description {
  max-width: 34rem;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.home-sticky-steps__visual {
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.home-sticky-steps__visual img,
.home-sticky-steps__visual-placeholder {
  display: block;
  width: min(100%, 26rem);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  overflow: hidden;
  border-radius: 50%;
  background: var(--theme-color-surface-muted);
}

.home-sticky-steps__visual-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--theme-color-primary), var(--theme-color-primary-hover));
  color: var(--theme-color-9);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-sticky-steps__trigger {
  height: 75vh;
  min-height: 32rem;
}

.home-sticky-steps__trigger:last-child {
  height: 45vh;
  min-height: 20rem;
}

.home-works {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(6rem, 14vw, 14rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.home-works__header {
  display: grid;
  gap: 15px;
  max-width: 56rem;
}

.home-works__header p,
.home-works__header h2 {
  margin: 0;
}

.home-works__header p {
  color: var(--theme-color-primary);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 700;
}

.home-works__header h2 {
  color: var(--theme-color-text);
}

.home-works__table {
  border-top: 0;
}

.home-works__head,
.home-work {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(7rem, 1fr) minmax(5rem, .65fr) minmax(12rem, 1.5fr);
  gap: 20px;
  align-items: center;
}

.home-works__head {
  padding: 15px 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-post-meta);
}

.home-work {
  position: relative;
  min-height: 5.75rem;
  padding: 20px 0;
  border-top: 1px solid var(--theme-color-border);
  color: var(--theme-color-text);
  text-decoration: none;
}

.home-work strong {
  font-size: var(--theme-font-size-h5);
  font-weight: 500;
}

.home-work>span {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-post-meta);
}

.home-work:hover strong,
.home-work:focus-visible strong {
  color: var(--theme-color-primary);
}

.home-work-follower {
  position: fixed;
  z-index: 70;
  width: 12rem;
  height: 15rem;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
}

.home-work-follower img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-work-follower span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 5rem;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  place-items: center;
  border-radius: var(--theme-radius-light);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: .8rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .site-main--home {
    padding-top: 2rem;
  }

  .home-hero {
    gap: 2.5rem;
    min-height: auto;
  }

  .home-hero__top {
    grid-template-columns: 1fr;
    gap: .1em;
    font-size: clamp(3.5rem, 15vw, 5.75rem);
  }

  .home-hero__middle {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home-hero__content {
    gap: 1.5rem;
  }

  .home-hero__bottom,
  .home-hero__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .home-sticky-steps {
    margin-top: 5rem;
  }

  .home-sticky-steps__sticky {
    top: 20px;
    grid-template-columns: 1fr;
    min-height: 78svh;
  }

  .home-sticky-steps__content {
    min-height: 45%;
    order: 2;
  }

  .home-sticky-steps__visuals {
    min-height: 55%;
    order: 1;
  }

  .home-sticky-steps__card {
    justify-content: flex-start;
    padding: 2rem;
  }

  .home-sticky-steps__card h2 {
    max-width: none;
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  .home-sticky-steps__visual {
    padding: 1.5rem;
  }

  .home-sticky-steps__visual img,
  .home-sticky-steps__visual-placeholder {
    width: min(100%, 18rem);
    aspect-ratio: 1 / 1;
  }

  .home-sticky-steps__trigger {
    height: 65svh;
    min-height: 28rem;
  }

  .home-works {
    margin-top: 6rem;
  }

  .home-works__head {
    display: none;
  }

  .home-work {
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    min-height: 0;
  }

  .home-work strong {
    grid-column: 1 / -1;
  }

  .home-work>span:last-child {
    display: none;
  }

  .site-main,
  .site-footer,
  .site-header__middle,
  .single-layout,
  .single-content {
    max-width: 100%;
  }

  .post-action:last-child {
    margin-left: 0;
  }

  .ui-search-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(85dvh, 44rem);
    height: auto;
    overflow-y: auto;
    border-left: 0;
    border-radius: var(--theme-radius-heavy) var(--theme-radius-heavy) 0 0;
  }

  .ui-search-drawer .ui-drawer__handle {
    width: 2.5rem;
    height: .25rem;
    margin: -.75rem auto 1.25rem;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-border);
  }
}

/* Single article spacing is controlled only by its 25px grid gap. */
.single-content> :is(.breadcrumbs, .article-title, .article-excerpt, .article-featured-image, .post-actions, .article-toc--mobile, .single-content__body, .author-card, .comments-area) {
  margin: 0;
}

/* Large card footer. */
.site-footer {
  position: relative;
  margin-top: 0;
  padding: 2.5rem 2.25rem 2.25rem;
  border-radius: var(--theme-radius-heavy) var(--theme-radius-heavy) 0 0;
  background: var(--theme-color-surface-muted);
}

.site-footer__panel {
  display: block;
  padding: clamp(2.5rem, 4.5vw, 5rem) clamp(2rem, 5vw, 5rem) 2rem;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(15rem, 1.3fr) minmax(22rem, 1.65fr) minmax(12rem, .7fr);
  gap: clamp(2rem, 5vw, 6rem);
  min-height: 24rem;
}

.site-footer__cta {
  gap: 1.5rem;
}

.site-footer__eyebrow {
  display: none;
}

.site-footer__cta h2 {
  max-width: 10ch;
  font-size: clamp(2.25rem, 3vw, 4rem);
  line-height: 1.08;
}

.site-footer__button {
  min-height: 50px;
  padding: .875rem 1.5rem;
  border-radius: var(--theme-radius-extra);
}

.site-footer__menus {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
}

.site-footer__menu {
  gap: 1.25rem;
}

.site-footer__menu h3,
.site-footer__contact h3 {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  opacity: 1;
}

.site-footer__menu .menu {
  gap: .8rem;
}

.site-footer__menu a,
.site-footer__contact a {
  color: var(--theme-color-text);
  opacity: .65;
}

.site-footer__menu a:hover,
.site-footer__contact a:hover {
  color: var(--theme-color-text);
  opacity: 1;
}

.site-footer__contact {
  gap: 1.25rem;
}

.site-footer__socials {
  display: none;
}

.site-footer__social-rail {
  position: absolute;
  z-index: 2;
  top: 2.5rem;
  left: .5rem;
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: .75rem .5rem;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  list-style: none;
}

.site-footer__social-rail a {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .625rem;
  font-weight: 700;
  text-decoration: none;
}

.site-footer__back {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 2.25rem;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: .5rem 1.5rem;
  border-radius: 0 0 var(--theme-radius-heavy) var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  text-decoration: none;
}

.site-footer__statement {
  margin: clamp(4rem, 10vw, 11rem) 0 clamp(2rem, 5vw, 4rem);
  color: var(--theme-color-text);
  font-size: clamp(4.25rem, 13.5vw, 16rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .8;
  white-space: nowrap;
}

.site-footer__bottom {
  display: flex;
  grid-column: auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0;
  border-top: 0;
  color: var(--theme-color-text);
}

.site-footer__bottom p {
  opacity: .65;
}

@media (max-width: 1200px) {
  .site-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1.5fr;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-footer__back {
    right: 1.5rem;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding: 1rem var(--theme-page-padding);
  }

  .site-footer__panel {
    padding: 4rem 1.5rem 1.5rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 3rem;
  }

  .site-footer__menus {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer__contact {
    display: grid;
  }

  .site-footer__social-rail {
    position: static;
    display: flex;
    width: fit-content;
    margin: 0 0 1rem;
  }

  .site-footer__back {
    top: 1rem;
    right: var(--theme-page-padding);
    font-size: .75rem;
  }

  .site-footer__statement {
    margin: 5rem 0 2rem;
    font-size: clamp(3.5rem, 17vw, 6rem);
    white-space: normal;
  }

  .site-footer__bottom {
    align-items: flex-start;
  }
}

/* Replace the primary navigation with the actions menu button before it crowds. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .site-header__middle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__primary-nav {
    display: none !important;
  }

  .site-header__actions [data-header-menu] {
    display: grid !important;
  }
}

/* Removed old sticky sidebar styles */
.single-content__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  color: var(--theme-color-text);
  font-size: 17px;
  line-height: 32px;
}

.single-content__body>* {
  margin: 0 !important;
}

/*
 * The tone comes from the colour, not from opacity.
 *
 * opacity fades everything the element paints, and the selection highlight is
 * painted by the element -- so selected body copy came out a washed-out green
 * at 65% over the page while a heading beside it took the full primary, and
 * the list markers faded with the text they belong to. Mixing the ink against
 * the page instead lands on exactly the same colour with the layer left at 1.
 */
.single-content__body :is(p, li, td, th) {
  color: color-mix(in srgb, var(--theme-color-text) 65%, var(--theme-color-surface));
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.single-content__body :is(ul, ol) {
  display: grid;
  gap: 10px;
  padding-left: 1.5rem;
}

.single-content__body figure.wp-block-table {
  width: 100%;
  overflow-x: auto;
}

.single-content__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.single-content__body :is(th, td) {
  padding: .875rem 1rem;
  border: 1px solid var(--theme-color-border);
  text-align: left;
}

.single-content__body th {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-weight: 700;
  opacity: 1;
}

.single-content__body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.single-content__body .wp-block-button {
  margin: 0 !important;
}

.single-content__body .wp-block-button__link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9) !important;
  text-decoration: none;
}

.single-content__body .wp-block-button+.wp-block-button .wp-block-button__link {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-9) !important;
}

/* Contact Form 7 contact page. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
}

.contact-layout__intro {
  display: grid;
  align-content: start;
  gap: 25px;
}

.contact-layout__intro h1,
.contact-layout__summary {
  margin: 0;
}

.contact-layout__summary {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-archive-description);
  line-height: var(--theme-line-height-archive-description);
  opacity: .65;
}

.contact-layout__list {
  display: grid;
  gap: 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.contact-layout__list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.contact-layout__icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-primary);
  font-size: 1rem;
  font-weight: 700;
}

.contact-layout__list li>span:last-child {
  display: grid;
  gap: 4px;
}

.contact-layout__list strong {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  line-height: 1.35;
}

.contact-layout__list small {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  line-height: 1.5;
  opacity: .65;
}

.contact-layout__form {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.contact-layout__form .wpcf7-form {
  display: grid;
  gap: 20px;
}

.contact-layout__form .wpcf7-form>p {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--theme-color-text);
  font-size: 1.125rem;
  font-weight: 700;
}

.contact-layout__form .wpcf7-form-control-wrap {
  display: block;
}

.contact-layout__form :is(input:not([type="submit"]), textarea, select) {
  min-height: 55px;
  padding: .875rem 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font: inherit;
  font-weight: 400;
}

.contact-layout__form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-layout__form :is(input:not([type="submit"]), textarea, select)::placeholder {
  color: var(--theme-color-text);
  opacity: .45;
}

.contact-layout__form :is(input:not([type="submit"]), textarea, select):focus {
  border-color: var(--theme-color-primary);
  outline: 0;
}

.contact-layout__form input[type="submit"] {
  width: 100%;
  min-height: 50px;
  padding: .875rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}

.contact-layout__form button[type="submit"] {
  width: 100%;
  min-height: 50px;
  padding: .875rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-layout__form input[type="submit"]:hover {
  background: var(--theme-color-primary-hover);
}

.contact-layout__form button[type="submit"]:hover { background: var(--theme-color-primary-hover); }

.contact-layout__form .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: var(--theme-color-danger);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
}

.contact-layout__form .wpcf7-response-output {
  margin: 0 !important;
  padding: .875rem 1rem !important;
  border: 1.5px solid var(--theme-color-border) !important;
  border-radius: var(--theme-radius-medium);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
}

.consultation-progress { display: flex; gap: 8px; margin-bottom: 26px; }
.consultation-progress span { display: block; flex: 1 1 0; border-radius: 4px; background: var(--theme-color-surface-muted); transition: background-color .3s ease; }
.consultation-progress span.is-active { background: var(--theme-color-primary); }
.consultation-progress span { height: 4px; }
.consultation-form-shell .wpcf7-form { min-width: 0; }
.request-demo-layout__form { min-width: 0; }
.consultation-form-shell .website-consultation-form,
.consultation-form-shell .wpcf7-form { display: grid; gap: 24px; }
.consultation-form-shell .fieldset-cf7mls { display: grid; gap: 28px; min-width: 0; margin: 0; padding: 0; border: 0; }
.consultation-form-shell .fieldset-cf7mls[hidden] { display: none !important; }
.consultation-form-shell .form-header { display: grid; gap: 8px; }
.consultation-form-shell .form-header > * { margin: 0; }
.consultation-form-shell .form-header p:first-child { color: var(--theme-color-primary); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.consultation-form-shell .form-header p:last-child { color: var(--theme-color-summary); line-height: 1.7; }
.consultation-form-shell .form-section { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--theme-color-border); }
.consultation-form-shell .form-section > h3 { margin: 0; font-size: 1.25rem; }
.consultation-form-shell .form-field,
.consultation-form-shell .form-actions { display: grid; gap: 10px; min-width: 0; }
.consultation-form-shell .form-field { margin: 0; padding: 0; border: 0; }
.consultation-form-shell .form-field > p { display: grid; gap: 10px; margin: 0; }
.consultation-form-shell .form-field > label,
.consultation-form-shell .form-field > p > label,
.consultation-form-shell .form-field > legend { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--theme-color-text); font-size: 1rem; font-weight: 600; }
.consultation-form-shell .form-field > p { margin: 0; color: var(--theme-color-summary); font-size: .875rem; line-height: 1.6; }
.consultation-form-shell .required-badge { display: inline-flex; min-height: 1.65rem; align-items: center; padding: .2rem .6rem; border-radius: var(--theme-radius-extra); background: var(--theme-color-primary); color: var(--theme-color-9); font-size: .72em; font-weight: 700; line-height: 1; white-space: nowrap; }
.consultation-form-shell :is(input:not([type="submit"]), textarea, select) { width: 100%; min-height: 55px; padding: .875rem 1rem; border: 1.5px solid var(--theme-color-border); border-radius: var(--theme-radius-medium); background: var(--theme-color-surface-muted); color: var(--theme-color-text); font: inherit; }
.consultation-form-shell textarea { height: 140px; min-height: 140px; resize: vertical; }
.consultation-form-shell textarea[name="project-background"],
.consultation-form-shell textarea[name="final-message"] { height: 210px; }
.consultation-form-shell :is(input, textarea, select):focus { border-color: var(--theme-color-primary); outline: 0; }
.consultation-form-shell .wpcf7-form-control-wrap { display: block; min-width: 0; }
.consultation-form-shell .wpcf7-list-item { display: block; margin: 0; }
.consultation-form-shell .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; color: var(--theme-color-text); font-weight: 400; cursor: pointer; }
.consultation-form-shell .wpcf7-list-item input[type="radio"],
.consultation-form-shell .wpcf7-list-item input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--theme-color-primary); }
.consultation-form-shell .form-field .wpcf7-checkbox,
.consultation-form-shell .form-field .wpcf7-radio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.consultation-form-shell .form-field .wpcf7-list-item { flex: 0 1 auto; }
.consultation-form-shell .form-consent { color: var(--theme-color-summary); line-height: 1.7; }
.consultation-form-shell .form-turnstile,
.consultation-form-shell .wpcf7-turnstile { margin: 0; }
.consultation-form-shell .form-consent a { color: var(--theme-color-text); }
.consultation-form-shell .form-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.consultation-form-shell .form-actions > * { flex: 1 1 0; }
.consultation-form-shell .action-button,
.consultation-form-shell .form-actions input[type="submit"] { min-height: 52px; padding: .875rem 1.25rem; border: 0; border-radius: var(--theme-radius-medium); background: var(--theme-color-primary); color: var(--theme-color-9); font: inherit; font-weight: 700; cursor: pointer; }
.consultation-form-shell .cf7mls_back { background: var(--theme-color-surface-muted); color: var(--theme-color-text); }
.consultation-form-shell .wpcf7-not-valid-tip { color: var(--theme-color-danger); font-size: .85rem; }
@media (max-width: 767px) {
  .consultation-form-shell .form-actions { flex-direction: column; }
  .consultation-form-shell .form-actions > * { width: 100%; }
}

.contact-layout__form .is-required-mark,
.contact-layout__form .required {
  color: var(--theme-color-primary);
}

.contact-layout__form textarea {
  height: calc(4 * 1.75em + 1.75rem);
  min-height: 0;
  max-height: calc(4 * 1.75em + 1.75rem);
  resize: none;
}

.contact-layout__form .wpcf7-list-item {
  display: inline-flex;
  margin: 0;
  align-items: flex-start;
  gap: 10px;
}

.contact-layout__form .wpcf7-list-item>label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-layout__form input[type="checkbox"] {
  display: grid;
  width: 1.25rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.25rem;
  margin: .2rem 0 0;
  padding: 0;
  appearance: none;
  place-content: center;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-light);
  background: var(--theme-color-surface-muted);
  cursor: pointer;
}

.contact-layout__form input[type="checkbox"]::before {
  width: .65rem;
  height: .4rem;
  content: "";
  border-bottom: 2px solid var(--theme-color-button-text);
  border-left: 2px solid var(--theme-color-button-text);
  transform: rotate(-35deg) scale(0);
  transition: transform .15s ease;
}

.contact-layout__form input[type="checkbox"]:checked {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
}

.contact-layout__form input[type="checkbox"]:checked::before {
  transform: rotate(-35deg) scale(1);
}

.contact-layout__form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 3px;
}

.contact-layout__form .wpcf7-list-item-label {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  font-weight: 400;
  line-height: var(--theme-line-height-text);
}

.contact-layout__form .wpcf7-list-item-label a,
.contact-layout__form>a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  text-decoration: none !important;
}

.contact-layout__form .wpcf7-list-item-label a::before,
.contact-layout__form .wpcf7-list-item-label a::after,
.contact-layout__form>a::before,
.contact-layout__form>a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
}

.contact-layout__form .wpcf7-list-item-label a::before,
.contact-layout__form>a::before {
  opacity: .15;
}

.contact-layout__form .wpcf7-list-item-label a::after,
.contact-layout__form>a::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.contact-layout__form .wpcf7-list-item-label a:hover::after,
.contact-layout__form .wpcf7-list-item-label a:focus-visible::after,
.contact-layout__form>a:hover::after,
.contact-layout__form>a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.contact-layout__form :is(.cf-turnstile, .wpcf7-turnstile) {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

/* 404 page. */
.not-found {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(12rem, 3fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 10rem);
  min-height: min(65vh, 48rem);
  padding: clamp(3rem, 8vw, 8rem) 0;
}

.not-found__content {
  display: grid;
  justify-items: start;
  gap: 30px;
}

.not-found__visual {
  display: grid;
  place-items: center;
  min-height: 100%;
}

.not-found__orb {
  position: relative;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: var(--theme-color-primary);
}

.not-found__eyebrow {
  margin: 0;
  padding: .25rem .625rem;
  border-radius: var(--theme-radius-light);
  background: color-mix(in srgb, var(--theme-color-primary) 12%, transparent);
  color: var(--theme-color-primary);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 700;
}

.not-found h1,
.not-found__summary {
  margin: 0;
}

.not-found__summary {
  max-width: 42rem;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
  opacity: .65;
}

.not-found__search {
  display: flex;
  width: min(100%, 38rem);
  align-items: center;
  gap: 10px;
  padding: 0 0 0 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
}

.not-found__search svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--theme-color-text);
  opacity: .65;
}

.not-found__search input {
  min-width: 0;
  min-height: 55px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-color-text);
  font-size: 1.125rem;
}

.not-found__search input:focus {
  border: 0;
}

.not-found__search button {
  display: grid;
  width: 55px;
  min-height: 55px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  cursor: pointer;
}

.not-found__search button svg {
  width: 1.35rem;
  height: 1.35rem;
  color: inherit;
  opacity: 1;
}

.not-found__tags {
  display: grid;
  gap: 10px;
  width: min(100%, 38rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--theme-color-border);
}

.not-found__tags h4 {
  margin: 0;
  color: var(--theme-color-text);
}

@media (max-width: 767px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-layout__form {
    padding: 0;
  }

  .not-found {
    grid-template-columns: 1fr;
    min-height: 50vh;
  }

  .not-found__visual {
    display: none;
  }

  .not-found__search,
  .not-found__tags {
    width: 100%;
  }
}

/* 404 viewport layout refinements. */
.site-main--not-found {
  display: grid;
  min-height: calc(100dvh - 156px);
}

.site-main--not-found .not-found {
  min-height: 0;
  padding-block: clamp(2rem, 5vw, 5rem);
}

.not-found__search-row {
  display: flex;
  width: min(100%, 38rem);
  align-items: center;
  gap: 10px;
}

.not-found__search-row .not-found__search {
  flex: 1;
  width: auto;
}

.not-found__search-submit {
  display: grid;
  width: 55px;
  min-height: 55px;
  padding: 0;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  cursor: pointer;
}

.not-found__search-submit svg {
  width: 1.35rem;
  height: 1.35rem;
}

.not-found__tags {
  padding-top: 0;
  border-top: 0;
}

.not-found__tags h4 {
  font-size: .875rem;
}

@media (max-width: 767px) {
  .site-main--not-found {
    min-height: calc(100dvh - 140px);
  }

  .site-main--not-found .not-found {
    min-height: 0;
  }

  .not-found__search-row {
    width: 100%;
  }
}

/* Design resources archive, quick preview, and single resource. */
.resources-archive {
  display: grid;
  gap: 40px;
}

.resources-archive__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 25px;
  max-width: none;
}

.resources-archive__title {
  display: grid;
  gap: 25px;
  max-width: 60rem;
}

.resources-archive__header :is(h1, p) {
  margin: 0;
}

.resources-archive__title>p {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-archive-description);
  line-height: var(--theme-line-height-archive-description);
  opacity: .65;
}

.resources-archive__stats {
  display: flex;
  gap: 2.5rem;
  align-items: start;
  margin-left: auto;
}

.resources-archive__stats>div {
  display: grid;
  gap: .5rem;
}

.resources-archive__stats strong {
  color: var(--theme-color-text);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.resources-archive__stats strong b {
  color: var(--theme-color-primary);
  font-weight: inherit;
}

.resources-archive__stats span {
  color: var(--theme-color-text);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.resource-filters {
  display: flex;
  width: 100%;
  grid-column: 1 / -1;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.resource-filters__controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.resource-filter-list {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.resource-filter-list::-webkit-scrollbar {
  display: none;
}

.resource-filters__pricing {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
}

.resource-filters button {
  min-height: 2.5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font: inherit;
  font-size: var(--theme-font-size-post-meta);
  font-weight: 600;
  cursor: pointer;
}

.resource-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.resource-filter__count {
  display: inline-grid;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .4rem;
  place-items: center;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .67em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.resource-filters button:is(:hover, :focus-visible, .is-active) {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.resource-filters button:is(:hover, :focus-visible, .is-active) .resource-filter__count {
  background: var(--theme-color-9);
  color: var(--theme-color-primary);
}

.resource-filter-search {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 0 .75rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.resource-filter-search svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.resource-filter-search input {
  width: 9rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--theme-font-size-post-meta);
}

.resource-filter-search input:focus {
  border: 0;
  outline: 0;
}

.resource-filter-clear {
  position: sticky;
  left: 0;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  order: -1;
  gap: 10px !important;
  margin-left: 0;
  border-color: var(--theme-color-primary) !important;
  background: var(--theme-color-primary) !important;
  color: var(--theme-color-9) !important;
}

.resource-filter-clear svg {
  width: 1rem;
  height: 1rem;
}

.resource-price-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.resource-price-toggle__text {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
  cursor: pointer;
  opacity: .55;
}

.resource-price-toggle__text.is-active {
  color: var(--theme-color-text);
  opacity: 1;
}

.resource-price-toggle__switch {
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.resource-price-toggle__switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.resource-price-toggle__track {
  width: 100%;
  height: 100%;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  transition: background .2s ease;
}

.resource-price-toggle__track::after {
  position: absolute;
  top: .25rem;
  left: .25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--theme-color-button-text);
  content: "";
  transition: transform .2s ease;
}

.resource-price-toggle__switch input:checked+.resource-price-toggle__track::after {
  transform: translateX(1rem);
}

.resource-price-toggle__switch input:focus-visible+.resource-price-toggle__track {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 3px;
}

.resource-card-grid {
  transition: opacity .2s ease;
}


.resource-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.resource-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.resource-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
}

.resource-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.resource-card:is(:hover, :focus-visible) .resource-card__image img {
  transform: scale(1.03);
}

.resource-card__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

.resource-card__title,
.resource-preview__title-row,
.single-resource__title-row {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(32px, 2fr);
  align-items: start;
  gap: 12px;
}

.resource-card__bookmark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-color-surface-muted);
  cursor: pointer;
}

.resource-card__bookmark.is-saved { color: var(--theme-color-text); }
.resource-card__bookmark svg { width: 24px; height: 24px; }
.resource-card__bookmark > span[aria-hidden] { font-size: 28px; line-height: 1; }
.resource-preview__title-row h2,
.single-resource__title-row h1 { margin: 0; }
.single-resource__title-row { grid-template-columns: minmax(0, 3fr) minmax(36px, 1fr); }

.resource-card__content strong {
  color: var(--theme-color-text);
  font-size: 30px !important;
  line-height: 45px !important;
}

.resource-card__content>span:not(.resource-badges) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--theme-color-text);
  font-size: 18px !important;
  line-height: 32px !important;
  opacity: .65;
}

.resource-card__content>.resource-badges {
  opacity: 1;
}

.resource-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.is-resource-preview-open {
  overflow: hidden;
}

.resource-preview-dialog {
  width: min(540px, calc(100% - 3rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.resource-preview-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

.resource-preview__header {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.375rem 2rem;
  border-bottom: 1.5px solid var(--theme-color-border);
}

.resource-preview__header h4 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
}

.resource-preview__header button {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--theme-color-text);
  cursor: pointer;
}

.resource-preview__header button svg {
  width: 1.5rem;
  height: 1.5rem;
}

.resource-preview__image {
  width: 100%;
  max-height: min(48dvh, 27rem);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: var(--theme-color-surface-muted);
}

.resource-preview-dialog .resource-preview__image {
  width: auto;
  margin: 0 2rem;
  border-radius: var(--theme-radius-medium);
}

.resource-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-preview__content {
  display: grid;
  gap: 20px;
  padding: 2rem;
}

.resource-preview__content :is(h2, p) {
  margin: 0;
}

.resource-preview__content h2 {
  color: var(--theme-color-text);
}

.resource-preview__content p {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
  opacity: .65;
}

.resource-preview__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.resource-preview__actions a {
  display: inline-flex;
  min-height: 50px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .75rem 1rem;
  border-radius: var(--theme-radius-medium);
  font-size: var(--theme-font-size-button);
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.resource-preview__tool {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.resource-preview__tool span[aria-hidden="true"] {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18 18 6m0 0H9m9 0v9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18 18 6m0 0H9m9 0v9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.resource-preview__detail {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.resource-preview-dialog .resource-preview__header {
  border-bottom: 0;
}

.resource-preview-dialog .resource-preview__content h2 {
  font-size: var(--theme-font-size-h4);
  line-height: var(--theme-line-height-h4);
}

.resource-preview-dialog .resource-preview__content p {
  font-size: 1rem;
}

.resource-preview-dialog .resource-preview__detail {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.resource-preview-dialog .resource-preview__tool {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.resource-preview__detail svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.resource-preview-overlay {
  position: fixed;
  z-index: 64;
  inset: 0;
  background: rgb(0 0 0 / 50%);
}

.resource-preview-drawer {
  position: fixed;
  z-index: 65;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(92dvh, 50rem);
  overflow: auto;
  border-radius: var(--theme-radius-heavy) var(--theme-radius-heavy) 0 0;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.resource-preview-drawer__handle {
  width: 2.5rem;
  height: .25rem;
  margin: .75rem auto 0;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-border);
}

.single-resource__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(2rem, 7vw, 8rem);
}

.single-resource__intro {
  display: grid;
  align-content: start;
  gap: 20px;
}

.single-resource__back {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 600;
  text-decoration: none;
}

.single-resource__back svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.single-resource__image {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
}

.single-resource__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-resource__intro :is(h1, p) {
  margin: 0;
}

.single-resource__intro h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.3;
}

.single-resource__intro>p {
  color: var(--theme-color-text);
  font-size: 17px;
  line-height: 32px;
  opacity: .65;
}

.single-resource__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.single-resource__btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--theme-radius-extra);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease;
}

.single-resource__btn--primary { background: var(--theme-color-primary); color: var(--theme-color-on-primary); }
.single-resource__btn--secondary { background: var(--theme-color-surface-muted); color: var(--theme-color-text); }
.single-resource__actions .single-resource__btn { flex: 1 1 0; }

@media (max-width: 767px) {
  .single-resource__actions .single-resource__btn { flex: 0 0 100%; width: 100%; }
}

.single-resource__btn:hover {
  transform: scale(1.02);
}

.single-resource__btn--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-9) !important;
}

.single-resource__btn--secondary {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text) !important;
}

.single-resource__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .single-resource__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .single-resource__btn {
    width: auto;
  }
}

.single-resource__body {
  color: var(--theme-color-text);
  font-size: 17px;
  line-height: 32px;
}

.single-resource__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 30px;
}

.single-resource__body>* {
  margin: 0 !important;
}

.single-resource__body :is(h2, h3, h4, h5, h6) {
  color: var(--theme-color-text);
  opacity: 1;
}

@media (min-width: 768px) {
  .resource-preview-drawer {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .resource-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .resource-card-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .resources-archive__title {
    gap: 25px;
  }

  .resources-archive__title .breadcrumbs,
  .resources-archive__title>p {
    font-weight: 500;
  }

  .resources-archive__title h1 {
    font-size: 3.25rem;
  }

  .resources-archive__stats {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 0;
  }

  .resources-archive__stats>div {
    min-width: min(100%, 10rem);
  }

  .resources-archive__stats strong {
    font-size: 3.25rem;
  }

  .resources-archive__stats span {
    font-size: 1.25rem;
  }

  .resource-filter__count,
  .insight-category-cloud__count,
  .post-action__count {
    min-width: 1.85rem;
    height: 1.85rem;
    font-size: .88em;
  }

  .resource-filters {
    width: 100%;
    margin-top: 20px;
    gap: 20px;
    align-items: stretch;
    flex-direction: column;
  }

  .resource-filters__controls {
    display: grid;
    width: 100%;
    gap: 20px;
    overflow: visible;
  }

  .resource-filter-search {
    width: 100%;
    min-height: 50px;
  }

  .resource-filter-search input {
    width: 100%;
  }

  .resource-filter-list {
    width: calc(100% + var(--theme-page-padding));
    flex-wrap: nowrap;
    margin-right: calc(var(--theme-page-padding) * -1);
    padding-right: var(--theme-page-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .resource-filter-list::-webkit-scrollbar {
    display: none;
  }

  .resource-filter-list>button {
    flex: 0 0 auto;
  }

  .resource-filter-clear {
    position: sticky;
    left: 0;
    z-index: 2;
    order: -1;
    margin-left: 0;
    box-shadow: .75rem 0 1rem var(--theme-color-surface-muted);
  }

  .resource-filters__pricing {
    justify-content: flex-start;
  }

  .resource-price-toggle {
    margin-left: 0;
  }

  .resource-preview-dialog {
    display: none;
  }

  .resource-preview__header {
    min-height: 4.25rem;
    padding: 1rem 1.25rem;
  }

  .resource-preview-drawer .resource-preview__header {
    border-bottom: 0;
  }

  .resource-preview-drawer .resource-preview__image {
    width: auto;
    max-height: 15rem;
    margin: 1.25rem 1.25rem 0;
    border-radius: var(--theme-radius-medium);
  }

  .resource-preview-drawer .resource-preview__actions {
    margin: 1.5rem 0 0;
    gap: 10px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .resource-preview__content {
    padding: 1.5rem 1.25rem;
  }

  .single-resource__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Header alignment, dynamic sticky anchors and newsletter form fields. */
@media (min-width: 768px) {
  .site-header__top {
    min-height: calc(2.5rem + 5px);
  }

  .header-marquee__label,
  .header-marquee {
    padding-block: calc(.5rem + 2.5px);
  }

  .site-header__top-nav {
    padding-block: calc(.5rem + 2.5px);
  }
}

@media (min-width: 1025px) {
  .site-header__middle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 5rem);
  }

  .site-header__middle>nav {
    width: 100%;
    justify-self: stretch;
  }

  .site-header__middle>nav>.menu {
    width: 100%;
    justify-content: space-evenly;
    gap: clamp(1.5rem, 2.5vw, 3.5rem);
  }
}



.kaiyi-newsletter-form {
  display: grid;
  gap: 20px;
  width: min(100%, var(--theme-form-width, 100%));
}

.kaiyi-newsletter-form .form-field,
.kaiyi-newsletter-form .form-turnstile,
.kaiyi-newsletter-form .form-submit {
  min-width: 0;
}

.kaiyi-newsletter-form .form-field {
  display: grid;
  gap: 8px;
}

.kaiyi-newsletter-form .form-field>label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--theme-color-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.kaiyi-newsletter-form :is(.required-badge, .optional-badge) {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--theme-radius-extra);
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.kaiyi-newsletter-form .required-badge {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.kaiyi-newsletter-form .optional-badge {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.kaiyi-newsletter-form .wpcf7-form-control-wrap {
  display: block;
}

.kaiyi-newsletter-form :is(input:not([type="submit"]), textarea, select) {
  min-height: 55px;
  padding: .875rem 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font: inherit;
}

.kaiyi-newsletter-form :is(input:not([type="submit"]), textarea, select):focus {
  border-color: var(--theme-color-primary);
  outline: 0;
}

.kaiyi-newsletter-form input[type="submit"] {
  width: 100%;
  min-height: 50px;
  padding: .875rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.kaiyi-newsletter-form input[type="submit"]:hover {
  background: var(--theme-color-primary-hover);
}

.kaiyi-newsletter-form :is(.cf-turnstile, .wpcf7-turnstile) {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

/* Post-card Bézier image mask and image-corner category badge. */
.post-card__image {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--theme-radius-medium);
}

.post-card__image::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgb(0 0 0 / .12), transparent 40%);
  pointer-events: none;
}

.post-card__image img {
  position: relative;
  z-index: 0;
}

.post-card__badge {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  display: inline-flex;
  max-width: calc(100% - 30px);
  min-height: auto;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  overflow: hidden;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.contact-layout__icon {
  padding: .55rem;
}

.contact-layout__icon svg {
  width: 100%;
  height: 100%;
  color: var(--theme-color-primary);
}

.contact-layout__list small a {
  color: inherit;
  text-decoration: none;
}

.contact-layout__list small a:hover {
  color: var(--theme-color-primary);
}

/* Footer Bézier clipping and resource-filter 8:2 layout. */
.site-footer__panel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 44C238 4 762 4 1000 44V1000H0Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 44C238 4 762 4 1000 44V1000H0Z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

@media (min-width: 768px) {
  .resource-filters {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(12rem, 2fr);
    width: 100%;
    align-items: center;
    gap: 20px;
  }

  .resource-filters__controls {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    width: 100%;
    align-items: center;
    gap: 10px;
    overflow: visible;
  }

  .resource-filter-list {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .resource-filter-list::-webkit-scrollbar {
    display: none;
  }

  .resource-filter-list>button {
    flex: 0 0 auto;
  }

  .resource-filters__pricing {
    width: 100%;
    justify-content: flex-end;
  }

  .resource-filter-clear {
    position: static;
    order: initial;
    box-shadow: none;
  }

  .resource-filter-list.is-sticky-clear .resource-filter-clear {
    position: sticky;
    left: 0;
    z-index: 2;
    order: -1;
    box-shadow: .75rem 0 1rem var(--theme-color-surface-muted);
  }
}

@media (max-width: 767px) {

  .resources-archive__title>p,
  .insight-header__description,
  .contact-layout__summary,
  .page-hero__summary {
    font-size: 21px;
    line-height: 1.75;
  }

  .resource-filter-list.is-sticky-clear .resource-filter-clear {
    position: sticky;
    left: 0;
    z-index: 2;
    order: -1;
    box-shadow: .75rem 0 1rem var(--theme-color-surface-muted);
  }

  .resource-filter-clear {
    position: static;
    box-shadow: none;
  }
}

/* Contextual cursor for interactive archive cards (fine pointers only). */
.site-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: grid;
  width: 5.5rem;
  height: 5.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cursor-x, -100px) - 50%), calc(var(--cursor-y, -100px) - 50%), 0) scale(.75);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2, .75, .2, 1);
  will-change: transform, opacity;
}

.site-cursor.is-visible {
  opacity: 1;
  transform: translate3d(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%), 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .has-site-cursor :is(.resource-card, .resource-card *, .post-card, .post-card *, .home-work, .home-work *, .work-card, .work-card *, .portfolio-card, .portfolio-card *, .work-post-card, .work-post-card *) {
    cursor: none !important;
  }
}

@media (hover: none),
(pointer: coarse) {
  .site-cursor {
    display: none;
  }
}

/* Keep counter animations from changing neighbouring layout measurements. */
[data-odometer-ready="true"] {
  font-variant-numeric: tabular-nums;
}

.resources-archive__stats strong[data-odometer-ready="true"] {
  display: inline-flex;
  min-width: calc(var(--odometer-digits, 1) * 1ch + .8ch);
  align-items: baseline;
}

:is(.resource-filter__count, .insight-category-cloud__count, .post-action__count)[data-odometer-ready="true"] {
  min-width: max(1.5rem, calc(var(--odometer-digits, 1) * .7em + .8rem));
}


/* Compact editorial cursor. */
.site-cursor {
  width: 4.75rem;
  height: 4.75rem;
  box-sizing: border-box;
  padding: .3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;
}



/* Larger divided contact icon list. */
.contact-layout__list {
  gap: 0;
  margin-top: 15px;
  border-top: 1px solid var(--theme-color-border);
}

.contact-layout__list li {
  gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--theme-color-border);
}

.contact-layout__icon {
  width: 3.25rem;
  height: 3.25rem;
  flex-basis: 3.25rem;
  padding: .75rem;
}

.contact-layout__icon svg {
  width: 100%;
  height: 100%;
}

.contact-layout__list li>span:last-child {
  gap: 7px;
}

.contact-layout__list strong {
  font-size: 1.25rem;
  line-height: 1.3;
}

.contact-layout__list small {
  font-size: 1rem;
  line-height: 1.6;
}

.contact-layout__list small .underline-motion {
  padding-bottom: 3px;
}

@media (max-width: 767px) {
  .contact-layout__list li {
    gap: 18px;
    padding-block: 18px;
  }

  .contact-layout__icon {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
    padding: .68rem;
  }

  .contact-layout__list strong {
    font-size: 1.15rem;
  }

  .contact-layout__list small {
    font-size: .95rem;
  }
}

/* Contact Form 7 outputs labels inside <p>; style those actual nodes and badges. */
.contact-layout__form .kaiyi-contact-form {
  display: grid;
  gap: 20px;
}

.contact-layout__form .kaiyi-contact-form :is(.form-field, .form-consent, .form-turnstile, .form-submit)>p {
  display: grid;
  gap: 10px;
  margin: 0;
}

.contact-layout__form .kaiyi-contact-form .form-field br {
  display: none;
}

.contact-layout__form .kaiyi-contact-form .form-field label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--theme-color-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.contact-layout__form :is(.required-badge, .optional-badge) {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--theme-radius-extra);
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.contact-layout__form .required-badge {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.contact-layout__form .optional-badge {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

/* Squarer stepped Bézier profile, shared by all SVG-mask components. */
.theme-bezier-mask,
.site-footer__panel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M238 0H1000V600H0V248H118C156 248 184 220 184 182V66C184 28 200 0 238 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M238 0H1000V600H0V248H118C156 248 184 220 184 182V66C184 28 200 0 238 0Z'/%3E%3C/svg%3E");
}

.post-card__content {
  position: relative;
  margin-top: -1px;
  padding-top: 20px;
}

.site-footer__panel {
  border-radius: 0;
  padding-top: clamp(3.25rem, 5vw, 5.75rem);
}

@media (max-width: 767px) {
  .site-footer__panel {
    padding-top: 4.75rem;
  }
}

/* Shared interlocking Bézier mask: use .theme-bezier-mask for future masked sections. */
.theme-bezier-mask,
.site-footer__panel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M250 0H936C971 0 1000 29 1000 64V536C1000 571 971 600 936 600H64C29 600 0 571 0 536V252C0 217 29 188 64 188H124C159 188 188 159 188 124V64C188 29 215 0 250 0Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M250 0H936C971 0 1000 29 1000 64V536C1000 571 971 600 936 600H64C29 600 0 571 0 536V252C0 217 29 188 64 188H124C159 188 188 159 188 124V64C188 29 215 0 250 0Z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Article cards stay clean by default. Their stepped SVG mask and author portrait
   enter from the lower-left only while the card is intentionally hovered. */
.post-card__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--theme-radius-medium);
  transition: border-radius .28s ease;
}

.post-card__author-mask {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  background: var(--theme-color-surface-muted);
  padding-top: 15px;
  padding-right: 15px;
  border-top-right-radius: var(--theme-radius-medium);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-15px, 15px, 0);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .75, .2, 1);
}

.post-card__author-curve {
  position: absolute;
  width: 30px;
  height: 30px;
  color: var(--theme-color-surface-muted);
  fill: currentColor;
  pointer-events: none;
}

.post-card__author-curve--top {
  top: 0;
  left: 0;
  transform: translateY(-100%);
}

.post-card__author-curve--right {
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}

.post-card__author-avatar {
  display: block;
  width: var(--post-card-avatar-size);
  height: var(--post-card-avatar-size);
  border-radius: var(--theme-radius-medium);
  object-fit: cover;
}

/* Global CSS text reveal: a duplicate label rises in on hover, without Framer. */
.has-hover-reveal {
  overflow: hidden;
}

.hover-reveal__text {
  display: inline-grid;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1.2;
}

.hover-reveal__text>span {
  grid-area: 1 / 1;
  transition: transform .34s cubic-bezier(.2, .75, .2, 1);
}

.hover-reveal__text>span:last-child {
  transform: translateY(110%);
}

.has-hover-reveal:hover .hover-reveal__text>span:first-child,
.has-hover-reveal:focus-visible .hover-reveal__text>span:first-child {
  transform: translateY(-110%);
}

.has-hover-reveal:hover .hover-reveal__text>span:last-child,
.has-hover-reveal:focus-visible .hover-reveal__text>span:last-child {
  transform: translateY(0);
}

/* Filter controls use the same rising reveal for their primary fill. */
.insight-category-cloud button,
.resource-filter-list>button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .3s ease, border-color .01s linear .36s, background-color .3s ease;
}

.insight-category-cloud button::before,
.resource-filter-list>button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--theme-color-primary);
  content: "";
  transform: translateY(105%);
  transition: transform .36s cubic-bezier(.2, .75, .2, 1);
}

.insight-category-cloud button:is(:hover, :focus-visible):not(.is-active),
.resource-filter-list>button:is(:hover, :focus-visible):not(.is-active) {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.insight-category-cloud button:is(:hover, :focus-visible):not(.is-active)::before,
.resource-filter-list>button:is(:hover, :focus-visible):not(.is-active)::before {
  transform: translateY(0);
}

.insight-category-cloud button:is(:hover, :focus-visible):not(.is-active) .insight-category-cloud__count,
.resource-filter-list>button:is(:hover, :focus-visible):not(.is-active) .resource-filter__count {
  background: var(--theme-color-9);
  color: var(--theme-color-primary);
}

/* GSAP drives these panels when available; these states provide a smooth fallback. */
body.is-ui-open {
  overflow: hidden;
}

.ui-overlay {
  opacity: 0;
  transition: opacity .22s ease;
}

.ui-overlay.is-open {
  opacity: 1;
}

.ui-sheet,
.ui-drawer {
  will-change: transform, opacity;
}

.ui-sheet.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ui-drawer.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ui-dialog {
  will-change: transform, opacity;
}

.ui-dialog[open]::backdrop {
  animation: ui-backdrop-in .25s ease both;
}

@keyframes ui-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*
 * The panels' contents used to carry will-change too. Nothing here animates on
 * its own -- they ride the panel's transform -- so all the hint did was hold a
 * compositor layer per element, on every page, for the whole session. The
 * panels themselves keep theirs, because they are the things that move.
 */

@media (prefers-reduced-motion: reduce) {

  .hover-reveal__text>span,
  .insight-category-cloud button::before,
  .resource-filter-list>button::before,
  .ui-overlay {
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-card__author-mask {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Insight, category and tag archives share one responsive live-filter header. */
.insight-header {
  gap: 30px;
}

.insight-header h1 {
  color: var(--theme-color-text);
}

.insight-header__description {
  color: var(--theme-color-text);
  opacity: .7;
}

.insight-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.insight-filter-search {
  display: inline-flex;
  min-width: min(100%, 16rem);
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 0 1rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.insight-filter-search svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.insight-filter-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.insight-category-cloud button {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 8px;
  padding: .5rem .75rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font: inherit;
  font-size: var(--theme-font-size-post-meta);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.insight-category-cloud button:is(:hover, :focus-visible, .is-active) {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.insight-category-cloud button:is(:hover, :focus-visible, .is-active) .insight-category-cloud__count {
  background: var(--theme-color-9);
  color: var(--theme-color-primary);
}

.post-card-grid.is-loading {
  opacity: 1;
  pointer-events: none;
  transition: opacity .15s ease;
}

@media (max-width: 767px) {
  .insight-header {
    gap: 25px;
  }

  .insight-filters {
    align-items: stretch;
    gap: 15px;
  }

  .insight-filter-search {
    width: 100%;
  }

  .insight-category-cloud {
    width: calc(100% + var(--theme-page-padding));
    flex-wrap: nowrap;
    margin-right: calc(var(--theme-page-padding) * -1);
    padding-right: var(--theme-page-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .insight-category-cloud::-webkit-scrollbar {
    display: none;
  }

  .insight-category-cloud> :is(a, button) {
    flex: 0 0 auto;
  }
}


body.is-share-open {
  overflow: hidden;
}

/* Desktop primary navigation stays right-aligned with an intentional fixed rhythm. */
@media (min-width: 1025px) {
  .site-header__middle {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .site-header__middle>nav {
    width: 100%;
    justify-self: end;
    justify-content: flex-end;
  }

  .site-header__middle>nav>.menu {
    justify-content: flex-end;
    gap: 35px;
  }
}

/* Oversized footer signature reaches both inner edges without causing overflow. */
.site-footer__statement {
  width: 100%;
  margin-inline: 0;
  font-size: clamp(3.5rem, 13.5vw, 17rem);
  line-height: .82;
  letter-spacing: -.07em;
  white-space: nowrap;
}



@media (min-width: 1025px) {
  .site-header__middle>nav>.menu {
    gap: 45px;
    font-weight: 600;
  }

  .resources-archive__header {
    gap: 20px;
  }

  .resource-filters {
    gap: 20px;
  }

  .resources-archive__stats {
    margin-left: auto;
    align-items: end;
  }

  .resources-archive__stats>div {
    justify-items: end;
    text-align: right;
  }

  .resources-archive__stats strong {
    font-size: 4.5rem;
  }

  .resources-archive__stats span {
    font-size: 1.35rem;
    text-align: right;
  }
}

@media (max-width: 767px) {

  .site-footer__statement {
    font-size: clamp(3rem, 16vw, 7rem);
  }
}

/* Final footer composition: a vertical social mask at left and a back-to-top mask at right. */
.site-footer {
  padding: clamp(1rem, 2.25vw, 2.5rem);
  overflow: visible;
}

.site-footer__panel {
  position: relative;
  min-height: 39rem;
  padding: clamp(4.5rem, 6vw, 6.75rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 3vw, 3.25rem);
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  -webkit-mask-image: none;
  mask-image: none;
}

.site-footer__top {
  min-height: 22rem;
}

.site-footer__social-rail {
  top: clamp(1rem, 2.25vw, 2.5rem);
  left: 0;
  z-index: 4;
  min-width: 3.75rem;
  padding: .8rem .65rem 1.2rem;
  border-radius: 0 0 var(--theme-radius-heavy) 0;
  background: var(--theme-color-surface-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 520' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H100V438C100 484 64 520 18 520H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 520' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H100V438C100 484 64 520 18 520H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.site-footer__social-rail a {
  width: 2.25rem;
  height: 2.25rem;
}

.site-footer__back {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  min-height: 3.5rem;
  padding: .8rem clamp(1.5rem, 3vw, 3.5rem) .8rem 2.25rem;
  border-radius: 0;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text) !important;
  text-decoration: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H420V100H62C28 100 0 72 0 38Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H420V100H62C28 100 0 72 0 38Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.site-footer__back::before,
.site-footer__back::after {
  content: none !important;
}

.site-footer__statement {
  width: calc(100% + clamp(0rem, 1.5vw, 2rem));
  margin: clamp(5rem, 12vw, 12rem) 0 clamp(2rem, 4vw, 4rem) clamp(-1rem, -1vw, 0rem);
  font-size: clamp(3.5rem, 13.75vw, 17rem);
  line-height: .78;
}

.site-footer__bottom {
  align-items: center;
}

.site-footer__bottom-nav .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__bottom-nav :is(a, .site-footer__bottom-fallback) {
  color: var(--theme-color-text);
  opacity: .7;
  text-decoration: none !important;
}

.site-footer__bottom-nav a::before,
.site-footer__bottom-nav a::after {
  content: none !important;
}

.site-footer__bottom-nav a:hover {
  color: var(--theme-color-text);
  opacity: 1;
}



@media (max-width: 767px) {
  .site-footer {
    padding: 1rem var(--theme-page-padding);
  }

  .site-footer__panel {
    min-height: 0;
    padding: 5.5rem 1.5rem 1.5rem;
  }

  .site-footer__social-rail {
    position: static;
    width: fit-content;
    margin-bottom: 1rem;
    border-radius: var(--theme-radius-heavy);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .site-footer__back {
    font-size: .75rem;
  }

  .site-footer__statement {
    width: 100%;
    margin: 5rem 0 2rem;
    font-size: clamp(3rem, 16vw, 6rem);
    white-space: normal;
  }

  .site-footer__bottom {
    align-items: flex-start;
  }

  .site-footer__bottom-nav .menu {
    justify-content: flex-start;
  }

}

/* Header visibility is controlled by its own classes, never by reveal. */
.site-header__middle {
  z-index: 45;
  transition: height .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2, .75, .2, 1);
  transform: translate3d(0, 0, 0);
}

.site-header__middle.is-sticky {
  transform: translate3d(0, 0, 0) !important;
}

.site-header__middle.is-sticky.is-hidden {
  transform: translate3d(0, -100%, 0) !important;
}

/* Mobile TOC is a calm in-flow navigation card without a floating shadow. */
@media (max-width: 767px) {
  .article-toc--mobile {
    box-shadow: none !important;
  }
}

/* Keep every action icon and label on the same visual baseline. */
.post-action,
.post-action>span,
.post-action>svg,
.post-action__icon {
  align-items: center;
  vertical-align: middle;
}

.post-action {
  line-height: normal;
}

.post-action__icon {
  display: inline-flex;
  justify-content: center;
}

.post-action>svg,
.post-action__icon svg {
  display: block;
}

/* SVG mask: normal cards remain clean; the lower-right curve only enters on hover. */
.post-card__image {
  -webkit-mask-image: none;
  mask-image: none;
}

/* legacy hover mask removed */

/* About services use the summary colour so dark/light modes stay in sync. */
.about-services__dots {
  gap: .16em;
  margin-inline-start: .28em;
  color: var(--theme-color-summary);
}

.about-services__dots i {
  min-width: .16em;
}

.about-service-card__number {
  color: var(--theme-color-summary);
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1;
}

.about-service-card>p:last-child {
  color: var(--theme-color-summary);
}

/* Insight filters share the search field's 50px rhythm and pill silhouette. */
.insight-category-cloud :is(a, button) {
  min-height: 50px;
  padding: .55rem 1.05rem;
  border-radius: var(--theme-radius-extra);
}

.insight-category-cloud__count {
  min-width: 1.8rem;
  height: 1.8rem;
  padding-inline: .42rem;
  font-size: .62em;
}

.post-card__badge {
  font-size: calc(var(--theme-font-size-post-meta) * .82);
}

/* Hover card composition: one lower-right image curve plus an independent
   lower-left author portrait, so it is never clipped by the media mask. */
.post-card__media {
  position: relative;
  min-width: 0;
  transition: padding-bottom .3s cubic-bezier(.2, .75, .2, 1);
}

.post-card__media .post-card__image {
  display: block;
}




/* A card, rather than its title link, owns the editorial hover reveal. */
@media (hover: hover) and (pointer: fine) {
  .post-card__content h2 a.has-hover-reveal:hover .hover-reveal__text>span:first-child {
    transform: translateY(0);
  }

  .post-card__content h2 a.has-hover-reveal:hover .hover-reveal__text>span:last-child {
    transform: translateY(110%);
  }

  .post-card:hover .post-card__content h2 a.has-hover-reveal .hover-reveal__text>span:first-child {
    transform: translateY(-110%);
  }

  .post-card:hover .post-card__content h2 a.has-hover-reveal .hover-reveal__text>span:last-child {
    transform: translateY(0);
  }
}



/* Desktop archive controls gain five pixels while preserving their shared rhythm. */
@media (min-width: 768px) {

  .resource-filters button,
  .resource-filter-search,
  .insight-filter-search,
  .insight-category-cloud button {
    height: 55px;
    min-height: 55px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-card__image {
    border-radius: var(--theme-radius-medium);
  }

  .post-card:hover .post-card__author-mask {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Archive filters share one 50px control rhythm with their search fields. */
.resource-filters button,
.insight-category-cloud :is(a, button) {
  min-height: 50px;
  border-radius: var(--theme-radius-extra);
}

.resource-filters button {
  padding: .55rem 1.05rem;
}

/* Homepage selected work: larger editorial heading and rising primary reveal. */
.home-works__header {
  gap: 20px;
}

.home-works__header p {
  color: var(--theme-color-summary);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.home-works__header h2 {
  font-size: clamp(2.75rem, 5vw, 5.25rem);
  line-height: 1.12;
}

.home-works__table {
  border-top: 0;
}

.home-work {
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  transition: color .36s cubic-bezier(.2, .75, .2, 1);
}

.home-work::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--theme-color-primary);
  content: "";
  transform: translate3d(0, 102%, 0);
  transition: transform .42s cubic-bezier(.2, .75, .2, 1);
}

.home-work>* {
  position: relative;
  z-index: 1;
}

.home-work>span {
  color: var(--theme-color-summary);
}

.home-work:is(:hover, :focus-visible)::before {
  transform: translate3d(0, 0, 0);
}

.home-work:is(:hover, :focus-visible),
.home-work:is(:hover, :focus-visible) :is(strong, span) {
  color: var(--theme-color-9) !important;
}

/* The off-canvas panel is intentionally edge-to-edge, without a left divider. */
.ui-sheet,
.ui-drawer {
  border-left: 0;
}

/* Works archive: default editorial list with a user-selectable card grid. */
.works-hero {
  display: grid;
  gap: 25px;
}

.works-hero .breadcrumbs {
  margin: 0;
}

.works-hero h1 {
  max-width: 16ch;
  margin: 0;
}

.works-archive {
  display: grid;
  gap: 30px;
  margin-top: clamp(3rem, 7vw, 7rem);
}

.works-archive__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  color: var(--theme-color-summary);
  font-size: var(--theme-font-size-post-meta);
}

.works-view-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
}

.works-view-toggle button {
  display: grid;
  width: auto;
  height: auto;
  padding: 1.25rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-color-text);
  cursor: pointer;
}

.works-view-toggle button+button {
  border-left: 1px solid var(--theme-color-border);
}

.works-view-toggle button.is-active {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.works-view-toggle svg {
  width: 2rem;
  height: 2rem;
}

.works-archive__head,
.works-archive__row {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(7rem, 1fr) minmax(5rem, .65fr) minmax(12rem, 1.5fr);
  gap: 20px;
  align-items: center;
}

.works-archive__head {
  padding: 15px 0;
  color: var(--theme-color-summary);
  font-size: var(--theme-font-size-post-meta);
}

.works-archive__row {
  position: relative;
  isolation: isolate;
  min-height: 5.75rem;
  overflow: hidden;
  padding: 20px 0;
  color: var(--theme-color-text);
  text-decoration: none;
  transition: color .36s cubic-bezier(.2, .75, .2, 1);
}

.works-archive__row::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--theme-color-primary);
  content: "";
  transform: translate3d(0, 102%, 0);
  transition: transform .42s cubic-bezier(.2, .75, .2, 1);
}

.works-archive__row>* {
  position: relative;
  z-index: 1;
}

.works-archive__row strong {
  font-size: var(--theme-font-size-h5);
  font-weight: 500;
}

.works-archive__row>span {
  color: var(--theme-color-summary);
  font-size: var(--theme-font-size-post-meta);
}

.works-archive__row:is(:hover, :focus-visible)::before {
  transform: translate3d(0, 0, 0);
}

.works-archive__row:is(:hover, :focus-visible),
.works-archive__row:is(:hover, :focus-visible) :is(strong, span) {
  color: var(--theme-color-9) !important;
}

.works-archive__grid {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.work-card {
  display: grid;
  gap: 20px;
}

.work-card__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
}

.work-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .75, .2, 1);
}

.work-card__image:hover img {
  transform: scale(1.04);
}

.work-card__content {
  display: grid;
  align-content: start;
  gap: 15px;
}

.work-card__content :is(h2, p, small) {
  margin: 0;
}

.work-card__content h2 {
  font-size: 30px !important;
  line-height: 45px !important;
}

.work-card__content h2 a {
  color: var(--theme-color-text);
  text-decoration: none;
}

.work-card__content p,
.work-card__content small {
  color: var(--theme-color-summary);
  font-size: 18px !important;
  line-height: 32px !important;
}

.work-card__content small {
  font-size: var(--theme-font-size-post-meta);
}

[data-works-archive][data-works-view="grid"] .works-archive__list {
  display: none;
}

[data-works-archive][data-works-view="grid"] .works-archive__grid {
  display: grid;
}

/* One consistent off-canvas menu on mobile, tablet and desktop. */
.ui-sheet[data-ui-sheet] {
  display: none !important;
}

@media (min-width: 1025px) {
  .ui-drawer[data-ui-drawer] {
    display: flex;
    width: min(500px, 90vw);
  }
}

.ui-drawer[data-ui-drawer] .menu-item-has-children {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ui-drawer[data-ui-drawer] .menu-item>a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ui-drawer[data-ui-drawer] .menu-item-has-children>a {
  min-width: 0;
  flex: 1 1 0;
}

.ui-drawer[data-ui-drawer] .menu-item__badge {
  margin-left: 5px;
  /* inherits global badge sizing */
}

.ui-drawer[data-ui-drawer] .sub-menu {
  display: none;
  flex-basis: 100%;
  order: 3;
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

.ui-drawer[data-ui-drawer] .menu-item-has-children.is-open>.sub-menu {
  display: grid;
  gap: 0;
}

.ui-drawer[data-ui-drawer] .sub-menu>li {
  position: relative;
  padding: .5rem 0 .5rem 1.25rem;
}

.ui-drawer[data-ui-drawer] .sub-menu>li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--theme-color-primary);
  content: "";
  transform: translateY(-50%);
}

.ui-drawer[data-ui-drawer] .sub-menu a {
  font-size: .85em;
}

.ui-drawer[data-ui-drawer] .ui-sheet__header {
  width: calc(100% + 3rem);
  margin-right: -1.5rem;
  margin-left: -1.5rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (max-width: 1024px) {
  .works-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .works-hero {
    gap: 25px;
  }

  .works-archive {
    gap: 25px;
    margin-top: 3rem;
  }

  .works-archive__toolbar {
    justify-content: space-between;
  }

  .works-archive__head {
    display: none;
  }

  .works-archive__row {
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    min-height: 0;
  }

  .works-archive__row strong {
    grid-column: 1 / -1;
  }

  .works-archive__row>span:last-child {
    display: none;
  }

  .works-archive__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Interface rhythm: action labels and their SVGs share one fixed visual size. */
.post-action {
  min-height: 50px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.post-action>svg,
.post-action__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
}

.post-action>svg,
.post-action__icon svg {
  width: 100%;
  height: 100%;
}

/* Breadcrumbs are navigational context, never animated link treatments. */
.breadcrumbs a,
.breadcrumbs a.underline-motion {
  padding-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.breadcrumbs a::before,
.breadcrumbs a::after,
.breadcrumbs a.underline-motion::before,
.breadcrumbs a.underline-motion::after {
  content: none !important;
}

/* Desktop navigation: larger but deliberately lighter labels, with a slightly
   stronger icon stroke so every header icon has the same optical weight. */
@media (min-width: 1025px) {
  .site-header__middle>nav>.menu {
    font-size: 22.5px;
    font-weight: 500;
  }

  .site-header__actions svg :is(path, circle, line, polyline)[stroke] {
    stroke-width: 1.8;
  }

  /* The filters only need two adaptive columns, separated by 20px. */
  .resource-filters {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
  }
}

/* Blog archive controls follow the exact 50px resource-control rhythm. */
.insight-filter-search,
.insight-category-cloud button {
  box-sizing: border-box;
  min-height: 50px;
}

.insight-category-cloud__count {
  display: inline-grid;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .4rem;
  place-items: center;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .67em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.insight-category-cloud button:is(:hover, :focus-visible, .is-active) .insight-category-cloud__count {
  background: var(--theme-color-9);
  color: var(--theme-color-primary);
}

/* Sticky is intentionally scoped to the middle navigation row. The announcement
   row always remains in normal document flow and scrolls away with the page. */
.site-header,
.site-header.is-middle-sticky {
  position: static !important;
}

.site-header__top,
.site-header.is-middle-sticky .site-header__top {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

.site-header.is-middle-sticky .site-header__middle.is-sticky {
  position: fixed !important;
  top: var(--wp-admin-bar-height, 0px) !important;
}

/* Insight filters are exactly the same control height as the search field. */
.insight-filters {
  align-items: center;
}

.insight-filter-search,
.insight-category-cloud button {
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
}

.insight-category-cloud button {
  align-items: center;
  padding-block: 0;
  padding-inline: 1.05rem;
  border-radius: var(--theme-radius-extra);
}

.insight-category-cloud__count {
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .4rem;
  border-radius: var(--theme-radius-extra);
  font-size: .67em;
  line-height: 1;
}

/* Homepage work list: restore the editorial dividers and keep content clear of
   the animated edge-fill on both sides. */
.home-works__table {
  border-top: 0;
}

.home-works__head,
.home-work {
  padding-inline: 20px;
}

.home-works__head {
  color: var(--theme-color-summary);
  font-size: max(1rem, var(--theme-font-size-post-meta));
  font-weight: 500;
}

.home-work {
  border-top: 1px solid var(--theme-color-border);
}

/* Sticky Steps uses absolutely positioned observer lanes. They drive the
   changeover without inserting tall trigger blocks after the sticky canvas. */
.home-sticky-steps {
  --home-step-count: 1;
  min-height: 70svh;
}

.home-sticky-steps__triggers {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--home-step-count), minmax(0, 1fr));
  pointer-events: none;
}

.home-sticky-steps__trigger,
.home-sticky-steps__trigger:last-child {
  height: auto;
  min-height: 0;
}

@media (max-width: 767px) {
  .home-sticky-steps {
    min-height: 78svh;
  }
}

/* Works: mirror the home editorial list; grid remains an alternate view. */
.works-archive__toolbar {
  justify-content: flex-end;
  min-height: 50px;
}

.works-view-toggle {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.works-view-toggle button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  height: auto;
  padding: 1.25rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  transition: border-color .3s ease, color .3s ease;
}

.works-view-toggle button+button {
  border-left: 1px solid var(--theme-color-border);
}

.works-view-toggle button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--theme-color-primary);
  content: "";
  transform: translate3d(0, 105%, 0);
  transition: transform .36s cubic-bezier(.2, .75, .2, 1);
}

.works-view-toggle button:is(:hover, :focus-visible)::before,
.works-view-toggle button.is-active::before {
  transform: translate3d(0, 0, 0);
}

.works-view-toggle button:is(:hover, :focus-visible),
.works-view-toggle button.is-active {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.works-archive__list {
  border-top: 0;
}

.works-archive__head,
.works-archive__row {
  padding-inline: 20px;
}

.works-archive__head {
  min-height: 58px;
  padding-block: 15px;
  border-bottom: 1.5px solid var(--theme-color-border);
  color: var(--theme-color-summary);
  font-size: max(1rem, var(--theme-font-size-post-meta));
  font-weight: 500;
}

.works-archive__row {
  border-top: 0;
  border-bottom: 1px solid var(--theme-color-border);
}

/* The phone menu is a dropdown card; tablet/desktop retain their existing panel. */





@media (max-width: 767px) {

  .site-header__top,
  .header-marquee {
    min-height: 55px;
    height: 55px;
  }
}

.site-footer.kaiyi-footer-section {
  position: relative;
  width: 100%;
  margin-top: var(--theme-content-footer-gap, 40px);
  padding: 34px var(--theme-page-padding) 42px;
  overflow: hidden;
  border-radius: 0;
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
}

.site-footer.kaiyi-footer-section :is(a, a:hover, a:focus) {
  text-decoration: none !important;
  box-shadow: none !important;
}

.site-footer.kaiyi-footer-section a::before,
.site-footer.kaiyi-footer-section a::after {
  content: none !important;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-layout {
  width: 100%;
  max-width: 1920px;
  margin: auto;
}

.site-footer.kaiyi-footer-section .kaiyi-footer {
  position: relative;
  min-height: 600px;
  padding: 60px 0 40px;
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  display: flex;
  flex-direction: column;
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left,
.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  position: absolute;
  z-index: 5;
  top: 0;
  background: var(--theme-color-surface);
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
  left: 0;
  padding: 0 20px 20px 0;
  border-bottom-right-radius: var(--theme-radius-heavy);
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  right: 0;
  padding: 0 0 20px 20px;
  border-bottom-left-radius: var(--theme-radius-heavy);
}

.site-footer.kaiyi-footer-section .kaiyi-socials {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link:hover {
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link span {
  font-size: 18px;
  font-weight: 700;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-message {
  display: block;
  color: var(--theme-color-text);
  font-size: .9rem;
  white-space: nowrap;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(110px, .65fr)) minmax(200px, .9fr);
  gap: clamp(24px, 4vw, 60px);
  padding: 0 42px;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-cta-title {
  max-width: 10ch;
  margin: 0 0 1.5rem;
  color: var(--theme-color-text);
  font-size: clamp(2.2rem, 3.2vw, 3.7rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.045em;
}

.site-footer.kaiyi-footer-section .site-footer__eyebrow {
  display: block;
  margin: 0 0 .75rem;
  color: var(--theme-color-summary);
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  padding: 10px 13px 10px 24px;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
  font-weight: 600;
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color-primary);
  font-size: 1.1rem;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-column-title {
  margin: 0 0 1rem;
  color: var(--theme-color-text);
  font-size: 1.125rem;
  font-weight: 600;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links .menu {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a {
  color: var(--theme-color-summary);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a:hover {
  color: var(--theme-color-text);
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list {
  display: grid;
  gap: .85rem;
  color: var(--theme-color-summary);
  font-size: .95rem;
  line-height: 1.55;
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list :is(a, p) {
  margin: 0;
  color: inherit;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant {
  width: 100%;
  margin-top: auto;
  padding-top: clamp(20px, 3vh, 40px);
  overflow: hidden;
}

.site-footer.kaiyi-footer-section .marquee-content {
  display: inline-flex;
  animation: kaiyi-footer-marquee 28s linear infinite;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
  margin: 0;
  padding: 10px 40px 20px 0;
  color: var(--theme-color-text);
  font-size: clamp(4.5rem, 12vw, 15rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant-text span {
  color: var(--theme-color-primary);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 0 clamp(24px, 3vw, 60px);
  border: 0;
  color: var(--theme-color-summary);
  font-size: .9rem;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom :is(.kaiyi-footer-bottom-left, .kaiyi-footer-bottom-right, .menu) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom strong {
  color: var(--theme-color-text);
}

@keyframes kaiyi-footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .site-footer.kaiyi-footer-section .kaiyi-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 2rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .site-footer.kaiyi-footer-section {
    padding: 20px var(--theme-page-padding) 30px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer {
    min-height: 0;
    padding-top: 7rem;
    border-radius: var(--theme-radius-medium);
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
    padding-right: 28px;
    padding-bottom: 24px;
    border-bottom-right-radius: 20px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-fillet-tl {
    width: 20px;
    height: 20px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-fillet-tl::after {
    border-top-left-radius: 20px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
    padding-left: 20px;
    padding-bottom: 20px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-socials {
    flex-direction: row;
    gap: 8px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-social-link {
    width: 46px;
    height: 46px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-social-link svg {
    width: 20px;
    height: 20px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-message {
    max-width: 10rem;
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
    padding: 0 1.5rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta {
    grid-column: span 2;
    margin-top: 3rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta-title {
    max-width: 12ch;
    font-size: 2.35rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
    font-size: clamp(4rem, 20vw, 7.5rem);
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 1.5rem;
  }
}

/* Footer cutout fillets mirror the supplied Shape reference using SVG paths */
/* Shape footer CSS fillets */
.site-footer.kaiyi-footer-section .kaiyi-fillet-tl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--theme-radius-heavy);
  height: var(--theme-radius-heavy);
  transform: translateY(100%);
  background: var(--theme-color-surface);
  z-index: 20;
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tl::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--theme-color-surface-muted);
  border-top-left-radius: var(--theme-radius-heavy);
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--theme-radius-heavy);
  height: var(--theme-radius-heavy);
  transform: translateX(100%);
  background: var(--theme-color-surface);
  z-index: 20;
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--theme-color-surface-muted);
  border-top-left-radius: var(--theme-radius-heavy);
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr-topleft {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--theme-radius-heavy);
  height: var(--theme-radius-heavy);
  transform: translateX(-100%);
  background: var(--theme-color-surface);
  z-index: 20;
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr-topleft::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--theme-color-surface-muted);
  border-top-right-radius: var(--theme-radius-heavy);
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr-bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--theme-radius-heavy);
  height: var(--theme-radius-heavy);
  transform: translateY(100%);
  background: var(--theme-color-surface);
  z-index: 20;
}

.site-footer.kaiyi-footer-section .kaiyi-fillet-tr-bottomright::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--theme-color-surface-muted);
  border-top-right-radius: var(--theme-radius-heavy);
}

/* --------------------------------------------------------------------------
   Shape footer: complete composition (social rail, inverse masks and marquee)
   -------------------------------------------------------------------------- */
.site-footer.kaiyi-footer-section {
  --kaiyi-footer-page: var(--theme-color-background);
  --kaiyi-footer-surface: var(--theme-color-surface-muted);
  --kaiyi-footer-text: var(--theme-color-text);
  --kaiyi-footer-summary: var(--theme-color-summary);
  --kaiyi-footer-accent: var(--theme-color-primary);
  --kaiyi-footer-radius: 24px;
  position: relative;
  margin-top: var(--theme-content-footer-gap, 40px);
  padding: 34px 42px 42px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--kaiyi-footer-page);
  color: var(--kaiyi-footer-text);
}

.site-footer.kaiyi-footer-section :is(a, a:hover, a:focus, a:visited) {
  color: inherit;
  text-decoration: none !important;
  box-shadow: none !important;
}

.site-footer.kaiyi-footer-section a::before,
.site-footer.kaiyi-footer-section a::after {
  content: none !important;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-layout {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.site-footer.kaiyi-footer-section .kaiyi-footer {
  position: relative;
  display: flex;
  min-height: 600px;
  padding: 60px 0 40px;
  overflow: hidden;
  border-radius: var(--kaiyi-footer-radius) var(--kaiyi-footer-radius) 0 0;
  background: var(--kaiyi-footer-surface);
  color: var(--kaiyi-footer-text);
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left,
.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  position: absolute;
  top: 0;
  z-index: 30;
  background: var(--kaiyi-footer-page);
  min-width: max-content;
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
  left: 0;
  padding: 0 20px 20px 0;
  border-bottom-right-radius: var(--kaiyi-footer-radius);
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  right: 0;
  padding: 0 20px 20px 20px;
  border-bottom-left-radius: var(--kaiyi-footer-radius);
}


.site-footer.kaiyi-footer-section .kaiyi-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: var(--kaiyi-footer-accent);
  color: var(--theme-color-button-text) !important;
  font-size: 1rem;
  font-weight: 700;
  transition: background-color .3s ease;
}

.site-footer.kaiyi-footer-section .kaiyi-social-link:hover {
  background: var(--kaiyi-footer-accent);
  color: var(--theme-color-button-text) !important;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-message {
  display: block;
  margin: 0;
  color: var(--kaiyi-footer-text);
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-top {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(270px, 1.25fr) repeat(3, minmax(130px, .6fr)) minmax(200px, .85fr);
  gap: clamp(36px, 4.4vw, 90px);
  padding: 0 clamp(40px, 4vw, 80px) 0 clamp(110px, 8vw, 130px);
}

.site-footer.kaiyi-footer-section .site-footer__eyebrow {
  display: block;
  margin: 0 0 .75rem;
  color: var(--kaiyi-footer-summary);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-cta-title {
  max-width: 10ch;
  margin: 0 0 30px;
  color: var(--kaiyi-footer-text);
  font-size: clamp(2.35rem, 3.2vw, 3.7rem);
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 3.5rem;
  padding: 0 1.5rem 0 2rem;
  border-radius: 999px;
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text) !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1;
  transition: transform .3s ease, background-color .3s ease;
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button:hover {
  transform: translateY(-3px);
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-column-title {
  margin: 0 0 20px;
  color: var(--kaiyi-footer-text);
  font-size: 1.35rem;
  font-weight: 500;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links .menu {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  color: var(--kaiyi-footer-summary);
  font-size: 1.125rem;
  line-height: 1.25;
  transition: color .25s ease;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a:hover {
  color: var(--kaiyi-footer-text);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
  content: "" !important;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list {
  display: grid;
  gap: 16px;
  color: var(--kaiyi-footer-summary);
  font-size: 1rem;
  line-height: 1.55;
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list :is(a, p) {
  display: flex;
  gap: 12px;
  margin: 0;
  color: inherit;
  font-size: 1rem;
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list svg {
  flex-shrink: 0;
  position: relative;
  top: 0.15em;
}

.site-footer.kaiyi-footer-section .kaiyi-contact-list a:hover {
  color: var(--kaiyi-footer-text);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: auto;
  padding-top: clamp(20px, 3vh, 40px);
  overflow: hidden;
}

.site-footer.kaiyi-footer-section .marquee-content {
  display: inline-flex;
  animation: kaiyi-footer-marquee 25s linear infinite;
  will-change: transform;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
  margin: 0;
  padding: 10px 40px 20px 0;
  color: var(--kaiyi-footer-text);
  font-size: clamp(5.25rem, 9.7vw, 11.875rem);
  font-weight: 400;
  line-height: 1.1 !important;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-giant-text span {
  margin-inline: 10px;
  color: var(--kaiyi-footer-accent);
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 24px;
  padding: 0 2.5vw;
  border: 0;
  color: var(--kaiyi-footer-summary);
  font-size: .9375rem;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom :is(.kaiyi-footer-bottom-left, .kaiyi-footer-bottom-right, .menu) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom strong {
  margin-right: 4px;
  color: var(--kaiyi-footer-text);
  font-size: 1.375rem;
  font-weight: 700;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-bottom a:hover {
  color: var(--kaiyi-footer-text);
}

@media (max-width: 1200px) {
  .site-footer.kaiyi-footer-section .kaiyi-footer {
    min-height: auto;
    padding: 90px 0 46px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 40px;
    padding: 0 clamp(36px, 5vw, 70px) 0 clamp(90px, 12vw, 130px);
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta {
    grid-column: 1 / -1;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
    font-size: clamp(4.75rem, 10.5vw, 8.125rem);
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .site-footer.kaiyi-footer-section {
    padding: 18px 14px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-layout {
    padding-top: 62px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer {
    min-height: 0;
    padding: 70px 0 30px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-socials {
    flex-direction: row;
    gap: 8px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-social-link {
    width: 46px;
    height: 46px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
    padding: 0 28px 28px 0;
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
    top: auto;
    right: 0;
    bottom: 0;
    padding: 24px 24px 0 24px;
    border-top-left-radius: var(--kaiyi-footer-radius);
    border-bottom-left-radius: 0;
  }

  .site-footer.kaiyi-footer-section :is(.kaiyi-fillet-tr-topleft, .kaiyi-fillet-tr-bottomright) {
    display: none;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-message {
    max-width: 11rem;
    overflow: hidden;
    font-size: .7rem;
    line-height: 1.3;
    text-align: right;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 46px 16px;
    padding: 0 24px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta {
    grid-column: 1 / -1;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta-title {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(2.375rem, 12vw, 3.25rem);
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-cta-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-column-title {
    font-size: 1.45rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-links .menu {
    gap: 16px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-links a {
    font-size: 1.125rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-contact {
    grid-column: 1 / -1;
  }

  .site-footer.kaiyi-footer-section .kaiyi-contact-list {
    font-size: 1.0625rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
    font-size: clamp(3.875rem, 20vw, 6.5625rem);
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 44px;
    padding: 0 24px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-bottom :is(.kaiyi-footer-bottom-left, .kaiyi-footer-bottom-right, .menu) {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-bottom strong {
    font-size: 1.75rem;
  }
}

@media (max-width: 420px) {
  .site-footer.kaiyi-footer-section .kaiyi-socials {
    gap: 6px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-social-link {
    width: 34px;
    height: 34px;
    font-size: .75rem;
  }

  .site-footer.kaiyi-footer-section .kaiyi-footer-giant-text {
    font-size: 18vw;
  }
}

@media (max-width: 767px) {
  .ui-drawer[data-ui-drawer] .menu-item__mega-icon {
    display: none;
  }
}

/* Removed legacy resource mask code */



/* Let the paint complete before the outline takes on the filled state. */
.works-view-toggle button {
  transition: color .3s ease, border-color .01s linear .36s;
}

.works-view-toggle button::before {
  transition: transform .36s cubic-bezier(.2, .75, .2, 1);
}

.works-archive__list.is-view-flipping,
.works-archive__grid.is-view-flipping {
  animation: works-view-flip .38s cubic-bezier(.2, .75, .2, 1);
}

@keyframes works-view-flip {
  from {
    opacity: 0;
    transform: scale(.965);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* The mobile list retains its editorial heading and the same side breathing room. */
@media (max-width: 767px) {
  .works-archive__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 52px;
    padding: 10px 20px;
  }

  .works-archive__head>span:last-child {
    display: none;
  }

  .works-archive__row {
    padding-inline: 20px;
  }

  .works-archive__row>span:last-child {
    display: none;
  }
}


/* --- MOBILE DROPDOWN --- */

/* Scroll lock — applied by JS via html.is-scroll-locked (spec §G) */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden !important;
}

@media (max-width: 1280px) {
  .ui-drawer[data-ui-drawer] {
    display: none !important;
  }

  /* Override line 2338-2339 position: static !important (spec §B) */
  .site-header,
  .site-header.is-middle-sticky {
    position: relative !important;
    z-index: 10000 !important;
  }

  .site-header__middle {
    position: relative;
    z-index: 10001 !important;
  }

  .mobile-nav-dropdown {
    z-index: 10010 !important;
  }

  body.is-mobile-menu-open .site-header,
  body.is-mobile-menu-open .site-header__middle {
    transform: none !important;
  }

  .mobile-nav-dropdown {
    position: fixed;
    top: var(--mobile-menu-top, 70px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10010 !important;
    display: flex;
    width: 100vw;
    height: auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--theme-color-surface-muted);
    color: var(--theme-color-text);
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
  }

  body.is-mobile-menu-open .mobile-nav-dropdown {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0% 0);
    pointer-events: auto;
  }

  .mobile-nav-dropdown[hidden] {
    display: none !important;
  }

  .mobile-nav-dropdown__scroll {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding:
      10px var(--theme-page-padding) calc(1.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Menu list ---- */
  .mobile-nav-dropdown .menu {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- Item reveal via CSS variable (spec §D) ---- */
  .mobile-nav-dropdown .menu>li {
    position: relative;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity .4s ease,
      transform .4s cubic-bezier(.2, .75, .2, 1);
    transition-delay: calc(.1s + var(--mobile-menu-index, 0) * .07s);
  }

  body.is-mobile-menu-open .mobile-nav-dropdown .menu>li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }



  /* ---- First-level menu item structure ---- */
  .mobile-nav-dropdown .menu-item {
    position: relative;
  }

  /* ---- Submenu parent: fixed grid (spec §E) ---- */
  .mobile-nav-dropdown .menu>.menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.75rem;
    align-items: center;
  }

  .mobile-nav-dropdown .menu>.menu-item-has-children>a {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-nav-dropdown .menu>.menu-item-has-children>.ui-submenu-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
  }

  .mobile-nav-dropdown .menu>.menu-item-has-children>.sub-menu {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* ---- Non-parent items: block ---- */
  .mobile-nav-dropdown .menu>li:not(.menu-item-has-children) {
    display: block;
  }

  /* ---- First-level link (spec §F — only first level) ---- */
  .mobile-nav-dropdown .menu>li>a {
    display: inline-flex;
    min-width: 0;
    min-height: 3.75rem;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
  }

  /* ---- Submenu toggle button (spec §E) ---- */
  .mobile-nav-dropdown .ui-submenu-toggle {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .mobile-nav-dropdown .ui-submenu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform .3s cubic-bezier(.2, .75, .2, 1);
  }

  .menu-item-has-children.is-open>.ui-submenu-toggle svg {
    transform: rotate(180deg);
  }

  @keyframes mobile-submenu-reveal {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ---- Submenu list (spec §F — fully left-aligned) ---- */
  .mobile-nav-dropdown .sub-menu {
    display: none;
    width: 100%;
    margin: 0 0 .75rem;
    padding: 0 0 .5rem;
    list-style: none;
  }

  .mobile-nav-dropdown .menu-item-has-children.is-open>.sub-menu {
    display: grid;
    gap: .25rem;
  }

  .mobile-nav-dropdown .sub-menu>li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
  }

  .mobile-nav-dropdown .menu-item-has-children.is-open>.sub-menu>li {
    animation: mobile-submenu-reveal .35s cubic-bezier(.2, .75, .2, 1) forwards;
    animation-delay: calc(.05s + var(--mobile-submenu-index, 0) * .05s);
  }

  .mobile-nav-dropdown .sub-menu>li>a {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: .45rem 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    color: inherit;
  }

  /* ---- CTA buttons: each reveals individually (spec §D) ---- */
  .mobile-nav-dropdown__actions {
    display: grid;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid transparent;
    transition: border-color .4s ease;
  }

  body.is-mobile-menu-open .mobile-nav-dropdown .mobile-nav-dropdown__actions {
    border-top-color: var(--theme-color-border);
    transition-delay: .1s;
  }

  .mobile-nav-dropdown__actions>a {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius-medium);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      background .25s ease,
      color .25s ease,
      border-color .25s ease,
      opacity .4s ease,
      transform .4s cubic-bezier(.2, .75, .2, 1);
    transition-delay: calc(.1s + var(--mobile-action-index, 0) * .08s);
  }

  body.is-mobile-menu-open .mobile-nav-dropdown .mobile-nav-dropdown__actions>a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* ---- Hamburger X animation ---- */
  .menu-icon-line {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .menu-icon-line:nth-child(1) {
    transform-origin: 12px 7px;
  }

  .menu-icon-line:nth-child(3) {
    transform-origin: 12px 17px;
  }

  [data-header-menu].is-active .menu-icon-line:nth-child(1) {
    transform: translateY(5px) rotate(35deg);
  }

  [data-header-menu].is-active .menu-icon-line:nth-child(2) {
    opacity: 0;
  }

  [data-header-menu].is-active .menu-icon-line:nth-child(3) {
    transform: translateY(-5px) rotate(-35deg);
  }
}

/* Desktop owns the third grid column with Member Actions. The generic
   actions cluster remains tablet/mobile-only. */
@media (min-width: 1281px) {
  .site-header {
    z-index: 10000 !important;
  }

  .site-header__middle {
    z-index: 10001 !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-right: var(--theme-page-padding) !important;
  }

  .site-header__actions {
    display: none !important;
  }

  .site-header__middle>.site-header__member-actions {
    position: static !important;
    z-index: 10002 !important;
    display: flex !important;
    grid-column: 3;
    align-items: center;
    justify-content: flex-end;
    gap: var(--theme-space-4);
    white-space: nowrap;
  }

  .site-header__middle>.site-header__member-actions>.site-header__member-theme-toggle {
    position: static !important;
    display: grid !important;
    width: 30px;
    height: 30px;
    z-index: auto !important;
  }

  .site-header__middle>.c-mega-menu {
    z-index: 10010 !important;
  }
}

/* Final desktop header overrides: these follow the global UI button sizing
   rules so the consultation CTA stays compact without changing other CTAs. */
@media (min-width: 1281px) {
  .site-header__desktop-utilities .theme-toggle > .theme-toggle__sun,
  .site-header__desktop-utilities .theme-toggle > .theme-toggle__moon {
    display: block !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  :root[data-theme="dark"] .site-header__desktop-utilities .theme-toggle > .theme-toggle__sun { display: none !important; }
  :root:not([data-theme="dark"]) .site-header__desktop-utilities .theme-toggle > .theme-toggle__moon { display: none !important; }
  .site-header__desktop-utilities .site-header__language > svg,
  .site-header__desktop-utilities [data-header-search] > svg { width: 1.25rem !important; height: 1.25rem !important; }
  .site-header__member-actions .site-header__consult { min-height: 48px; margin-left: 10px; padding: 12px 18px !important; border-radius: var(--theme-radius-extra) !important; }
  .site-header__primary-nav > nav > .menu > .menu-item--insight-mega-menu > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--resource-mega-menu > a::after { width: 1.05em; height: 1.05em; flex: 0 0 1.05em; }
  .site-header__primary-nav > nav > .menu > .menu-item:hover > a .hover-reveal__text > span:first-child,
  .site-header__primary-nav > nav > .menu > .menu-item:focus-within > a .hover-reveal__text > span:first-child { transform: translateY(-110%); }
  .site-header__primary-nav > nav > .menu > .menu-item:hover > a .hover-reveal__text > span:last-child,
  .site-header__primary-nav > nav > .menu > .menu-item:focus-within > a .hover-reveal__text > span:last-child { transform: translateY(0); }
}

/* Desktop header utility and navigation polish. Keep the theme icon visible
   after the generated text label is added by theme-toggle.js, and make the
   navigation reveal follow the same hover target as its active underline. */
@media (min-width: 1281px) {
  .site-header__desktop-utilities .theme-toggle > .theme-toggle__sun,
  .site-header__desktop-utilities .theme-toggle > .theme-toggle__moon {
    display: block !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 1.25rem !important;
  }

  :root[data-theme="dark"] .site-header__desktop-utilities .theme-toggle > .theme-toggle__sun { display: none !important; }
  :root:not([data-theme="dark"]) .site-header__desktop-utilities .theme-toggle > .theme-toggle__moon { display: none !important; }

  .site-header__desktop-utilities .site-header__language > svg,
  .site-header__desktop-utilities [data-header-search] > svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 1.25rem !important;
  }

  .site-header__member-actions .site-header__consult {
    min-height: 48px;
    margin-left: 10px;
    padding: 12px 18px;
    border-radius: var(--theme-radius-extra);
  }

  .site-header__primary-nav > nav > .menu > .menu-item > a {
    min-height: 100%;
  }

  .site-header__primary-nav > nav > .menu > .menu-item:hover > a .hover-reveal__text > span:first-child,
  .site-header__primary-nav > nav > .menu > .menu-item:focus-within > a .hover-reveal__text > span:first-child {
    transform: translateY(-110%);
  }

  .site-header__primary-nav > nav > .menu > .menu-item:hover > a .hover-reveal__text > span:last-child,
  .site-header__primary-nav > nav > .menu > .menu-item:focus-within > a .hover-reveal__text > span:last-child {
    transform: translateY(0);
  }

  .site-header__primary-nav > nav > .menu > .menu-item--insight-mega-menu > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--resource-mega-menu > a::after {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 1.05em;
  }
}

/* ---- Reduced motion (spec §D) ---- */
@media (prefers-reduced-motion: reduce) {

  .mobile-nav-dropdown .menu>li,
  .mobile-nav-dropdown__actions>a {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 1281px) {
  .mobile-nav-dropdown {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Primary navigation insight Mega Menu
   -------------------------------------------------------------------------- */

.site-header__primary-nav {
  position: static;
  min-width: 0;
}

.insight-mega-menu {
  display: none;
}

.menu-item__mega-icon {
  display: inline-grid;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 1.05em;
  place-items: center;
}

.menu-item__mega-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}

@media (min-width: 1025px) {
  .site-header__middle {
    position: relative;
    overflow: visible;
  }

  .site-header__primary-nav {
    display: flex;
    height: 100%;
    align-items: stretch;
    justify-self: end;
    justify-content: flex-end;
  }

  .site-header__primary-nav>nav {
    display: flex;
    height: 100%;
    align-items: stretch;
  }

  .site-header__primary-nav>nav>.menu {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 45px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 22.5px;
    font-weight: 500;
  }

  .site-header__primary-nav>nav>.menu>.menu-item {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
  }

  .site-header__primary-nav>nav>.menu>.menu-item::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: var(--theme-radius-extra);
    background: var(--theme-color-primary);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }

  .site-header__primary-nav>nav>.menu>.menu-item:hover::before,
  .site-header__primary-nav>nav>.menu>.menu-item:focus-within::before,
  .site-header__primary-nav>nav>.menu>.current-menu-item::before,
  .site-header__primary-nav>nav>.menu>.current-menu-ancestor::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-header__primary-nav>nav>.menu>.menu-item--insight-mega-menu>a,
  .site-header__primary-nav>nav>.menu>.menu-item--resource-mega-menu>a {
    gap: .5rem;
  }

  .menu-item__mega-icon {
    display: inline-grid;
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 1.05em;
    place-items: center;
    color: currentColor;
  }

  .menu-item__mega-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .insight-mega-menu {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: calc(-1 * var(--theme-page-padding));
    right: calc(-1 * var(--theme-page-padding));
    grid-column: 1 / -1;
    display: block;
    width: auto;
    padding-top: 0;
    background: var(--theme-color-surface);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
      opacity .2s ease,
      visibility .2s ease,
      transform .28s cubic-bezier(.2, .75, .2, 1);
  }

  .insight-mega-menu__inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    padding-left: var(--theme-page-padding);
    padding-right: var(--theme-page-padding);
    border: 0;
    border-radius: 0;
    background: var(--theme-color-surface);
    z-index: 1;
  }

  .insight-mega-menu__inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--theme-color-surface);
    border-bottom: 1px solid var(--theme-color-border);
    z-index: 0;
  }

  .insight-mega-menu__inner>* {
    position: relative;
    z-index: 1;
  }

  .insight-mega-menu__inner .post-card .post-card__excerpt,
  .insight-mega-menu__inner .post-card .post-card__meta {
    display: none;
  }

  .insight-mega-menu__inner .post-card h2 {
    font-size: 1.15rem;
    line-height: 1.6;
  }

  .insight-mega-menu__inner .post-card {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .35s ease, transform .35s ease;
  }

  .insight-mega-menu__inner .post-card:nth-child(1) {
    transition-delay: 0.05s;
  }

  .insight-mega-menu__inner .post-card:nth-child(2) {
    transition-delay: 0.1s;
  }

  .insight-mega-menu__inner .post-card:nth-child(3) {
    transition-delay: 0.15s;
  }

  .insight-mega-menu__inner .post-card:nth-child(4) {
    transition-delay: 0.2s;
  }

  .site-header__primary-nav:has(.menu-item--insight-mega-menu:hover)~#insight-mega-menu,
  .site-header__primary-nav:has(.menu-item--insight-mega-menu:focus-within)~#insight-mega-menu,
  .site-header__primary-nav:has(#insight-mega-menu:hover)~#insight-mega-menu,
  .site-header__primary-nav:has(#insight-mega-menu:focus-within)~#insight-mega-menu,
  #insight-mega-menu.is-open,
  .site-header__primary-nav:has(.menu-item--resource-mega-menu:hover)~#resource-mega-menu,
  .site-header__primary-nav:has(.menu-item--resource-mega-menu:focus-within)~#resource-mega-menu,
  .site-header__primary-nav:has(#resource-mega-menu:hover)~#resource-mega-menu,
  .site-header__primary-nav:has(#resource-mega-menu:focus-within)~#resource-mega-menu,
  #resource-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-header__primary-nav:has(.menu-item--insight-mega-menu:hover)~#insight-mega-menu .insight-mega-menu__inner .post-card,
  .site-header__primary-nav:has(.menu-item--insight-mega-menu:focus-within)~#insight-mega-menu .insight-mega-menu__inner .post-card,
  #insight-mega-menu:hover .insight-mega-menu__inner .post-card,
  #insight-mega-menu:focus-within .insight-mega-menu__inner .post-card,
  #insight-mega-menu.is-open .insight-mega-menu__inner .post-card,
  .site-header__primary-nav:has(.menu-item--resource-mega-menu:hover)~#resource-mega-menu .insight-mega-menu__inner .post-card,
  .site-header__primary-nav:has(.menu-item--resource-mega-menu:focus-within)~#resource-mega-menu .insight-mega-menu__inner .post-card,
  #resource-mega-menu:hover .insight-mega-menu__inner .post-card,
  #resource-mega-menu:focus-within .insight-mega-menu__inner .post-card,
  #resource-mega-menu.is-open .insight-mega-menu__inner .post-card {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1280px) {
  .site-header__primary-nav {
    display: none !important;
  }

  .insight-mega-menu,
  .ui-drawer .menu-item__mega-icon {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Home Testimonials
   -------------------------------------------------------------------------- */
.home-testimonial {
  padding-block: var(--theme-section-padding);
  overflow: hidden;
}

.home-testimonial__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--theme-page-padding);
}

.home-testimonial__header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: var(--theme-line-height-heading);
  font-weight: 700;
  max-width: 48rem;
  margin: 0;
}

.home-testimonial__header p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--theme-color-summary);
  max-width: 36rem;
  margin: 0;
}

.home-testimonial__marquees {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Add fade to edges using mask-image */
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.home-testimonial__marquee-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
}

.home-testimonial__marquee-track--left {
  animation: marqueeLeft 45s linear infinite;
}

.home-testimonial__marquee-track--right {
  animation: marqueeRight 45s linear infinite;
  transform: translateX(-50%);
}

.home-testimonial__marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Testimonial Cards - Flip Effect */
.testimonial-card {
  width: min(85vw, 26rem);
  perspective: 1000px;
}

.testimonial-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.testimonial-card:hover .testimonial-card__inner {
  transform: rotateY(180deg);
}

.testimonial-card__front,
.testimonial-card__back {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  border-radius: var(--theme-radius-medium);
  gap: 1.5rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.testimonial-card__front {
  background: var(--theme-color-surface-muted);
}

.testimonial-card__back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  transform: rotateY(180deg);
}

.testimonial-card__stars {
  display: flex;
  gap: 0.25rem;
  color: var(--theme-color-primary);
}

.testimonial-card__back .testimonial-card__stars {
  color: var(--theme-color-9);
}

.testimonial-card__stars svg {
  width: 1.25rem;
  height: 1.25rem;
}

.testimonial-card__content {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--theme-color-text);
  flex-grow: 1;
}

.testimonial-card__back .testimonial-card__content {
  color: var(--theme-color-9);
}

.testimonial-card__client {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.testimonial-card__client img,
.testimonial-card__avatar-placeholder {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-card__avatar-placeholder {
  background: var(--theme-color-border);
}

.testimonial-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-card__name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--theme-color-text);
}

.testimonial-card__back .testimonial-card__name {
  color: var(--theme-color-9);
}

.testimonial-card__title {
  font-size: 0.75rem;
  color: var(--theme-color-summary);
}

.testimonial-card__back .testimonial-card__title {
  color: var(--theme-color-9);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonial__marquee-track {
    animation: none;
    transform: none;
  }

  .home-testimonial__marquees {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.testimonial-card__back .testimonial-card__avatar-placeholder {
  background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Home Posts Slider
   -------------------------------------------------------------------------- */
.home-posts-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: clamp(4rem, 8vw, 8rem);
  margin-right: calc(-1 * var(--theme-page-padding));
  overflow: hidden;
}

.home-posts-slider--related {
  padding-top: clamp(4rem, 8vw, 8rem);
}

.home-posts-slider__header h2 {
  font-size: 2rem;
}

.home-posts-slider__desc {
  margin-top: 1rem;
  color: var(--theme-color-text);
  opacity: 0.65;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (min-width: 1025px) {
  .home-posts-slider__header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .home-posts-slider__desc {
    font-size: 1.25rem;
  }

  .home-posts-slider {
    grid-template-columns: 3fr 7fr;
    gap: 2rem;
  }
}

.home-posts-slider__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: var(--theme-page-padding);
}

.home-posts-slider__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.home-posts-slider__header h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: var(--theme-line-height-heading);
  font-weight: 700;
  margin: 0;
}

.home-posts-slider__header p {
  color: var(--theme-color-summary);
  margin: 0;
  max-width: 32rem;
  line-height: 1.6;
}

.home-posts-slider__controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
}

.home-posts-slider__arrows {
  display: flex;
  gap: 0.5rem;
}

.slider-cta-button {
  display: none;
}

.home-posts-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  cursor: pointer;
  transition: all 0.25s ease;
}

.home-posts-slider__btn:disabled,
.home-posts-slider__btn[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
  background: transparent;
  color: var(--theme-color-text-muted);
  border: 1.5px solid var(--theme-color-border);
}

.home-posts-slider__btn:not(:disabled):hover {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.home-posts-slider__btn svg {
  width: 1.75rem;
  height: 1.75rem;
}

.home-posts-slider__right {
  min-width: 0;
}

.home-posts-slider__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-right: var(--theme-page-padding);
  scroll-padding-right: var(--theme-page-padding);
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}

.home-posts-slider__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
  scroll-snap-type: none;
}

.home-posts-slider__track::-webkit-scrollbar {
  display: none;
}

.home-posts-slider__track .post-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc(40% - 0.9rem);
  min-width: 260px;
}

.home-posts-slider__track .resource-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc(40% - 0.9rem);
  min-width: 260px;
}



/* Testimonial Header Adjustments */
.home-testimonial__header h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: var(--theme-line-height-heading);
}

.home-testimonial__header .ui-badge {
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
}

.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

@media (max-width: 1024px) {
  .home-posts-slider__track .post-card {
    flex: 0 0 calc(100vw - var(--theme-page-padding) * 2);
  }

  .home-posts-slider__track .resource-card {
    flex: 0 0 calc(100vw - var(--theme-page-padding) * 2);
  }

  .home-posts-slider__controls {
    justify-content: space-between;
    align-items: center;
  }

  .slider-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 3.5rem;
    padding: 0 1.5rem 0 2rem;
    border-radius: 999px;
    background: var(--theme-color-primary);
    color: var(--theme-color-9) !important;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1;
    transition: transform .3s ease, background-color .3s ease;
  }

  .slider-cta-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
  }

  /* Show card masks on mobile where there is no hover */
  .post-card__author-mask {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }


}

/* =========================================================
   Unified sticky sidebars
   Contact / Single resource / Single article
   ========================================================= */

:root {
  --wp-admin-bar-height: 0px;
  --site-header-anchor-offset: 30px;
}

@media (min-width: 768px) {

  .single-layout,
  .contact-layout,
  .single-resource__layout {
    align-items: start;
    overflow: visible !important;
  }

  .single-sidebar,
  .contact-layout__intro,
  .single-resource__intro {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--wp-admin-bar-height, 0px) + var(--site-header-anchor-offset, 30px)) !important;
    align-self: start !important;
    height: fit-content;
    min-height: 0;
    overflow: visible;
    transform: none !important;
  }

  /* Sticky 只能由左欄 wrapper 負責，禁止巢狀 Sticky。 */
  .single-sidebar>.article-toc {
    position: static !important;
    top: auto !important;
    inset-block-start: auto !important;
    transform: none !important;
  }

  /* Native hash navigation 與 JS TOC 使用同一組 offset。 */
  html {
    scroll-padding-top: calc(var(--wp-admin-bar-height, 0px) + var(--site-header-anchor-offset, 30px));
  }

  .single-content__body :is(h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: calc(var(--wp-admin-bar-height, 0px) + var(--site-header-anchor-offset, 30px));
  }
}

@media (max-width: 767px) {

  .single-sidebar,
  .contact-layout__intro,
  .single-resource__intro {
    position: static !important;
    top: auto !important;
    max-height: none;
    overflow: visible;
    transform: none !important;
  }
}


/* =========================================================
   Semantic surface layer repair
   surface       = page / elevated UI
   surface-muted = secondary / soft UI
   ========================================================= */

/* Page canvas. */
html,
body {
  background: var(--theme-color-surface);
}

/* Primary structural surfaces. */
.site-header__middle,
.mobile-nav-dropdown,
.ui-dialog,
.ui-sheet,
.ui-drawer,
.ui-toast,
.ui-share-drawer,
.resource-preview-dialog,
.resource-preview-drawer {
  background: var(--theme-color-surface);
}

/* Controls rendered on the page or inside a muted panel. */
input,
textarea,
select,
.post-action,
.about-button--secondary,
.ui-drawer__button--secondary,
.not-found__search,
.resource-filters button,
.resource-filter-search,
.insight-filter-search,
.insight-category-cloud a,
.insight-category-cloud button,
.works-view-toggle,
.works-view-toggle button,
.ui-share-networks :is(a, button) {
  background: var(--theme-color-surface);
}

/* Contact and newsletter panels remain muted, their fields must be elevated. */
.empty-card,
.comment-card__bubble,
.comment-respond,
.article-toc--mobile,
.site-footer__panel {
  background: var(--theme-color-surface-muted);
}

.contact-layout__form :is(input:not([type="submit"]),
  textarea,
  select),
.kaiyi-newsletter-form :is(input:not([type="submit"]),
  textarea,
  select),
.contact-layout__form input[type="checkbox"] {
  background: var(--theme-color-surface);
}

/* A muted card needs a contrasting icon surface. */
.empty-card__icon,
.contact-layout__icon,
.ui-icon-button {
  background: var(--theme-color-surface);
}

/* Soft tags and placeholder surfaces. */
.resource-badge,
.resource-card__image,
.post-card__image,
.home-hero__media,
.home-sticky-steps__visual-placeholder,
.single-resource__image,
.resource-preview__image,
.work-card__image,
.single-content__body th {
  background: var(--theme-color-surface-muted);
}

/* Optional badges may sit on either surface; border prevents them disappearing. */
.kaiyi-newsletter-form .optional-badge,
.contact-layout__form .optional-badge {
  border: 1px solid var(--theme-color-border);
  background: var(--theme-color-surface-muted);
}

/* SVG/card cutouts must match the actual page canvas, not the badge colour. */
.resource-card__mask,
.post-card__author-mask {
  background: var(--theme-color-surface);
}

.resource-card__mask-curve,
.post-card__author-curve {
  color: var(--theme-color-surface);
}

/* Footer: white/dark outer canvas with a muted inner panel. */
.site-footer {
  background: var(--theme-color-surface);
}

.site-footer__panel,
.site-footer__social-rail {
  background: var(--theme-color-surface-muted);
}

.resource-card__image:not(:has(img)),
.post-card__image:not(:has(img)),
.work-card__image:not(:has(img)) {
  box-shadow: none;
}

.post-card__image:not(:has(img))::after {
  display: none;
}

.resource-card:not(:has(img)),
.post-card:not(:has(img)),
.work-card:not(:has(img)) {
  box-shadow: none;
}

.site-footer__back {
  background: var(--theme-color-surface);
}

/* Shape footer depends on the previously missing background token. */
.kaiyi-footer-section,
.site-footer.kaiyi-footer-section,
.kaiyi-cutout-top-left,
.kaiyi-cutout-top-right,
.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left,
.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  background: var(--theme-color-surface);
}

/* Resource Badges */
.resource-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 1;
}

.resource-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: .52rem 1rem;
  border-radius: var(--theme-radius-extra);
  background-color: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
  line-height: 1.2;
  opacity: 1;
}

/* Mega Menu Card Typography Overrides */
.insight-mega-menu__inner .post-card__content h2,
.insight-mega-menu__inner .resource-card__content strong,
.insight-mega-menu__inner .work-card__content h2 {
  font-size: 24px !important;
  line-height: 36px !important;
}

/* Post Card Top-Right Mask & Tags */
.post-card__mask--top-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--theme-color-surface);
  padding-left: 10px;
  padding-bottom: 10px;
  border-bottom-left-radius: var(--theme-radius-medium);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2, .75, .2, 1);
}

.post-card__mask-curve {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--theme-color-surface);
  fill: currentColor;
  pointer-events: none;
}

.post-card__mask-curve--left {
  top: 0;
  left: 1px;
  transform: translateX(-100%);
}

.post-card__mask-curve--bottom {
  bottom: 1px;
  right: 0;
  transform: translateY(100%);
}

.post-card__tags {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.post-card__tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  padding: 0 0.8rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
  white-space: nowrap;
}

.post-card__tag-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  color: var(--theme-color-summary);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 500;
}

/* RWD Tag Logic */
/* Mobile (default): show 1st tag and +N for mobile */
.post-card__tag-badge--tablet-up,
.post-card__tag-badge--desktop-only,
.post-card__tag-badge--tablet-only,
.post-card__tag-badge--desktop-up {
  display: none !important;
}

@media (min-width: 768px) {

  /* Tablet: show 2 tags and +N for tablet */
  .post-card__tag-badge--tablet-up {
    display: inline-flex !important;
  }

  .post-card__tag-badge--mobile-only {
    display: none !important;
  }

  .post-card__tag-badge--tablet-only {
    display: inline-flex !important;
  }
}

@media (min-width: 1025px) {

  /* Desktop: show 3 tags and +N for desktop */
  .post-card__tag-badge--desktop-only {
    display: inline-flex !important;
  }

  .post-card__tag-badge--tablet-only {
    display: none !important;
  }

  .post-card__tag-badge--desktop-up {
    display: inline-flex !important;
  }

  /* Desktop badge size slightly larger */
  .post-card__tag-badge {
    height: 2.4rem;
    padding: 0 1rem;
    font-size: 15px;
  }

  .post-card__tag-plus {
    height: 2.4rem;
    font-size: 15px;
  }
}

/* Override Filter Lists to wrap instead of horizontal scroll */
.insight-category-cloud {
  flex-wrap: wrap !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.resource-filter-list>button,
.insight-category-cloud> :is(a, button) {
  flex: 0 0 auto !important;
}

@media (min-width: 1025px) {

  /* The working desktop toggle lives in desktop utilities; hide the retired
     absolute duplicate so it cannot overlap the primary navigation. */
  .site-header__member-theme-toggle {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Component-based desktop mega menus
   -------------------------------------------------------------------------- */
.site-header__middle>.c-mega-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  max-height: var(--mega-menu-available-height, calc(100dvh - 100px));
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--theme-color-border);
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, visibility .18s ease, transform .24s ease;
}

.site-header__middle>.c-mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.c-mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--theme-space-5);
  padding: var(--theme-space-6) var(--theme-page-padding) var(--theme-space-8);
  background: var(--theme-color-surface);
}

.c-mega-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--theme-space-4);
}

.c-mega-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--theme-radius-md);
  background: var(--theme-color-surface-muted);
}

.c-mega-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .32s ease;
}

.c-mega-card:hover .c-mega-card__media img {
  transform: scale(1.025);
}

.c-mega-card__media .c-badge {
  position: absolute;
  top: var(--theme-space-3);
  right: var(--theme-space-3);
}

.c-mega-card__content {
  display: grid;
  gap: var(--theme-space-2);
}

.c-mega-card__meta {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  line-height: var(--theme-line-height-ui);
}

.c-mega-card__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  line-height: 1.5;
}

.c-mega-card__title a {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.c-badge {
  display: inline-flex;
  min-height: 1.875rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--theme-space-3);
  border-radius: var(--theme-radius-pill);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
  font-size: var(--theme-font-size-label);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.c-mega-card--cta {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--theme-space-6);
  border-radius: var(--theme-radius-md);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  text-decoration: none;
}

.c-mega-card__cta-label {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.3;
}

.c-icon-button {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--theme-radius-round);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
}

.c-icon-button svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Desktop mega menus reuse the archive card composition. Keep the post
   version compact like the archive's mobile card: image, category badge and
   title only; the reading-time row is intentionally not part of this menu. */
.c-mega-card--post {
  gap: var(--theme-space-4);
}

.c-mega-card--post .post-card__media,
.c-mega-card--resource .resource-card__image {
  min-width: 0;
}

.c-mega-card--post .post-card__image,
.c-mega-card--resource .resource-card__image {
  aspect-ratio: 16 / 9;
}

.c-mega-card--post .post-card__author-mask {
  /* Desktop mega cards intentionally match the mobile archive card, where
     the lower-left mask is visible without a hover interaction. */
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.c-mega-card--post .c-mega-card__title,
.c-mega-card--resource .c-mega-card__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  line-height: 1.45;
}

.c-mega-card--resource .c-mega-card__meta {
  color: var(--theme-color-text-muted);
}

.c-mega-card--cta {
  position: relative;
  overflow: hidden;
}

/* The CTA arrow is a persistent lower-left mask, rather than a second
   floating button. This keeps the same visual language as the archive cards. */
.c-mega-card__cta-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  width: 5rem;
  height: 5rem;
  padding: 0;
  place-items: center;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
}

.c-mega-card__cta-mask svg {
  width: 2rem;
  height: 2rem;
}

.c-mega-card--cta:hover .c-mega-card__cta-mask,
.c-mega-card--cta:focus-visible .c-mega-card__cta-mask {
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
}

@media (min-width: 1025px) {
  /* Defensive rule for older cached markup that still contains the old row. */
  .c-mega-card--post .post-card__reading-time {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  .site-header__middle>.c-mega-menu {
    display: none !important;
  }
}

@media (min-width: 1281px) {
  .site-header {
    z-index: 10000 !important;
  }

  .site-header__middle {
    z-index: 10001 !important;
  }

  .site-header__actions {
    display: none !important;
  }

  .site-header__middle>.site-header__member-actions {
    position: static !important;
    display: flex !important;
    z-index: 10002 !important;
    grid-column: 3;
    align-items: center;
    justify-content: flex-end;
    gap: var(--theme-space-4);
    white-space: nowrap;
  }

  .site-header__middle>.site-header__member-actions>.site-header__member-theme-toggle {
    position: static !important;
    display: grid !important;
    width: 30px;
    height: 30px;
    z-index: auto !important;
  }

  .site-header__middle>.c-mega-menu {
    z-index: 10010 !important;
  }
}

@media (min-width: 1281px) {
  .site-header__middle {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .site-header__actions {
    display: flex !important;
    align-items: center;
    justify-self: end;
    gap: var(--theme-space-4);
  }

  .site-header__actions>[data-header-search],
  .site-header__actions>a[aria-label="Cart"],
  .site-header__actions>[data-header-menu] {
    display: none !important;
  }

  .site-header__actions>.site-header__member-theme-toggle {
    position: static !important;
    display: grid !important;
    width: 30px;
    height: 30px;
    z-index: auto !important;
  }

  .site-header__actions>.site-header__member-actions {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: var(--theme-space-4);
    z-index: auto !important;
  }
}

@media (max-width: 1280px) {
  .site-header__middle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__primary-nav,
  .site-header__actions>.site-header__member-actions,
  .site-header__middle>.c-mega-menu {
    display: none !important;
  }

  .site-header__actions {
    display: flex !important;
    align-items: center;
    justify-self: end;
    gap: var(--theme-space-4);
  }

  .site-header__actions>[data-header-search],
  .site-header__actions>a[aria-label="Cart"] {
    display: grid !important;
  }

  .site-header__actions>[data-header-menu] {
    display: grid !important;
  }

  .site-header__actions>.site-header__member-theme-toggle {
    display: grid !important;
    position: static !important;
    width: 30px;
    height: 30px;
  }
}

/* Final header row contract: announcements and primary navigation are two
   independent rows.  Keep this at the end so legacy component overrides
   cannot collapse the rows or move member controls into mobile actions. */
.site-header {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  overflow: visible !important;
}

.site-header__top {
  position: relative !important;
  z-index: 10001 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--theme-header-top-height, 55px) !important;
  height: var(--theme-header-top-height, 55px) !important;
  margin: 0 !important;
  padding-inline: var(--theme-page-padding) !important;
}

.site-header__top-nav {
  display: none !important;
}

.site-header__announcements {
  min-width: 0 !important;
  height: 100% !important;
  align-items: center !important;
}

.header-marquee {
  min-height: 0 !important;
  height: 100% !important;
  padding-block: 0 !important;
  overflow: hidden !important;
}

.site-header__desktop-utilities {
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.site-header__middle {
  position: relative !important;
  z-index: 10002 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--site-header-flow-height, 100px) !important;
  height: var(--site-header-flow-height, 100px) !important;
  margin: 0 !important;
  padding-inline: var(--theme-page-padding) !important;
}

.site-header__middle.is-sticky {
  position: fixed !important;
  top: var(--wp-admin-bar-height, 0px) !important;
  z-index: 10002 !important;
  min-height: var(--site-header-sticky-height, 85px) !important;
  height: var(--site-header-sticky-height, 85px) !important;
}

.site-header__middle>.site-header__member-actions {
  position: static !important;
  grid-column: 3 !important;
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--theme-space-4) !important;
  white-space: nowrap !important;
  z-index: 10003 !important;
}

.site-header__middle>.site-header__member-theme-toggle {
  position: static !important;
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 10003 !important;
}

.site-header__middle>.c-mega-menu {
  z-index: 10010 !important;
}

@media (min-width: 1281px) {
  .site-header__actions {
    display: none !important;
  }

  .site-header__middle>.site-header__member-actions {
    display: flex !important;
  }
}

@media (max-width: 1280px) {
  .site-header__middle {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .site-header__primary-nav,
  .site-header__middle>.site-header__member-actions,
  .site-header__middle>.c-mega-menu {
    display: none !important;
  }

  .site-header__actions {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .site-header__top {
    min-height: 55px !important;
    height: 55px !important;
  }

  .site-header__middle {
    min-height: 70px !important;
    height: 70px !important;
  }

  .site-header__middle.is-sticky {
    min-height: 70px !important;
    height: 70px !important;
  }
}

/* Mobile and tablet headers use the compact actions row, never desktop utilities. */
@media (max-width: 1024px) {
  .site-header__desktop-utilities {
    display: none !important;
  }
}.resource-card-grid.is-loading {
  opacity: 1;
  pointer-events: none;
}
.resource-skeleton,
.post-skeleton {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
}
.resource-skeleton__image,
.post-skeleton__image {
  aspect-ratio: 16 / 9;
  border-radius: var(--theme-radius-large, 12px);
  background: var(--theme-color-surface-muted);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.resource-skeleton__content,
.post-skeleton__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resource-skeleton__badge,
.post-skeleton__meta {
  height: 1.25rem;
  width: 70px;
  border-radius: var(--theme-radius-small, 4px);
  background: var(--theme-color-surface-muted);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.resource-skeleton__title,
.post-skeleton__title {
  height: 1.5rem;
  width: 80%;
  border-radius: var(--theme-radius-small, 4px);
  background: var(--theme-color-surface-muted);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* --- AI Assistant --- */
.article-ai-assistant {
  margin-top: 40px;
  padding: 24px;
  background: var(--theme-color-surface-muted, #f5f5f5);
  border-radius: var(--theme-radius-large, 12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-ai-assistant__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-color-text, #1a1a1a);
}

.article-ai-assistant > p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--theme-color-text-muted, #666);
  line-height: 1.6;
}

.article-ai-assistant__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 8px;
}

.article-ai-assistant__actions > .ui-button {
  min-width: 0;
  flex: 1 1 0;
  justify-content: center;
  white-space: nowrap;
}

.article-ai-assistant__actions > .ui-button svg {
  flex: 0 0 auto;
}

.single-content .article-toc a:not(.is-active) {
  color: color-mix(in srgb, var(--theme-color-text) 20%, transparent);
}
.single-content .article-toc a.is-active { color: var(--theme-color-text); }

.byline-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.byline-wrapper__avatar,
.byline-wrapper__avatar img { width: 36px; height: 36px; border-radius: 50%; }
.byline-wrapper__avatar { flex: 0 0 36px; overflow: hidden; }
.byline-wrapper__avatar img { display: block; object-fit: cover; }
.byline-wrapper__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.byline-wrapper__author { color: var(--theme-color-text); font-size: var(--theme-font-size-post-meta); font-weight: 600; text-decoration: none; }
.byline-wrapper__details { display: flex; align-items: center; gap: 4px; color: var(--theme-color-text-muted); font-size: .75rem; font-weight: 500; }




@media (max-width: 767px) {
  .article-ai-assistant__actions { flex-wrap: wrap; }
  .article-ai-assistant__actions > .ui-button { flex-basis: calc(50% - 6px); }
}

/* Fix for mobile post-action stretching */
@media (max-width: 767px) {
  .post-actions .post-action {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}



/* ==========================================================================
   Brand Identity Page
   ========================================================================== */

.kaiyichen-brand-main {
  padding-inline: 0 !important;
  padding-block: 0 !important;
  overflow-x: hidden;
}

.kaiyichen-brand-page {
  background: var(--theme-color-background);
  color: var(--theme-color-text);
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
}

/* --- Hero --- */
.kaiyichen-brand-hero {
  position: relative;
  padding-top: clamp(7rem, 10vw, 10rem);
  padding-bottom: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--theme-page-padding);
}

.kaiyichen-brand-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 31px, var(--theme-color-border) 31px, var(--theme-color-border) 32px);
  background-size: 100% 32px;
  pointer-events: none;
}

.kaiyichen-brand-hero__gradient {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8rem;
  background: linear-gradient(to top, var(--theme-color-background), color-mix(in srgb, var(--theme-color-background) 80%, transparent), transparent);
  pointer-events: none;
  z-index: 1;
}

.kaiyichen-brand-hero__inner {
  position: relative;
  z-index: 10;
  text-align: center;
}

.kaiyichen-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--theme-color-primary);
  margin-bottom: 2rem;
}

.kaiyichen-brand-badge__ping-wrapper {
  position: relative;
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
}

.kaiyichen-brand-badge__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--theme-color-on-primary);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.kaiyichen-brand-badge__dot {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--theme-color-on-primary);
}

.kaiyichen-brand-title {
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

.kaiyichen-brand-title__highlight {
  position: relative;
  display: inline-block;
  padding-inline: 0.5rem;
  z-index: 0;
}

.kaiyichen-brand-title__highlight-bar {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  height: 35%;
  width: 0;
  background: var(--theme-color-primary);
  z-index: -1;
  animation: highlight 0.8s ease-out 1s forwards;
}

.kaiyichen-brand-desc {
  font-size: 1.25rem;
  color: var(--theme-color-text-muted);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.75;
}

.kaiyichen-brand-scroll-down {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.kaiyichen-brand-scroll-down__track {
  width: 3px;
  height: 5rem;
  background: color-mix(in srgb, var(--theme-color-border) 30%, transparent);
  position: relative;
  overflow: hidden;
}

.kaiyichen-brand-scroll-down__indicator {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--theme-color-primary));
  animation: scroll-down 1.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* --- Marquees --- */
.kaiyichen-brand-marquees {
  position: relative;
  width: 100%;
  height: 14rem;
  overflow: hidden;
  margin-top: -3rem;
  z-index: 40;
}

@media (max-width: 767px) {
  .kaiyichen-brand-marquees {
    margin-top: -1.5rem;
    height: 12rem;
  }
}

.kaiyichen-brand-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%) scale(1.1);
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  overflow: hidden;
}

.kaiyichen-brand-marquee--left {
  transform: translateY(-50%) rotate(-4deg) scale(1.1);
}

.kaiyichen-brand-marquee--right {
  transform: translateY(-50%) rotate(4deg) scale(1.1);
}

@media (max-width: 767px) {
  .kaiyichen-brand-marquee--left {
    transform: translateY(-50%) rotate(-10deg) scale(1.1);
  }
  .kaiyichen-brand-marquee--right {
    transform: translateY(-50%) rotate(10deg) scale(1.1);
  }
}

.kaiyichen-brand-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
}

.kaiyichen-brand-marquee__track--reverse {
  animation: scroll-right 20s linear infinite;
}

.kaiyichen-brand-marquee__content {
  display: flex;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.kaiyichen-brand-marquee__content span {
  margin-inline: 0.25rem;
}

/* --- Sections --- */
.kaiyichen-brand-section {
  padding-block: 4rem;
  padding-inline: var(--theme-page-padding);
  max-width: 1200px;
  margin: 0 auto;
}

.kaiyichen-brand-layout {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: 6rem;
}

@media (max-width: 1024px) {
  .kaiyichen-brand-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.kaiyichen-brand-sidebar {
  width: 100%;
}

@media (min-width: 1025px) {
  .kaiyichen-brand-sidebar {
    position: sticky;
    top: 10rem;
  }
}

.kaiyichen-brand-label {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--theme-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.kaiyichen-brand-section-title {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.kaiyichen-brand-section-desc {
  font-size: 1.125rem;
  color: var(--theme-color-text-muted);
  line-height: 1.75;
}

.kaiyichen-brand-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* --- Cards (Theme) --- */
.kaiyichen-brand-card__header {
  margin-bottom: 1.5rem;
}

.kaiyichen-brand-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.kaiyichen-brand-card__desc {
  font-size: 0.875rem;
  color: var(--theme-color-text-muted);
}

/* --- Grid Systems --- */
.kaiyichen-brand-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.kaiyichen-brand-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .kaiyichen-brand-grid-2,
  .kaiyichen-brand-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- Logo Display --- */
.kaiyichen-brand-logo-display {
  position: relative;
  background: var(--theme-color-background);
  padding: 1.5rem;
  border-radius: var(--theme-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  overflow: hidden;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--theme-color-border) 15%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--theme-color-border) 15%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

.kaiyichen-brand-logo-display--sm {
  min-height: 10rem;
  padding: 3rem;
  background-size: 16px 16px;
}

.kaiyichen-brand-logo-display__inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kaiyichen-brand-avatar {
  border-radius: var(--theme-radius-md);
  flex-shrink: 0;
}

.kaiyichen-brand-avatar--lg {
  width: clamp(2.5rem, 8vw, 8rem);
  height: clamp(2.5rem, 8vw, 8rem);
}

.kaiyichen-brand-logo-text {
  font-weight: 700;
  color: var(--theme-color-text);
  line-height: 1;
  white-space: nowrap;
}

.kaiyichen-brand-logo-text--lg {
  font-size: clamp(1.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
}

.kaiyichen-brand-logo-text--left {
  font-size: 1.25rem;
  text-align: left;
}

.kaiyichen-brand-logo-text--right {
  font-size: 1.25rem;
  text-align: right;
}

/* --- Colors --- */
.kaiyichen-brand-color-card {
  padding: 1.5rem;
  background: var(--theme-color-surface);
  border-radius: var(--theme-radius-lg);
  border: 1px solid var(--theme-color-border);
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.kaiyichen-brand-color-card:hover {
  transform: translateY(-8px);
  background: color-mix(in srgb, var(--theme-color-surface-muted) 50%, transparent);
}

.kaiyichen-brand-color-swatch {
  width: 5rem;
  height: 5rem;
  border-radius: var(--theme-radius-md);
  border: 2px solid var(--theme-color-border);
  flex-shrink: 0;
}

.kaiyichen-brand-color-info {
  flex: 1;
  min-width: 0;
}

.kaiyichen-brand-color-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.kaiyichen-brand-color-info code {
  font-size: 0.875rem;
  font-family: monospace;
  background: var(--theme-color-surface-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.kaiyichen-brand-color-info p {
  font-size: 0.875rem;
  color: var(--theme-color-text-muted);
}

/* --- Typography --- */
.kaiyichen-brand-type-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kaiyichen-brand-type-item {
  padding: 1.5rem;
  background: var(--theme-color-surface);
  border-radius: var(--theme-radius-lg);
  border: 1px solid var(--theme-color-border);
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kaiyichen-brand-type-item:hover {
  transform: translateY(-8px);
  background: color-mix(in srgb, var(--theme-color-surface-muted) 50%, transparent);
}

@media (min-width: 768px) {
  .kaiyichen-brand-type-item {
    flex-direction: row;
    align-items: center;
  }
}

.kaiyichen-brand-type-meta {
  width: 33.333%;
  flex-shrink: 0;
}

.kaiyichen-brand-type-meta h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.kaiyichen-brand-type-meta p {
  font-size: 0.875rem;
  color: var(--theme-color-text-muted);
}

.kaiyichen-brand-type-preview {
  color: var(--theme-color-text);
  line-height: 1.1;
  word-break: break-word;
}

.kaiyichen-brand-type-family {
  margin-top: 3rem;
}

.kaiyichen-brand-type-family__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.kaiyichen-brand-type-marquee-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  border: 1px solid var(--theme-color-border);
  padding-block: 1rem;
}

.kaiyichen-brand-type-marquee-container::before,
.kaiyichen-brand-type-marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6rem;
  z-index: 10;
  pointer-events: none;
}

.kaiyichen-brand-type-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--theme-color-background), transparent);
}

.kaiyichen-brand-type-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--theme-color-background), transparent);
}

.kaiyichen-brand-type-marquee {
  display: flex;
  overflow: hidden;
  gap: 1rem;
  padding: 0.5rem;
}

.kaiyichen-brand-type-marquee__track {
  display: flex;
  gap: 1rem;
  animation: marquee var(--duration) linear infinite;
}

.kaiyichen-brand-type-marquee__track--reverse {
  animation-direction: reverse;
}

.kaiyichen-brand-type-marquee__track:hover {
  animation-play-state: paused;
}

.kaiyichen-brand-type-marquee__content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
}

.kaiyichen-brand-type-marquee__content span {
  margin-inline: 1rem;
  white-space: nowrap;
}

.muted-italic {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  font-style: italic;
  color: color-mix(in srgb, var(--theme-color-text-muted) 60%, transparent);
}

.primary-bold {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 700;
  color: var(--theme-color-text);
}


/* --- Components Showcase --- */
.kaiyichen-brand-components {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.kaiyichen-brand-components__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kaiyichen-brand-components__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}


/* --- UI Card System (6 variants) --- */
.ui-card {
  padding: 2rem;
  border-radius: var(--theme-radius-heavy);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: var(--theme-color-text);
}

.ui-card--default {
  background: var(--theme-color-surface);
  border: 1px solid var(--theme-color-border);
}

.ui-card--muted {
  background: var(--theme-color-surface-muted);
  border: 1px solid var(--theme-color-border);
}

.ui-card--outline {
  background: transparent;
  border: 1px solid var(--theme-color-border);
}

.ui-card--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  border: none;
}

.ui-card--secondary {
  background: var(--theme-color-secondary);
  color: var(--theme-color-on-secondary);
  border: none;
}

.ui-card--interactive {
  background: var(--theme-color-surface);
  border: 1px solid var(--theme-color-border);
  cursor: pointer;
}

.ui-card--interactive:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--theme-color-text) 10%, transparent);
}

/* --- UI Badge System (5 variants) --- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-3);
  padding: 0.25rem 0.75rem;
  border-radius: var(--theme-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.ui-badge--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  border: none;
}

.ui-badge--secondary {
  background: var(--theme-color-secondary);
  color: var(--theme-color-on-secondary);
  border: none;
}

.ui-badge--muted {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  border: none;
}

.ui-badge--danger {
  background: var(--theme-color-danger);
  color: var(--theme-color-on-secondary);
  border: none;
}

.ui-badge--outline {
  background: transparent;
  color: var(--theme-color-text);
  border: 1px solid var(--theme-color-border);
}


/* --- UI Button System (6 variants) --- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-3);
  padding: 0.625rem 1.25rem;
  border-radius: var(--theme-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1.5;
}

/*
 * One hover rule for the whole system rather than one per variant: primary
 * hands over to secondary, everything else arrives at primary. The border
 * travels with the fill, so an outlined button never keeps a grey edge around
 * a primary face.
 *
 * Written on the base class so a variant added later inherits the behaviour
 * instead of quietly keeping the old fade.
 */
.ui-button:hover:not(:disabled) {
  background: var(--theme-color-primary);
  border-color: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
}

.ui-button--primary:hover:not(:disabled) {
  background: var(--theme-color-secondary);
  border-color: var(--theme-color-secondary);
  color: var(--theme-color-on-secondary);
}

/*
 * Two variants stay out of it. A destructive button that turns brand-coloured
 * under the cursor drops its warning at the exact moment the warning is needed,
 * and a borderless text button has no face to fill -- it takes the colour on
 * its text instead.
 */
.ui-button--danger:hover:not(:disabled) {
  background: var(--theme-color-danger);
  border-color: var(--theme-color-danger);
  color: var(--theme-color-on-secondary);
  opacity: 0.88;
}

.ui-button--return:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--theme-color-primary);
}

.ui-button:active:not(:disabled) {
  transform: scale(0.96);
}

.ui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-button--primary {
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  border: none;
}

.ui-button--secondary {
  background: var(--theme-color-secondary);
  color: var(--theme-color-on-secondary);
  border: none;
}

.ui-button--muted {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  border: none;
}

.ui-button--danger {
  background: var(--theme-color-danger);
  color: var(--theme-color-on-secondary);
  border: none;
}

.ui-button--outline {
  background: transparent;
  color: var(--theme-color-text);
  border: 1px solid var(--theme-color-border);
}

.ui-button--return {
  padding: 0;
  background: transparent;
  color: var(--theme-color-text-muted);
  border: none;
}


/* --- Animations --- */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes scroll-down {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

@keyframes highlight {
  to { width: 100%; }
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 1rem)); }
}

/* Header and UI button fixes */
.site-header__member-actions {
  gap: var(--theme-space-6) !important;
}

.site-header__account {
  font-weight: 500 !important;
}

.site-header__middle.is-sticky .logo-normal { display: none; }
.site-header__middle:not(.is-sticky) .logo-sticky { display: none; }

button, .button, .btn, .ui-button, .member-button, .auth-line-button, .post-action {
  font-weight: 600 !important;
}


/* ==========================================================================
   UI Button Size Variations & Hover Reveal Fix
   ========================================================================== */
.ui-button {
  padding: 20px;
  text-decoration: none !important;
  font-size: 17px;
  border-radius: var(--theme-radius-medium);
}

.ui-button--s {
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-radius: var(--theme-radius-sm);
}

.ui-button--m {
  padding: 0.75rem 1.25rem;
  font-size: 17px;
  border-radius: var(--theme-radius-medium);
}

.ui-button--l {
  padding: 1rem 1.5rem;
  font-size: 20px;
  border-radius: var(--theme-radius-lg);
}

.ui-button--xl {
  padding: 1.25rem 2rem;
  font-size: 24px;
  border-radius: var(--theme-radius-heavy);
}

/* Make sure return button overrides padding */
.ui-button--return {
  padding: 0 !important;
  background: transparent;
}

/* Hover reveal layout inheritance for flex items */
.ui-button .hover-reveal__text,
.ui-badge .hover-reveal__text {
  gap: inherit;
  width: 100%;
}

.ui-button .hover-reveal__text > span,
.ui-badge .hover-reveal__text > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  width: 100%;
}


/* ==========================================================================
   AI Assistant Typography & Button Fixes
   ========================================================================== */
.article-ai-assistant__header {
  font-size: 1.5rem !important;
}

.article-ai-assistant > p {
  font-size: 1.125rem !important;
}

/* Remove hover reveal animation on mobile/tablet (only allow on desktop/hover devices) */
@media (hover: none), (pointer: coarse) {
  .has-hover-reveal:hover .hover-reveal__text>span:first-child,
  .has-hover-reveal:focus-visible .hover-reveal__text>span:first-child {
    transform: translateY(0) !important;
  }
  .has-hover-reveal:hover .hover-reveal__text>span:last-child,
  .has-hover-reveal:focus-visible .hover-reveal__text>span:last-child {
    transform: translateY(110%) !important;
  }
}

/* Underline Motion Updates */


/*
 * The fill is now what the hover state changes, so it has to be allowed to
 * move. This rule used to strip background from the transition list -- with
 * the unified hover above that left the colour swapping instantly while the
 * text faded, which read as a glitch rather than a state change.
 */
.ui-button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
}

/* Map Form Submit Buttons to Primary UI Button */
input[type="submit"],
button[type="submit"]:not(.ui-button):not(.member-button):not(.search-submit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-3);
  padding: 0.75rem 1.25rem;
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1.5;
}

input[type="submit"]:hover:not(:disabled),
button[type="submit"]:not(.ui-button):not(.member-button):not(.search-submit):hover:not(:disabled) {
  opacity: 0.85;
}

input[type="submit"]:active:not(:disabled),
button[type="submit"]:not(.ui-button):not(.member-button):not(.search-submit):active:not(:disabled) {
  transform: scale(0.96);
}
/* Member-only content and AI Reader feedback */
.access-denied { padding: clamp(2rem, 5vw, 4rem); background: var(--theme-color-surface-muted); color: var(--theme-color-text); border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-heavy, 1.5rem); }
.access-denied h2 { margin: 1rem 0 .75rem; }
.access-denied__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ai-reader-toast { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--theme-color-border); border-radius: .75rem; }
.access-denied--page { max-width: 760px; margin: clamp(4rem, 12vw, 10rem) auto; }
.access-denied--page h1 { margin: 1rem 0 .75rem; }
.article-ai-assistant .ui-button svg { flex: 0 0 auto; }
.home-posts-slider__track .resource-card .resource-card__content { min-width: 0; }

/* Final visual tuning for the AI reader and resource title rows. */
.article-ai-assistant { padding: 36px; }
.article-ai-assistant__header { font-size: 1.875rem !important; }
.resource-card__title { align-items: center; }
.resource-card__bookmark {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.resource-card__bookmark:hover,
.resource-card__bookmark:focus-visible { background: transparent; box-shadow: none; }
.resource-card__bookmark svg { width: 26px; height: 26px; }
.single-resource__layout { grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); }
.single-resource__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.single-resource__title-row { grid-template-columns: minmax(0, 8fr) minmax(0, 2fr); }
.resource-card__bookmark {
  padding: 0 !important;
  background: transparent !important;
  color: var(--theme-color-surface-muted);
  border: 0 !important;
  box-shadow: none !important;
}

/* Single-post reading refinements: keep the compact TOC docked at the
   viewport bottom on tablet and mobile, without an extra border. */
.single-post {
  overflow-x: clip;
}

.single-post .article-toc .toc-h2 a:not(.is-active) {
  color: color-mix(in srgb, var(--theme-color-text) 10%, transparent);
  opacity: 1;
}

.single-post .article-toc .toc-h2 a.is-active {
  color: var(--theme-color-text);
  opacity: 1;
}

.single-post .article-featured-image,
.single-post .article-featured-image > img,
.single-post .post-card__image,
.single-post .post-card__image > img {
  border-radius: var(--theme-radius-medium);
}

.single-post .article-featured-image,
.single-post .post-card__image {
  overflow: hidden;
}

.single-post .article-featured-image > img,
.single-post .post-card__image > img {
  display: block;
  width: 100%;
}

.byline-wrapper {
  margin-block: 10px !important;
}

@media (max-width: 1024px) {
  .article-ai-assistant__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .article-ai-assistant__actions > .ui-button {
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    flex-basis: auto;
    padding-block: .65rem;
    white-space: normal;
  }
}

@media (max-width: 1319px) {
  .single-post .article-toc--mobile {
    position: sticky !important;
    top: auto !important;
    bottom: 20px !important;
    margin: 0 0 30px;
    border: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .single-post .article-excerpt,
  .single-content__body :is(p, li, td, th) {
    font-size: 1.125rem;
    line-height: 1.7;
  }
}
.resource-card__bookmark.is-saved { color: var(--theme-color-text); }
.resource-card__bookmark .sr-only { display: none !important; }
.resource-card__bookmark { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.resource-card__bookmark .post-action__icon--bookmark { display: block; }
.resource-card__bookmark .post-action__icon--saved { display: none; }
.resource-card__bookmark.is-saved .post-action__icon--bookmark { display: none; }
.resource-card__bookmark.is-saved .post-action__icon--saved { display: block; }
.single-resource__title-row { align-items: center; }

/* Compact theme scrollbar. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color-primary) var(--theme-color-surface-muted);
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--theme-color-surface-muted); }
::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--theme-color-primary); }

/* Resource title rows share one layout everywhere: the title remains flexible
   while the bookmark button is vertically centred and anchored to the right. */
.resource-card__title,
.resource-preview__title-row,
.single-resource__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--theme-space-3);
  min-width: 0;
}

.resource-card__title > :first-child,
.resource-preview__title-row > :first-child,
.single-resource__title-row > :first-child {
  min-width: 0;
}

.resource-card__title .resource-card__bookmark,
.resource-preview__title-row .resource-card__bookmark,
.single-resource__title-row .resource-card__bookmark {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  margin: 0;
  padding: 0;
  place-items: center;
  justify-self: end;
  align-self: center;
  border: 0;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted) !important;
  color: var(--theme-color-text) !important;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.resource-card__title .resource-card__bookmark:is(:hover, :focus-visible),
.resource-preview__title-row .resource-card__bookmark:is(:hover, :focus-visible),
.single-resource__title-row .resource-card__bookmark:is(:hover, :focus-visible) {
  background: var(--theme-color-surface-muted) !important;
  color: var(--theme-color-text) !important;
}

.resource-card__title .resource-card__bookmark.is-saved,
.resource-preview__title-row .resource-card__bookmark.is-saved,
.single-resource__title-row .resource-card__bookmark.is-saved {
  background: var(--theme-color-secondary) !important;
  color: var(--theme-color-on-secondary) !important;
}

.resource-card__title .resource-card__bookmark:active,
.resource-preview__title-row .resource-card__bookmark:active,
.single-resource__title-row .resource-card__bookmark:active {
  transform: scale(.96);
}

/* Size only. This selector outweighs the .is-saved toggles below it, so setting
   `display` here made both icons render at once — doubling the button's width
   and breaking the title row. Visibility is decided by the state rules. */
.resource-card__title .resource-card__bookmark svg,
.resource-preview__title-row .resource-card__bookmark svg,
.single-resource__title-row .resource-card__bookmark svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Restore the desktop article reading split. The older 1319px collapse was
   hiding the sidebar before the tablet breakpoint and also made sticky have
   no element to attach to. */
@media (min-width: 1024px) {
  .single-post {
    overflow-x: clip;
  }

  .single-post .single-layout {
    grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr);
    align-items: start;
    overflow: visible !important;
  }

  .single-post .single-sidebar {
    display: block !important;
    position: sticky !important;
    top: calc(var(--wp-admin-bar-height, 0px) + var(--site-header-anchor-offset, 30px)) !important;
    align-self: start !important;
    height: fit-content;
    min-height: 0;
    padding-right: 30px;
    overflow: visible;
  }

  .single-post .single-sidebar > .article-toc {
    display: block !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  .single-post .article-toc--mobile {
    display: none !important;
  }
}

/* Tablet article layouts collapse into the mobile reading flow. */
@media (max-width: 1023px) {
  .single-layout { grid-template-columns: 1fr; overflow-x: clip; }
  .single-layout .single-sidebar { display: none; }
}

/* Consistent article list indentation and markers. */
.single-content ul {
  list-style-position: outside;
  padding-left: 1.2em;
  margin-left: 0;
  margin-bottom: 20px;
}
.single-content ol {
  list-style-position: outside;
  padding-left: 1.2em;
  margin-left: 0;
  margin-bottom: 20px;
}
.single-content li::marker {
  color: var(--theme-color-primary);
  font-size: 24px;
  font-weight: 800;
}
@media (min-width: 1025px) {
  .site-header__desktop-utilities .theme-toggle__label { display: inline !important; }
  .site-header__actions .theme-toggle__label { display: none !important; }
}

/* Event archive and Meetup-inspired single event. */
.event-archive { width: 100%; }
.event-filters .resource-filters__controls { width: 100%; }
.event-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; transition: opacity .2s ease; }
.event-archive.is-loading .event-card-grid { opacity: .42; pointer-events: none; }
.event-archive__empty { grid-column: 1 / -1; min-height: 240px; display: grid; place-items: center; border-radius: var(--theme-radius-medium); background: var(--theme-color-surface-muted); color: var(--theme-color-summary); }
.event-card { cursor: default; }
.event-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--theme-radius-medium); background: var(--theme-color-surface-muted); color: var(--theme-color-text); text-decoration: none; }
.event-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.event-card:hover .event-card__media img { transform: scale(1.03); }
.event-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--theme-color-summary); font-weight: 800; letter-spacing: .16em; }
.event-card__status { display: inline-flex; width: fit-content; align-items: center; justify-content: center; border-radius: var(--theme-radius-extra); padding: .48rem .8rem; background: var(--theme-color-primary); color: var(--theme-color-button-text); font-size: var(--theme-font-size-post-meta); font-weight: 700; line-height: 1; }
.event-card__media > .event-card__status { position: absolute; top: 16px; right: 16px; z-index: 2; }
.event-card__status--cancelled,.event-card__status--past { background: var(--theme-color-surface-muted); color: var(--theme-color-text); }
.event-card__body { display: grid; align-content: start; gap: 12px; }
.event-card__body :is(h2,p) { margin: 0; }
.event-card__body h2 { color: var(--theme-color-text); font-size: var(--theme-font-size-card-title); line-height: var(--theme-line-height-card-title); }
.event-card__body h2 a { color: inherit; text-decoration: none; }
.event-card__date { color: var(--theme-color-primary); font-size: var(--theme-font-size-post-meta); font-weight: 700; }
.event-card__summary,.event-card__venue { color: var(--theme-color-summary); font-size: var(--theme-font-size-text); line-height: var(--theme-line-height-text); }
.event-card__summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.event-card__venue { font-size: var(--theme-font-size-post-meta); }

.event-single-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.event-single-sidebar { position: sticky; top: calc(var(--site-header-sticky-height, 100px) + 24px); display: grid; gap: 20px; padding-right: 0; }
.event-single__visual { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--theme-radius-medium); background: var(--theme-color-surface-muted); }
.event-single__visual::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--theme-color-primary); content: ""; transform: rotate(-3deg); }
.event-single__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-single__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.event-single__meta .breadcrumbs { margin-bottom: 0; }
.event-single-content { gap: clamp(24px, 3vw, 42px); }
.event-single__header { display: grid; gap: 20px; }
.event-single__header :is(h1,p) { margin: 0; }
.event-hosts { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 6px; }
.event-host { display: flex; align-items: center; gap: 14px; min-width: min(100%, 220px); }
.event-host__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.event-host__avatar--placeholder { display: grid; flex: 0 0 54px; place-items: center; background: var(--theme-color-surface-muted); color: var(--theme-color-primary); font-weight: 800; }
.event-host div { display: grid; gap: 3px; }
.event-host span { color: var(--theme-color-summary); font-size: var(--theme-font-size-post-meta); }
.event-host strong { color: var(--theme-color-text); font-size: 1rem; }
.event-host small { color: var(--theme-color-summary); }

.event-hosts-stack { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.event-hosts-stack__avatars { display: flex; align-items: center; }
.event-hosts-stack .event-host__avatar { width: 36px; height: 36px; flex: 0 0 36px; border: 2px solid var(--theme-color-background); margin-left: -10px; position: relative; }
.event-hosts-stack .event-host__avatar:first-child { margin-left: 0; z-index: 3; }
.event-hosts-stack .event-host__avatar:nth-child(2) { z-index: 2; }
.event-hosts-stack .event-host__avatar:nth-child(3) { z-index: 1; }
.event-hosts-stack__text { color: var(--theme-color-text); font-size: 1rem; }
.event-hosts-stack__text strong { font-weight: 600; }
.event-single__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.event-single__actions .ui-button { min-width: 150px; }
.event-single__actions svg { width: 20px; height: 20px; }
.event-bookmark.is-saved { color: var(--theme-color-primary); }
.event-detail-card,.event-registration,.event-venue-note,.event-attendees { display: grid; gap: 20px; border-radius: var(--theme-radius-medium); padding: 24px; background: var(--theme-color-surface-muted); color: var(--theme-color-text); }
.event-detail-card__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 14px; }
.event-detail-card__item + .event-detail-card__item { padding-top: 18px; border-top: 1px solid var(--theme-color-border); }
.event-detail-card__item > svg { width: 24px; height: 24px; color: var(--theme-color-primary); }
.event-detail-card__item > div { display: grid; gap: 5px; }
.event-detail-card__item :is(strong,span,a) { overflow-wrap: anywhere; }
.event-detail-card__item span { color: var(--theme-color-summary); font-size: var(--theme-font-size-post-meta); line-height: 1.6; }
.event-detail-card__item a { color: var(--theme-color-text); font-size: var(--theme-font-size-post-meta); font-weight: 700; }
.event-registration :is(h2,p),.event-venue-note :is(h2,p),.event-about > :is(h2,p),.event-attendees > h2 { margin: 0; }
.event-registration__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.event-registration__actions > * { flex: 1 1 140px; }
.event-registration__closed,.event-registration [data-event-status] { color: var(--theme-color-summary); line-height: 1.7; }
.event-registration [hidden],.event-about__toggle[hidden] { display: none !important; }
.event-registration__guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.event-registration__guest label { display: grid; gap: 7px; color: var(--theme-color-text); font-weight: 700; }
.event-registration__guest input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-small); padding: 13px 14px; background: var(--theme-color-surface); color: var(--theme-color-text); font: inherit; }
.event-calendar { position: relative; }
.event-calendar > summary { width: 100%; justify-content: space-between; list-style: none; }
.event-calendar > summary::-webkit-details-marker { display: none; }
.event-calendar > summary::after { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s; }
.event-calendar[open] > summary::after { transform: rotate(180deg); }
.event-calendar__links { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--theme-color-surface); border: 1px solid var(--theme-color-border-muted); border-radius: 6px; display: flex; flex-direction: column; padding: 4px 0; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.event-calendar__links a { padding: 10px 16px; color: var(--theme-color-text); text-decoration: none; transition: background-color 0.2s; }
.event-calendar__links a:hover { background-color: var(--theme-color-surface-hover); }
.event-registration--mobile,.event-detail-card--mobile,.event-single__visual--mobile { display: none; }
.event-about { display: grid; gap: 20px; padding-top: 10px; }
.event-about > h2,.event-venue-note > h2,.event-attendees > h2 { color: var(--theme-color-text); font-size: var(--theme-font-size-h3); }
.event-about__content { position: relative; max-height: 390px; overflow: hidden; transition: max-height .45s ease; }
.event-about.has-overflow:not(.is-expanded) .event-about__content::after { position: absolute; right: 0; bottom: 0; left: 0; height: 140px; pointer-events: none; content: ""; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--theme-color-background) 84%, transparent) 62%, var(--theme-color-background)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
.event-about.is-expanded .event-about__content { max-height: none; overflow: visible; }
.event-about__toggle { width: fit-content; min-width: 180px; margin-inline: auto; display: flex; }
.event-attendees > h2 span { color: var(--theme-color-summary); font-size: .6em; vertical-align: super; }
.event-attendees__list { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 0; padding: 0; list-style: none; }
.event-attendees__list li { display: flex; align-items: center; gap: 9px; }
.event-attendees__list img,.event-attendees__list li > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: var(--theme-color-surface); color: var(--theme-color-primary); object-fit: cover; font-weight: 800; }
.event-venue-note > p:last-child { color: var(--theme-color-summary); line-height: 1.8; }

@media (max-width: 1023px) {
  .event-single__meta { flex-wrap: wrap; justify-content: flex-start; }
  .event-single__meta .breadcrumbs { order: 2; flex: 1 1 100%; }
  .event-single__meta .event-card__status { order: 1; margin-bottom: 4px; }
  .event-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-single-layout { display: block; overflow: hidden; }
  .event-single-sidebar { display: none !important; }
  .event-registration--mobile,.event-detail-card--mobile,.event-single__visual--mobile { display: grid; }
  .event-single__visual--mobile { margin-top: 0; }
}
@media (max-width: 767px) {
  .event-card-grid { grid-template-columns: 1fr; gap: 30px; }
  .event-filters { align-items: stretch; }
  .event-filters .resource-filters__controls { flex-direction: column; align-items: stretch; overflow: visible; }
  .event-filters .resource-filter-search { width: 100%; }
  .event-filters .resource-filter-search input { width: 100%; }
  .event-detail-card,.event-registration,.event-venue-note,.event-attendees { padding: 20px; }
  .event-registration__guest { grid-template-columns: 1fr; }
  .event-single__actions > * { flex: 1 1 100%; }
}

/* Responsive reading layouts: article columns need a wider desktop canvas. */
@media (max-width: 1319px) {
  .single-post .single-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .single-post .single-sidebar {
    display: none !important;
  }

  .single-post .single-content,
  .single-post .single-content__body-wrapper {
    width: 100%;
    min-width: 0;
  }

  .single-post .article-toc--mobile {
    position: sticky !important;
    top: auto !important;
    bottom: 20px !important;
    z-index: 8;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 30px;
    padding: 1rem 1.25rem;
    border: 0 !important;
    border-radius: var(--theme-radius-medium);
    background: var(--theme-color-surface-muted);
    box-shadow: none !important;
  }

  .single-post .article-toc--mobile summary {
    margin: 0;
  }

  .single-post .article-toc--mobile[open] summary {
    margin: 0 0 1rem;
  }
}

@media (max-width: 1023px) {
  .single-resource .single-resource__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    overflow: hidden !important;
  }

  .single-resource .single-resource__intro {
    position: static !important;
    top: auto !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .single-resource .single-resource__actions,
  .single-resource .single-resource__actions > * {
    width: 100%;
  }

  .single-resource .single-resource__actions > * {
    flex: 1 1 100%;
  }
}

/* Larger post byline, without extra vertical spacing. */
.byline-wrapper {
  gap: 18px;
  margin-block: 10px !important;
}

.byline-wrapper__avatar,
.byline-wrapper__avatar img {
  width: 64px;
  height: 64px;
}

.byline-wrapper__avatar {
  flex: 0 0 64px;
}

.byline-wrapper__copy {
  gap: 6px;
}

.byline-wrapper__author {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.25rem;
  line-height: 1.35;
}

.byline-wrapper__verified {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.byline-wrapper__details {
  gap: 7px;
  font-size: 1rem;
  line-height: 1.45;
}

/* H2 TOC entries remain quiet until their section becomes active. */
.single-content .article-toc .toc-h2 > a:not(.is-active) {
  color: color-mix(in srgb, var(--theme-color-text) 10%, transparent);
}

.single-content .article-toc .toc-h2 > a.is-active {
  color: var(--theme-color-text);
}

/* Unified Gutenberg table surface. */
.wp-block-table {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--theme-color-surface);
}

.wp-block-table table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--theme-color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: inherit;
  background: var(--theme-color-surface);
}

.wp-block-table thead,
.wp-block-table thead tr,
.wp-block-table thead th {
  background: var(--theme-color-primary);
  color: var(--theme-color-9) !important;
}

.wp-block-table tbody,
.wp-block-table tbody tr,
.wp-block-table tbody :is(th, td) {
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
}

.wp-block-table :is(th, td) {
  border: 0;
  border-right: 1px solid var(--theme-color-border);
  border-bottom: 1px solid var(--theme-color-border);
  opacity: 1 !important;
}

.wp-block-table tr > :last-child {
  border-right: 0;
}

.wp-block-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* Member dashboard stat cards use a quiet icon-led treatment. */
.member-dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-stat-card {
  position: relative;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
}

.member-stat-card__icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  color: color-mix(in srgb, var(--theme-color-text) 20%, transparent);
  pointer-events: none;
}

/* Member QR card actions use the same full-width, icon-led controls as the
   security screens. Wallet is intentionally present but disabled until pass
   issuance is enabled on the server. */
.kaiyi-member-card__actions { display: flex; flex-wrap: wrap; gap: var(--theme-space-4); width: 100%; }
.kaiyi-member-card__actions .ui-button { flex: 1 1 220px; min-width: 0; }
.kaiyi-member-card__wallet-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.member-stat-card__label,
.member-stat-card__meta,
.member-stat-card__value {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .member-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .member-dashboard-stats {
    grid-template-columns: 1fr;
  }
}

/* Meetup-style event detail: the reading column is on the left. */
@media (min-width: 1024px) {
  .event-single-layout {
    grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  }

  .event-single-content {
    grid-column: 1;
    grid-row: 1;
  }

  .event-single-sidebar {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }
}

.event-hosts-stack {
  gap: 16px;
  margin-top: 16px;
}

.event-hosts-stack .event-host__avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-width: 3px;
}

.event-hosts-stack__text {
  font-size: 1.125rem;
  line-height: 1.5;
}

.event-hosts-stack__text strong {
  font-weight: 700;
}

.event-venue-note {
  display: grid;
  gap: 16px;
}

.event-venue-note > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--theme-color-text);
  cursor: pointer;
  font-size: var(--theme-font-size-h3);
  font-weight: 700;
  list-style: none;
}

.event-venue-note > summary::-webkit-details-marker {
  display: none;
}

.event-venue-note > summary::after {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}

.event-venue-note[open] > summary::after {
  transform: rotate(180deg);
}

/*
 * TOC chevrons point down while closed and up while expanded.
 *
 * Scoped away from the phone box, which is docked at the bottom and opens
 * upward: it needs the opposite pair, and this !important was quietly winning
 * against the rule that said so.
 */
.article-toc:not(.article-toc--mobile) summary::after {
  transform: rotate(0deg) !important;
}

.article-toc:not(.article-toc--mobile)[open] summary::after {
  transform: rotate(180deg) !important;
}

/* Mega menu triggers do not have WordPress child items, so add their own arrow. */
@media (min-width: 1281px) {
  .site-header__primary-nav > nav > .menu > .menu-item--insight-mega-menu > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--resource-mega-menu > a::after {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-left: .35rem;
    content: "";
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease;
  }

  .site-header__primary-nav > nav > .menu > .menu-item--insight-mega-menu:hover > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--insight-mega-menu:focus-within > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--resource-mega-menu:hover > a::after,
  .site-header__primary-nav > nav > .menu > .menu-item--resource-mega-menu:focus-within > a::after {
    transform: rotate(180deg);
  }
}

/* ---------------------------------------------------------------------------
   Resource title rows, resource actions, header CTA and the mega-card CTA mask.
   These selectors are redefined several times earlier in this file, so the
   corrections live at the end where they win without needing !important.
   --------------------------------------------------------------------------- */

/* One bookmark icon at a time, everywhere the button appears. The `hidden`
   attribute on the saved icon is not enough on its own: any author-level
   `display` rule outranks it. */
.resource-card__bookmark .post-action__icon--bookmark,
.resource-card__bookmark.is-saved .post-action__icon--saved {
  display: block;
}

.resource-card__bookmark .post-action__icon--saved,
.resource-card__bookmark.is-saved .post-action__icon--bookmark {
  display: none;
}

/* Title left, bookmark right, on a single row that cannot be pushed out of
   shape by the button. */
.resource-card__title,
.resource-preview__title-row,
.single-resource__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--theme-space-3);
  min-width: 0;
}

.resource-card__title > :first-child,
.resource-preview__title-row > :first-child,
.single-resource__title-row > :first-child {
  min-width: 0;
  justify-self: start;
  margin: 0;
  color: var(--theme-color-title, var(--theme-color-text));
  text-align: left;
  overflow-wrap: anywhere;
}

.resource-card__title .resource-card__bookmark,
.resource-preview__title-row .resource-card__bookmark,
.single-resource__title-row .resource-card__bookmark {
  flex: 0 0 auto;
  justify-self: end;
}

/* Actions sit side by side while there is room and each takes the full width
   once they wrap, instead of always stacking. */
.single-resource .single-resource__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--theme-space-2, 10px);
  width: 100%;
}

.single-resource .single-resource__actions > * {
  flex: 1 1 12rem;
  min-width: 0;
  width: auto;
  justify-content: center;
  text-align: center;
}

/* The mega-card CTA reuses the archive card's cutout language: the mask is the
   page canvas notched into the card, with the arrow sitting inside it. */
.c-mega-card__cta-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  padding: 15px 15px 0 0;
  border-radius: 0;
  border-top-right-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface);
  color: inherit;
}

.c-mega-card__cta-curve {
  position: absolute;
  width: 30px;
  height: 30px;
  color: var(--theme-color-surface);
  fill: currentColor;
  pointer-events: none;
}

.c-mega-card__cta-curve--top {
  top: 0;
  left: 0;
  transform: translateY(-100%);
}

.c-mega-card__cta-curve--right {
  right: 0;
  bottom: 0;
  transform: translateX(100%);
}

.c-mega-card__cta-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
  transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2, .75, .2, 1);
}

.c-mega-card__cta-icon svg {
  width: 2rem;
  height: 2rem;
}

.c-mega-card--cta:is(:hover, :focus-visible) .c-mega-card__cta-icon {
  background: var(--theme-color-secondary);
  color: var(--theme-color-on-secondary);
  transform: translate3d(2px, -2px, 0);
}

/* Header consult button: a little taller, and its hover wipe uses secondary. */
.site-header__consult {
  min-height: 48px;
  padding: .8rem 1.6rem;
}

.site-header__member-actions .site-header__consult {
  min-height: 52px;
  padding: 14px 20px;
}

.site-header__consult::after {
  background: var(--theme-color-secondary);
}

.site-header__consult:hover,
.site-header__consult:focus-visible {
  color: var(--theme-color-on-secondary) !important;
}

/* ---------------------------------------------------------------------------
   Event detail refinements.
   --------------------------------------------------------------------------- */

/* Status badge lives in the cover's top-right cutout, like the work card. */
.event-single__visual,
.event-card__media {
  position: relative;
  overflow: hidden;
}

.event-status-mask {
  background: var(--theme-color-surface);
}

.event-status-mask .post-card__mask-curve {
  color: var(--theme-color-surface);
}

.event-status-mask .event-card__status {
  position: static;
  display: inline-flex;
  margin: 0;
}

/* Hosts on the left, actions on the right, on one rule-bounded row. Each side
   takes the full width once there is no room to sit side by side. */
.event-single__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--theme-space-3);
  margin: var(--theme-space-5) 0;
  padding: 20px 0;
  border-top: 1px solid var(--theme-color-border);
  border-bottom: 1px solid var(--theme-color-border);
}

.event-single__bar .event-hosts-stack {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

.event-single__bar .event-single__actions {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--theme-space-2, 10px);
  margin: 0;
}

.event-single__bar .event-single__actions > * {
  flex: 1 1 12rem;
  justify-content: center;
}

@media (max-width: 700px) {
  .event-single__bar,
  .event-single__bar .event-single__actions {
    justify-content: stretch;
  }

  .event-single__bar > *,
  .event-single__bar .event-single__actions > * {
    flex: 1 1 100%;
  }
}

/* The registration block now sits above the detail card and is not a card. */
.event-registration {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.event-registration__spots {
  margin: 0 0 var(--theme-space-2, 10px);
  color: var(--theme-color-text);
  font-weight: 700;
}

/* Calendar disclosure reads as a surface-muted button with title-coloured text. */
.event-calendar__summary {
  background: var(--theme-color-surface-muted) !important;
  color: var(--theme-color-text) !important;
}

.event-calendar__summary:is(:hover, :focus-visible) {
  background: var(--theme-color-surface-muted) !important;
  color: var(--theme-color-text) !important;
}

/* Pull the toggle up so it overlaps the fade it belongs to. */
.event-about__toggle {
  position: relative;
  z-index: 2;
  margin-top: -2.25rem;
}

/* Secondary sections are subordinate to the article title. */
.event-section-title {
  margin: 0 0 var(--theme-space-3);
  font-size: clamp(1.0625rem, 1.1vw, 1.25rem);
  line-height: 1.4;
}

.event-venue-note > summary.event-section-title {
  margin-bottom: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Footer refinements.
   --------------------------------------------------------------------------- */

/* The two corner cut-outs read as blocks of page colour punched into the
   footer, so every corner that meets the footer needs a fillet — the small
   square of footer colour whose rounded corner carves the concave transition.
   Without it the junction is a hard right angle and the cut-out looks like it
   has slipped out of place rather than being part of the shape. */
.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
  border-bottom-right-radius: var(--kaiyi-footer-radius);
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  border-bottom-left-radius: var(--kaiyi-footer-radius);
}

@media (max-width: 767px) {
  /* On phones the back-to-top block moves to the bottom-right corner, so its
     fillets have to move with it: one along the bottom edge to its left, one
     along the right edge above it. They were previously hidden outright, which
     is what left the block sitting on two square corners. */
  .site-footer.kaiyi-footer-section :is(.kaiyi-fillet-tr-topleft, .kaiyi-fillet-tr-bottomright) {
    display: block;
    position: absolute;
    width: var(--kaiyi-footer-radius);
    height: var(--kaiyi-footer-radius);
    background: var(--theme-color-surface);
    z-index: 20;
  }

  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr-topleft {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
  }

  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr-bottomright {
    top: 0;
    right: 0;
    bottom: auto;
    transform: translateY(-100%);
  }

  /* Both concave corners curve the same way: the footer-coloured square has its
     bottom-right rounded off, letting the page colour through. */
  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr-topleft::after,
  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr-bottomright::after {
    border-radius: 0 0 var(--kaiyi-footer-radius) 0;
    background: var(--theme-color-surface-muted);
  }

  /* The social block keeps its own pair, matched to the same radius so the two
     cut-outs are cut to one shape rather than two. */
  .site-footer.kaiyi-footer-section :is(.kaiyi-fillet-tl, .kaiyi-fillet-tr) {
    width: var(--kaiyi-footer-radius);
    height: var(--kaiyi-footer-radius);
  }

  .site-footer.kaiyi-footer-section .kaiyi-fillet-tl::after,
  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr::after {
    border-top-left-radius: var(--kaiyi-footer-radius);
  }
}

/* Footer menu underline: reveal on hover and retract the way it came, rather
   than wiping in from one side and out of the other. */
.site-footer.kaiyi-footer-section .kaiyi-footer-links a::after {
  transform-origin: left;
}

.site-footer.kaiyi-footer-section .kaiyi-footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The policy menu and the contact details were each a step smaller than the
   navigation columns for no reason; one size across every footer link. */
.site-footer.kaiyi-footer-section .kaiyi-footer-bottom-right a,
.site-footer.kaiyi-footer-section .kaiyi-contact-list :is(a, p) {
  font-size: 1.125rem;
  line-height: 1.45;
}

/* The footer's consult button already shares the header button's wipe; these
   are the three places it had drifted — the wipe colour, the text colour it
   wipes to, and a lift the header button does not have. */
.site-footer.kaiyi-footer-section .kaiyi-cta-button::after {
  background: var(--theme-color-secondary);
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button:hover,
.site-footer.kaiyi-footer-section .kaiyi-cta-button:focus-visible {
  color: var(--theme-color-on-secondary) !important;
  transform: none;
}

/* ---------------------------------------------------------------------------
   Event detail: cover badges and reading affordances.
   --------------------------------------------------------------------------- */

/* The cover cutout now stacks what the visitor can act on. The scheduling
   state used to live here and said nothing the date above it did not. */
.event-status-mask {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.event-cover-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: .48rem .8rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-button-text);
  font-size: var(--theme-font-size-post-meta);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Holding a place is a different kind of fact from how many are left, so it
   does not compete with the primary colour for attention. */
.event-cover-badge--registered {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

/* The badges are emitted even when empty so the JS always has a node to fill.
   An empty cut-out is a shape with nothing in it, so the mask goes with them. */
.event-status-mask:not(:has(.event-cover-badge:not([hidden]))) {
  display: none;
}

/* Secondary sections were a shade too quiet against the body copy. */
.event-section-title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

@media (max-width: 767px) {
  /* The fade only has to signal that there is more below; at 140px it was
     covering readable copy rather than trailing off from it. */
  .event-about.has-overflow:not(.is-expanded) .event-about__content::after {
    height: 84px;
  }

  /* A full-width large button for a secondary action read as the page's main
     call to action. Sized down, and pulled further into the fade it belongs to. */
  .event-about__toggle {
    min-width: 0;
    margin-top: -1.5rem;
    padding: .6rem 1.4rem;
    font-size: .9375rem;
  }
}

/* The chat panel takes over scrolling while it is open; the gutter is held
   open so removing the scrollbar does not shift the page sideways. */
html.kaiyi-chat-locked,
html.kaiyi-chat-locked body {
  overflow: hidden;
}

/* iOS Safari scrolls the page under `overflow: hidden` regardless, so the body
   is pinned at its current offset instead. The offset itself is set inline by
   the widget and restored when the panel closes. */
html.kaiyi-chat-locked body {
  position: fixed;
  left: 0;
  width: 100%;
  padding-right: var(--kaiyi-chat-gutter, 0px);
}

/* The contact button steps aside while the chat panel is open: the launcher
   docks to it, so leaving both on screen stacks two round buttons. */
body.kaiyi-chat-open .sticky-contact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Footer links use the same hover reveal as the header menu, so the underline
   animation they used to carry is removed rather than layered underneath it. */
.site-footer.kaiyi-footer-section .kaiyi-footer-links a::after,
.site-footer.kaiyi-footer-section .kaiyi-footer-bottom-right a::after {
  content: none !important;
}

.site-footer.kaiyi-footer-section :is(.kaiyi-footer-links, .kaiyi-footer-bottom-right) a.has-hover-reveal {
  overflow: hidden;
}

/* The cut-outs were padded on their inner two sides only, so the social row and
   the back-to-top line sat flush against the top and outer edges of the screen.
   Both are now centred in the shape with room on every side. */
.site-footer.kaiyi-footer-section :is(.kaiyi-cutout-top-left, .kaiyi-cutout-top-right) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
  padding: 18px 24px 22px 18px;
}

.site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
  padding: 18px 18px 22px 24px;
}

@media (max-width: 767px) {
  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-left {
    padding: 14px 20px 18px 14px;
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
    padding: 18px 14px 14px 20px;
  }
}

/* The custom scrollbar is a pointer affordance. Touch platforms draw their own
   overlay bar that appears while scrolling and fades out, and styling the
   track paints a permanent stripe over content instead. */
@media (max-width: 767px), (pointer: coarse) {
  html {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  ::-webkit-scrollbar {
    width: auto;
    height: auto;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
  }
}

/* Auth and member links carry both treatments: the underline that
   underline-motion animates, and the rising label of the hover reveal. An
   earlier revision suppressed the pseudo-elements here, which removed the
   underline entirely -- the two are meant to run together, not to replace
   one another. */
.auth-page a.has-hover-reveal {
  overflow: hidden;
  text-decoration: none;
}

/* In the phone header the toggle is a clone of the desktop button dropped in
   beside search, so it takes the same 30px box as its siblings and its icon
   fills it the same way. Scoped to that container, so the desktop utilities
   bar and the auth shell keep their own sizes. */
@media (max-width: 1024px) {
  .site-header__actions .theme-toggle svg {
    width: 100%;
    height: 100%;
  }
}

/* The back-to-top cut-out sits flush with the bottom of the page on phones, so
   its left edge and the footer's bottom edge meet in the same plane. A fillet
   there curves into nothing and leaves a stray page-coloured square; only the
   one above it, where the footer's right edge really does turn into the
   cut-out, has anything to do. */
@media (max-width: 767px) {
  .site-footer.kaiyi-footer-section .kaiyi-fillet-tr-topleft {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Service pages                                                              */
/*                                                                            */
/* One page, ten sections, any of which can be absent. Every section is its    */
/* own grid child of the main element so the vertical rhythm comes from one    */
/* gap rather than from margins that have to be cancelled when a section is    */
/* not rendered.                                                              */
/* -------------------------------------------------------------------------- */

.kaiyi-service,
.kaiyi-services {
  display: grid;
  gap: clamp(4rem, 9vw, 9rem);
  padding-block: clamp(2.5rem, 6vw, 6rem);
}

.kaiyi-service h2,
.kaiyi-services h2 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h2);
  line-height: var(--theme-line-height-h2);
}

/* --------------------------------------------------------------- hero */

.kaiyi-service-hero {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.kaiyi-service-hero__breadcrumbs {
  margin: 0;
}

.kaiyi-service-hero__main {
  display: grid;
  gap: 30px;
  justify-items: start;
  max-width: 60ch;
}

.kaiyi-service-hero h1 {
  margin: 0;
  color: var(--theme-color-text);
}

.kaiyi-service-hero__lede {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-body-lg);
  font-weight: 500;
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kaiyi-service-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
  font-weight: 600;
}

/* The qualifier is deliberately quiet but never hidden: a price with no
   scope attached is the one number a visitor will quote back later. */
.kaiyi-service-hero__price span {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  font-weight: 500;
}

.kaiyi-service-hero__media {
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
}

.kaiyi-service-hero__media img {
  display: block;
  width: 100%;
  height: clamp(18rem, 42vw, 34rem);
  object-fit: cover;
}

/* -------------------------------------------------------- capabilities */

.kaiyi-service-capabilities {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-border);
  list-style: none;
}

.kaiyi-service-capability {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
  font-weight: 600;
  line-height: var(--theme-line-height-h6);
}

.kaiyi-service-capability__index {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ------------------------------------------------------ problem/answer */

.kaiyi-service-problem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}

.kaiyi-service-problem__column {
  display: grid;
  align-content: start;
  gap: 20px;
}

.kaiyi-service-problem__column p {
  margin: 0;
  max-width: 50ch;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-problem__column--answer p {
  color: var(--theme-color-text);
}

/* ------------------------------------------------------------ includes */

.kaiyi-service-includes {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-includes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kaiyi-service-include {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface);
}

.kaiyi-service-include h3 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
  line-height: var(--theme-line-height-h6);
}

.kaiyi-service-include p {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-body-sm);
  line-height: var(--theme-line-height-text);
}

/* ------------------------------------------------------------- process */

.kaiyi-service-process {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-process__steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.kaiyi-service-step {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--theme-color-border);
}

.kaiyi-service-step:last-child {
  border-bottom: 1px solid var(--theme-color-border);
}

.kaiyi-service-step__number {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-h6);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.kaiyi-service-step__body {
  display: grid;
  gap: 10px;
}

.kaiyi-service-step__body h3 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h5);
  line-height: var(--theme-line-height-h5);
}

.kaiyi-service-step__body p {
  margin: 0;
  max-width: 60ch;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

/* ---------------------------------------------------------- page body */

.kaiyi-service-body__inner {
  max-width: 68ch;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-body__inner > :first-child {
  margin-top: 0;
}

.kaiyi-service-body__inner > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- proof */

.kaiyi-service-proof {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kaiyi-service-quote {
  display: grid;
  align-content: space-between;
  gap: 24px;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.kaiyi-service-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-body-sm);
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-quote blockquote p {
  margin: 0 0 .75em;
}

.kaiyi-service-quote blockquote p:last-child {
  margin-bottom: 0;
}

.kaiyi-service-quote figcaption {
  display: grid;
  gap: 4px;
}

.kaiyi-service-quote figcaption strong {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-body-sm);
}

.kaiyi-service-quote figcaption span {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
}

/* ----------------------------------------------------------------- FAQ */

.kaiyi-service-faq {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-faq__list {
  display: grid;
  max-width: 68ch;
}

.kaiyi-service-faq__item {
  border-top: 1px solid var(--theme-color-border);
}

.kaiyi-service-faq__item:last-child {
  border-bottom: 1px solid var(--theme-color-border);
}

.kaiyi-service-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
  font-weight: 600;
  line-height: var(--theme-line-height-h6);
  cursor: pointer;
  list-style: none;
}

.kaiyi-service-faq__item summary::-webkit-details-marker {
  display: none;
}

.kaiyi-service-faq__item summary svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  color: var(--theme-color-text-muted);
  transition: transform .25s ease;
}

.kaiyi-service-faq__item[open] summary svg {
  transform: rotate(45deg);
}

.kaiyi-service-faq__item > p {
  margin: 0;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

/* --------------------------------------------------------------- work */

.kaiyi-service-work {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-work__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kaiyi-service-work__all {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-button);
  font-weight: 600;
}

.kaiyi-service-work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kaiyi-service-work-card {
  display: grid;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.kaiyi-service-work-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.kaiyi-service-work-card__media img {
  display: block;
  width: 100%;
  height: clamp(12rem, 22vw, 17rem);
  object-fit: cover;
  transition: transform .5s ease;
}

.kaiyi-service-work-card:hover .kaiyi-service-work-card__media img,
.kaiyi-service-work-card:focus-visible .kaiyi-service-work-card__media img {
  transform: scale(1.04);
}

.kaiyi-service-work-card__meta {
  display: grid;
  gap: 4px;
}

.kaiyi-service-work-card__meta strong {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
}

.kaiyi-service-work-card__meta > span {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
}

/* ------------------------------------------------------ related services */

.kaiyi-service-related {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.kaiyi-service-related__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaiyi-service-related__list li {
  border-top: 1px solid var(--theme-color-border);
}

.kaiyi-service-related__list li:last-child {
  border-bottom: 1px solid var(--theme-color-border);
}

.kaiyi-service-related__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(1.25rem, 2.5vw, 1.85rem);
  color: inherit;
  text-decoration: none;
}

.kaiyi-service-related__list strong {
  grid-column: 1;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h5);
  line-height: var(--theme-line-height-h5);
}

.kaiyi-service-related__list a > span {
  grid-column: 1;
  max-width: 60ch;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-body-sm);
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-related__list svg {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--theme-color-text-muted);
  transition: transform .25s ease;
}

.kaiyi-service-related__list a:hover svg,
.kaiyi-service-related__list a:focus-visible svg {
  transform: translate(4px, -4px);
}

/* ----------------------------------------------------------------- CTA */

.kaiyi-service-cta {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.kaiyi-service-cta p {
  max-width: 52ch;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.kaiyi-service-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ------------------------------------------------------ services index */

.kaiyi-services-hero {
  display: grid;
  gap: 30px;
  justify-items: start;
}

.kaiyi-services-hero h1 {
  margin: 0;
  color: var(--theme-color-text);
}

.kaiyi-services-hero__breadcrumbs {
  margin: 0;
}

.kaiyi-services-hero__lede {
  max-width: 55ch;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-body-lg);
  font-weight: 500;
  line-height: var(--theme-line-height-text);
}

.kaiyi-services-group {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.kaiyi-services-group__title {
  color: var(--theme-color-text-muted) !important;
  font-size: var(--theme-font-size-h6) !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kaiyi-services-group__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaiyi-services-item {
  border-top: 1px solid var(--theme-color-border);
}

.kaiyi-services-item:last-child {
  border-bottom: 1px solid var(--theme-color-border);
}

.kaiyi-services-item a {
  display: grid;
  grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  color: inherit;
  text-decoration: none;
}

.kaiyi-services-item__number {
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 2.2;
}

.kaiyi-services-item__body {
  display: grid;
  gap: 12px;
}

.kaiyi-services-item__body strong {
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h3);
  line-height: var(--theme-line-height-h3);
}

.kaiyi-services-item__lede {
  max-width: 58ch;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
  line-height: var(--theme-line-height-text);
}

.kaiyi-services-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kaiyi-services-item__tags span {
  padding: 6px 14px;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-extra);
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  font-weight: 500;
}

.kaiyi-services-item__arrow {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  color: var(--theme-color-text-muted);
  transition: transform .25s ease;
}

.kaiyi-services-item a:hover .kaiyi-services-item__arrow,
.kaiyi-services-item a:focus-visible .kaiyi-services-item__arrow {
  transform: translate(4px, -4px);
}

.kaiyi-services-empty p {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-text);
}

@media (max-width: 767px) {
  .kaiyi-service,
  .kaiyi-services {
    gap: 3.5rem;
    padding-block: 30px;
  }

  .kaiyi-service h2,
  .kaiyi-services h2 {
    font-size: var(--theme-font-size-h3);
  }

  .kaiyi-service-hero__main {
    gap: 25px;
  }

  .kaiyi-service-hero__actions .about-button,
  .kaiyi-service-cta__actions .about-button {
    flex: 1 1 auto;
  }

  .kaiyi-service-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* The number is a label rather than a column once it sits above the
     heading, so it drops to the same size as the other small type. */
  .kaiyi-service-step__number {
    font-size: var(--theme-font-size-label);
  }

  .kaiyi-services-item a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kaiyi-services-item__number {
    display: none;
  }

  .kaiyi-services-item__body strong {
    font-size: var(--theme-font-size-h4);
  }

  .kaiyi-services-item__arrow {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Post actions and article tables                                            */
/* -------------------------------------------------------------------------- */

/*
 * The icons and their labels sit on one optical centre line. The button is a
 * flex row, but the label carried line-height: 1 while the button carried
 * line-height: normal, so the text box and the 24px icon box centred against
 * different heights.
 */
.post-actions .post-action {
  align-items: center;
  line-height: 1;
}

.post-actions .post-action > svg,
.post-actions .post-action > span {
  align-self: center;
}

.post-actions .post-action > span {
  line-height: 1;
}

/*
 * Table heads sit on the primary colour, where the shared border token has no
 * contrast. A white tenth reads as a divider on that fill without turning into
 * a hard rule.
 */
.single-content__body thead :is(th, td),
.wp-block-table thead :is(th, td) {
  border-right-color: rgba(255, 255, 255, .1);
  border-bottom-color: rgba(255, 255, 255, .1);
}

/* -------------------------------------------------------------------------- */
/* Article furniture on small screens                                         */
/* -------------------------------------------------------------------------- */

/*
 * The overflow count for the badge sets that cap at two. The existing
 * --tablet-only class hides below 768 as well, which is not what a phone
 * needs, so this is the one that runs from zero up to the desktop breakpoint.
 */
.post-card__tag-plus--compact {
  display: inline-flex;
}

@media (min-width: 1025px) {
  .post-card__tag-plus--compact {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /*
   * Three actions, one row, equal share. flex: 1 1 0 rather than 1 1 auto so
   * the labels do not decide the widths: with auto the bookmark button won on
   * content length and pushed the other two onto their own line.
   */
  .post-actions {
    gap: 8px;
  }

  .post-actions .post-action {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    padding-inline: .5rem;
    gap: 6px;
  }

  /* The last action no longer needs pushing right once all three share the row. */
  .post-actions .post-action:last-child {
    margin-left: 0;
  }

  .post-actions .post-action > svg,
  .post-actions .post-action .post-action__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .post-actions .post-action > span:not(.post-action__count) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The AI reader's three buttons get the same taller touch target. */
  .article-ai-assistant__actions .ui-button {
    min-height: 56px;
  }
}

/* -------------------------------------------------------------------------- */
/* Contents, footer contact and the back-to-top cut-out                       */
/* -------------------------------------------------------------------------- */

/*
 * An unvisited contents entry was drawn at a tenth of the text colour, which
 * on either theme is close to not being drawn at all. Half keeps the active
 * entry clearly ahead while leaving the rest readable.
 *
 * Mixed against transparent rather than set with opacity, so the entry fades
 * and the marker on its rail does not.
 */
.single-post .article-toc .toc-h2 a:not(.is-active),
.single-content .article-toc .toc-h2 > a:not(.is-active) {
  color: color-mix(in srgb, var(--theme-color-text) 50%, transparent);
}

/*
 * The contact rows reveal their label on hover like every other footer link.
 * The class sits on the label so the icon stays put, which means the hover
 * has to be read from the row rather than from the labelled element itself.
 */
.kaiyi-contact-list :is(a, p) {
  cursor: pointer;
}

.kaiyi-contact-list :is(a, p):hover .hover-reveal__text > span:first-child,
.kaiyi-contact-list :is(a, p):focus-visible .hover-reveal__text > span:first-child {
  transform: translateY(-110%);
}

.kaiyi-contact-list :is(a, p):hover .hover-reveal__text > span:last-child,
.kaiyi-contact-list :is(a, p):focus-visible .hover-reveal__text > span:last-child {
  transform: translateY(0);
}

/*
 * The back-to-top cut-out shrank on phones but kept the footer's full 24px
 * corner, which on a block that small reads as a bite rather than a rounded
 * corner. The radius is a property on the cut-out so its two fillets curve to
 * the same figure -- a smaller convex corner against unchanged concave ones
 * would leave a visible step where they meet.
 */
@media (max-width: 767px) {
  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
    --kaiyi-cutout-radius: 14px;
    border-top-left-radius: var(--kaiyi-cutout-radius);
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right :is(.kaiyi-fillet-tr-topleft, .kaiyi-fillet-tr-bottomright) {
    width: var(--kaiyi-cutout-radius);
    height: var(--kaiyi-cutout-radius);
  }

  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right :is(.kaiyi-fillet-tr-topleft, .kaiyi-fillet-tr-bottomright)::after {
    border-radius: 0 0 var(--kaiyi-cutout-radius) 0;
  }
}

/*
 * An article with no headings has no contents. The stylesheet has to say so:
 * the mobile rules set display with !important, which outranks the user-agent
 * display: none that the hidden attribute relies on, so the box was drawn
 * empty rather than not drawn.
 */
.article-toc--empty {
  display: none !important;
}

/*
 * From 1024px up the sidebar contents box is on screen, and an earlier rule
 * already says so. A later, broader max-width: 1319px block overrode it with
 * equal specificity, so both boxes were drawn between those two widths. This
 * restores the stated intent without touching anything below 1024px.
 */
@media (min-width: 1024px) {
  .single-post .article-toc--mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Round two of article, footer and menu detail                               */
/* -------------------------------------------------------------------------- */

/*
 * The mega card's cut-out is a mask rectangle plus two quarter-round fillets
 * that soften its outer corners. All three are the same notch, so they have to
 * be the same colour -- on hover the mask turned primary while the fillets
 * stayed on the surface colour, which broke the shape open.
 */
.c-mega-card--cta:hover .c-mega-card__cta-mask,
.c-mega-card--cta:focus-visible .c-mega-card__cta-mask {
  background: var(--theme-color-surface);
  color: inherit;
}

.c-mega-card--cta:hover .c-mega-card__cta-curve,
.c-mega-card--cta:focus-visible .c-mega-card__cta-curve {
  color: var(--theme-color-surface);
}

/* The AI reader block sat at a flat 36px, which on a phone is most of the
   width. It now scales with the viewport like the rest of the article. */
.article-ai-assistant {
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

/*
 * The floating contents box gets out of the way on the way down and returns on
 * the way up. Transform rather than display, so it animates and so its layout
 * space -- which is what keeps sticky working -- stays put.
 */
.article-toc--mobile {
  transition: transform .28s ease, opacity .28s ease, visibility .28s;
}

.article-toc--mobile.is-tucked {
  transform: translateY(calc(100% + 30px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .article-toc--mobile {
    transition: none;
  }
}

@media (max-width: 767px) {
  /*
   * LinkedIn is not a channel this site uses, and dropping it leaves room for
   * the rest to reach a comfortable touch target instead of sitting at 36px.
   */
  .kaiyi-socials .kaiyi-social-link[aria-label*="LinkedIn" i],
  .kaiyi-socials .kaiyi-social-link[href*="linkedin.com"] {
    display: none;
  }

  .kaiyi-socials .kaiyi-social-link {
    width: 2.75rem;
    height: 2.75rem;
  }

  .kaiyi-socials .kaiyi-social-link svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* Room to breathe either side of the label now the three actions share the
     row; .5rem left them looking crammed against their own borders. */
  .post-actions .post-action {
    padding-inline: .85rem;
  }
}

/*
 * Buttons that opt into the hover reveal have their whole contents wrapped in
 * a stacked pair of spans, icons included. .ui-button already had rules to
 * keep that from flattening its layout; the other button families joined the
 * reveal without them, so their icons lost their flex sizing and drifted.
 */
.about-button .hover-reveal__text,
.slider-cta-button .hover-reveal__text,
.member-button .hover-reveal__text {
  gap: inherit;
  width: 100%;
}

.about-button .hover-reveal__text > span,
.slider-cta-button .hover-reveal__text > span,
.member-button .hover-reveal__text > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  width: 100%;
}

.about-button .hover-reveal__text svg,
.slider-cta-button .hover-reveal__text svg,
.member-button .hover-reveal__text svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

/*
 * The process list marks how far the reader has come. The stylesheet owns what
 * that looks like; service-motion.js only toggles the classes, so removing
 * these rules turns the effect off without touching the script.
 */
.kaiyi-service-step {
  transition: opacity .35s ease, border-color .35s ease;
}

.kaiyi-service-step__number {
  transition: color .35s ease;
}

.kaiyi-service-step.is-current {
  border-top-color: var(--theme-color-primary);
}

.kaiyi-service-step.is-current .kaiyi-service-step__number {
  color: var(--theme-color-text);
}

/* The cover overflows its frame so the parallax has somewhere to travel. */
.kaiyi-service-hero__media img {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .kaiyi-service-step,
  .kaiyi-service-step__number,
  .kaiyi-service-hero__media img {
    transition: none;
    will-change: auto;
  }
}

/*
 * The frame owns the height and the image overflows it, so the parallax has
 * 14% of travel to move through without ever exposing an edge. Without this
 * the image exactly fills its frame and any drift opens a gap.
 */
.kaiyi-service-hero__media {
  height: clamp(18rem, 42vw, 34rem);
}

.kaiyi-service-hero__media img {
  height: 114%;
  margin-top: -7%;
}

/* -------------------------------------------------------------------------- */
/* Members-only notice                                                        */
/* -------------------------------------------------------------------------- */

/*
 * The heading here had no size of its own, so it fell through to the global h2
 * at 3.5rem -- a display heading inside a callout card, which is what pushed
 * the card apart and overflowed it on a phone. This is a notice, not a page
 * title, so it takes a card-sized heading.
 */
.access-denied {
  display: grid;
  justify-items: start;
  gap: 0;
}

.access-denied h2 {
  margin: 1rem 0 .75rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.3;
}

.access-denied > p:not(.ui-badge) {
  max-width: 52ch;
  margin: 0;
  color: var(--theme-color-text-muted);
}

.access-denied__badge {
  margin: 0;
}

.access-denied__lock {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* The badge opts into the hover reveal, which wraps the lock and the label
   together; without a size the icon loses its flex basis inside that wrapper. */
.access-denied__badge .hover-reveal__text svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Editor content: lists, and the phone header and post actions               */
/* -------------------------------------------------------------------------- */

/*
 * The lists were laid out with display: grid, which turns the items into grid
 * items. A list marker belongs outside its item's box, and once that box is a
 * grid item the marker is placed against the grid edge rather than indented
 * with the text -- which is why the numbers sat further left than the bullets
 * they were meant to line up with. Normal block layout puts them back; the gap
 * between items comes from a margin instead.
 */
.single-content__body :is(ul, ol) {
  display: block;
  padding-left: 1.75rem;
}

.single-content__body :is(ul, ol) > li + li {
  margin-top: 10px;
}

.single-content__body :is(ul, ol) :is(ul, ol) {
  margin-top: 10px;
}

.single-content__body li::marker {
  color: var(--theme-color-primary);
}

@media (max-width: 767px) {
  /*
   * The phone header shrinks its actions to 24px, but the theme toggle is
   * matched on two classes and so outranked that rule and stayed at 30 --
   * one icon a quarter larger than the search beside it.
   */
  .site-header__actions .theme-toggle {
    width: 24px;
    height: 24px;
  }

  /* A little less tall now the three actions share the row comfortably. */
  .post-actions .post-action {
    min-height: 48px;
  }

  /*
   * The comment count is a badge, not a column: it was inheriting the row's
   * stretch and drawing as a tall pill instead of a circle.
   */
  .post-actions .post-action__count {
    height: 1.35rem;
    min-width: 1.35rem;
    flex: 0 0 auto;
    align-self: center;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms: checkboxes, one-time codes, Contact Form 7, button spinners         */
/* -------------------------------------------------------------------------- */

/*
 * One checkbox for the whole site. The box is drawn here so a browser that
 * never runs forms.js still gets it; the tick is a CSS chevron for the same
 * reason, and forms.js swaps in an SVG it can draw stroke by stroke.
 */
/*
 * One number drives the whole control. The box, its corner, its border and the
 * tick are all written as fractions of --kaiyi-check-size, so a context that
 * wants a larger checkbox sets that one property and everything stays in
 * proportion -- which is what stopped happening every time a form overrode the
 * width on its own and left the tick at its original size.
 */
:root {
  --kaiyi-check-size: 22px;
}

input[type="checkbox"]:not([data-kaiyi-check]) {
  position: relative;
  display: inline-grid;
  width: var(--kaiyi-check-size);
  aspect-ratio: 1;
  height: auto;
  flex: 0 0 var(--kaiyi-check-size);
  margin: 0;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  border: max(1.5px, calc(var(--kaiyi-check-size) / 15)) solid var(--theme-color-border);
  border-radius: calc(var(--kaiyi-check-size) / 3.6);
  background: var(--theme-color-surface);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

input[type="checkbox"]:not([data-kaiyi-check]):checked {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
}

/* The wrapper forms.js builds. The input keeps the box; the SVG sits over it. */
.kaiyi-check {
  position: relative;
  display: inline-grid;
  width: var(--kaiyi-check-size);
  aspect-ratio: 1;
  flex: 0 0 var(--kaiyi-check-size);
  place-items: center;
}

.kaiyi-check input[type="checkbox"] {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: max(1.5px, calc(var(--kaiyi-check-size) / 15)) solid var(--theme-color-border);
  border-radius: calc(var(--kaiyi-check-size) / 3.6);
  background: var(--theme-color-surface);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.kaiyi-check input[type="checkbox"]:checked {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
}

.kaiyi-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

/*
 * inset: 0 plus a margin of auto centres the mark on both axes whatever size
 * the box ends up, which is what stops the tick drifting when a form sets its
 * own checkbox dimensions.
 */
.kaiyi-check__mark {
  position: absolute;
  inset: 0;
  width: calc(var(--kaiyi-check-size) * 0.64);
  height: calc(var(--kaiyi-check-size) * 0.64);
  margin: auto;
  fill: none;
  stroke: var(--theme-color-9);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* The no-GSAP path: the dash offset is set inline by forms.js, so a plain
   transition is enough to make the tick draw rather than appear. */
.kaiyi-check__mark path {
  transition: stroke-dashoffset .28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .kaiyi-check__mark path {
    transition: none;
  }
}

/* ------------------------------------------------------- one-time code */

.kaiyi-code {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(6px, 2vw, 10px);
}

/* The field the form submits stays in the DOM but out of the way. */
.kaiyi-code__source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kaiyi-code__box {
  width: 100%;
  min-width: 0;
  max-width: 3.75rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}

.kaiyi-code__box:focus {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-surface);
  outline: none;
}

/* ------------------------------------------------------ Contact Form 7 */

/*
 * Base styling for every form, wherever it is placed. The two shells that had
 * their own rules keep them; this is what a form gets when it is dropped into
 * a page with no shell around it at all.
 */
.wpcf7-form {
  display: grid;
  gap: 1.25rem;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: grid;
  gap: .5rem;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-body-sm);
  font-weight: 600;
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], select, textarea) {
  width: 100%;
  min-height: 50px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
  font: inherit;
  font-weight: 400;
  transition: border-color .2s ease;
}

.wpcf7-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.wpcf7-form :is(input, select, textarea):focus-visible {
  border-color: var(--theme-color-primary);
  outline: none;
}

.wpcf7-form :is(input, select, textarea)::placeholder {
  color: var(--theme-color-text-muted);
}

.wpcf7-form .wpcf7-list-item {
  margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 500;
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  justify-self: start;
  min-height: 50px;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.wpcf7-form .wpcf7-not-valid-tip {
  color: var(--theme-color-danger, #e5484d);
  font-size: var(--theme-font-size-label);
  font-weight: 500;
}

.wpcf7-form .wpcf7-response-output {
  margin: 0;
  padding: .875rem 1rem;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  font-size: var(--theme-font-size-body-sm);
}

.wpcf7-spinner {
  display: none;
}

/* --------------------------------------------------------- button spinner */

/*
 * .ui-spinner on its own is the full-page overlay: fixed, centred on the
 * viewport, 2.5rem across. The auth buttons each contain one, so a submitting
 * button was putting a large spinner in the middle of the screen. Inside a
 * button it becomes an inline mark, and it only exists while the button says
 * it is busy.
 */
.ui-button .ui-spinner,
button .ui-spinner {
  position: static;
  z-index: auto;
  display: none;
  width: 1em;
  height: 1em;
  border-width: 2px;
  border-color: currentColor;
  border-top-color: transparent;
  flex: 0 0 auto;
}

:is(.ui-button, button)[aria-busy="true"] .ui-spinner {
  display: inline-block;
}

:is(.ui-button, button)[aria-busy="true"] {
  cursor: progress;
}

/* -------------------------------------------------------------------------- */
/* Radio buttons, and one form skin for the contact and consultation forms     */
/* -------------------------------------------------------------------------- */

/*
 * The radio is the checkbox's round sibling: same box, same border, same focus
 * ring. The dot is drawn with a scaled pseudo-element so it grows into place
 * rather than appearing, which needs no JavaScript and degrades to a plain dot
 * when motion is reduced.
 */
input[type="radio"] {
  position: relative;
  display: inline-grid;
  width: 22px;
  aspect-ratio: 1;
  height: auto;
  flex: 0 0 22px;
  margin: 0;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--theme-color-border);
  border-radius: 50%;
  background: var(--theme-color-surface);
  cursor: pointer;
  transition: border-color .2s ease;
}

input[type="radio"]::after {
  content: "";
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--theme-color-primary);
  transform: scale(0);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.4);
}

input[type="radio"]:checked {
  border-color: var(--theme-color-primary);
}

input[type="radio"]:checked::after {
  transform: scale(1);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  input[type="radio"]::after {
    transition: none;
  }
}

/*
 * One skin for both forms. It hangs off .kaiyi-contact-form rather than off
 * whichever panel a form happens to sit in, so the consultation form gets the
 * contact form's look by wearing the same class -- and the step machinery it
 * needs stays with .consultation-form-shell, untouched.
 */
.kaiyi-contact-form {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.kaiyi-contact-form .form-section {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.kaiyi-contact-form .form-section > h3 {
  margin: 0;
  color: var(--theme-color-text);
  font-size: var(--theme-font-size-h6);
  line-height: 1.4;
}

.kaiyi-contact-form .form-header {
  display: grid;
  gap: 8px;
}

.kaiyi-contact-form .form-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.3;
}

.kaiyi-contact-form .form-header p {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-body-sm);
  line-height: 1.7;
}

.kaiyi-contact-form .form-field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kaiyi-contact-form .form-field > :is(label, legend) {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--theme-color-text);
  font-size: 1rem;
  font-weight: 600;
}

.kaiyi-contact-form .form-field__hint {
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-label);
  line-height: 1.6;
}

.kaiyi-contact-form .required-badge {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Option lists wrap as a row of pills rather than a tall stack of one-liners. */
.kaiyi-contact-form :is(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
}

.kaiyi-contact-form .wpcf7-list-item {
  flex: 0 1 auto;
  margin: 0;
}

.kaiyi-contact-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}

.kaiyi-contact-form .form-consent {
  color: var(--theme-color-text-muted);
  line-height: 1.7;
}

.kaiyi-contact-form .form-consent a {
  color: var(--theme-color-text);
}

.kaiyi-contact-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.kaiyi-contact-form .form-submit {
  margin: 0;
}

.kaiyi-contact-form :is(.form-actions, .form-submit) :is(button, input[type="submit"]) {
  min-height: 50px;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.kaiyi-contact-form .form-actions .cf7mls_back {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

/* The submit stays on the right of the step buttons on anything but a phone. */
@media (min-width: 480px) {
  .kaiyi-contact-form .form-actions .form-submit,
  .kaiyi-contact-form .form-actions .cf7mls_next:only-child {
    margin-left: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* One checkbox, everywhere                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Two older checkbox treatments outrank the shared one: the consultation form
 * set accent-color, which keeps the native control and its native tick, and
 * the contact form had a second custom implementation with a ::before tick of
 * its own. Both are matched on a container plus the input, so the shared rule
 * could never win. These retire them in place rather than leaving three
 * implementations to disagree.
 */
.consultation-form-shell .wpcf7-list-item input[type="checkbox"],
.contact-layout__form input[type="checkbox"],
.kaiyi-contact-form input[type="checkbox"] {
  width: 22px;
  min-width: 0;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  accent-color: auto;
  border: 1.5px solid var(--theme-color-border);
  border-radius: 6px;
  background: var(--theme-color-surface);
  cursor: pointer;
}

/* The old tick, drawn with borders, is what was still showing. */
.contact-layout__form input[type="checkbox"]::before,
.contact-layout__form input[type="checkbox"]::after {
  content: none !important;
}

.consultation-form-shell .wpcf7-list-item input[type="checkbox"]:checked,
.contact-layout__form input[type="checkbox"]:checked,
.kaiyi-contact-form input[type="checkbox"]:checked {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
}

/* Inside the wrapper the input fills it, so the drawn tick lines up. */
.kaiyi-check input[type="checkbox"],
.consultation-form-shell .kaiyi-check input[type="checkbox"],
.contact-layout__form .kaiyi-check input[type="checkbox"] {
  width: 100%;
}

/*
 * A 22px control against a one-line label sits proud of the text. Giving the
 * label a taller line makes the row read as square rather than as a box that
 * is too big for its caption.
 */
.kaiyi-contact-form .wpcf7-list-item label,
.contact-layout__form .wpcf7-list-item > label,
.consultation-form-shell .wpcf7-list-item label {
  align-items: center;
  gap: 10px;
  line-height: 1.9;
}

/* ------------------------------------------------------------ radio dot */

/*
 * The ring stays put when selected -- only the dot arrives, and it is the
 * secondary colour so a chosen option reads differently from a ticked box.
 */
input[type="radio"]:checked {
  border-color: var(--theme-color-border);
}

input[type="radio"]::after {
  background: var(--theme-color-secondary);
}

/* ------------------------------------------------- optional field badge */

/*
 * The counterpart to the required badge, so every field says which it is
 * rather than leaving the reader to infer it from the absence of a mark.
 */
.kaiyi-contact-form .optional-badge,
.contact-layout__form .optional-badge {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-title, var(--theme-color-text));
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------- actions */

/*
 * Two buttons split the row evenly and never wrap; one takes the whole width.
 * :only-child does the second case without the markup having to say which it
 * is.
 */
.kaiyi-contact-form .form-actions,
.consultation-form-shell .form-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
}

.kaiyi-contact-form .form-actions > *,
.consultation-form-shell .form-actions > * {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.kaiyi-contact-form .form-actions > :only-child,
.consultation-form-shell .form-actions > :only-child {
  flex: 1 1 100%;
}

.kaiyi-contact-form .form-actions :is(button, input[type="submit"]),
.consultation-form-shell .form-actions :is(button, input[type="submit"]) {
  width: 100%;
  white-space: nowrap;
}

.kaiyi-contact-form .form-actions .cf7mls_back,
.consultation-form-shell .form-actions .cf7mls_back {
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-title, var(--theme-color-text));
}

/* The even split is the point, so the row keeps it on a phone too. */
@media (max-width: 767px) {
  .consultation-form-shell .form-actions {
    flex-direction: row;
  }

  .consultation-form-shell .form-actions > * {
    width: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Form controls: one size, wherever the form is placed                       */
/* -------------------------------------------------------------------------- */

/*
 * Both forms declared font: inherit, so their controls took the size of
 * whatever panel they were dropped into -- which is why the two looked
 * different despite identical rules. The shared skin names the size instead,
 * so the forms match by construction rather than by their surroundings
 * happening to agree.
 */
.kaiyi-contact-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select),
.contact-layout__form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select),
.consultation-form-shell :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  width: 100%;
  min-height: 55px;
  padding: .875rem 1rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface);
  color: var(--theme-color-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.kaiyi-contact-form :is(input, textarea, select)::placeholder,
.contact-layout__form :is(input, textarea, select)::placeholder,
.consultation-form-shell :is(input, textarea, select)::placeholder {
  color: var(--theme-color-text-muted);
  font-size: 1rem;
  opacity: 1;
}

.kaiyi-contact-form :is(input, textarea, select):focus,
.contact-layout__form :is(input, textarea, select):focus,
.consultation-form-shell :is(input, textarea, select):focus {
  border-color: var(--theme-color-primary);
  outline: 0;
}

/* The badge is a fill, not an outline; nothing should draw an edge on it. */
.kaiyi-contact-form :is(.optional-badge, .required-badge),
.contact-layout__form :is(.optional-badge, .required-badge) {
  border: 0;
}

/* --------------------------------------------------------------- radio */

/*
 * A pill radius rather than 50%: at this size they read the same, and it keeps
 * the control on the same corner scale as everything else in the form.
 */
input[type="radio"] {
  border-radius: 100px;
}

input[type="radio"]::after {
  border-radius: 100px;
}

/* Selected, the whole control turns secondary -- ring and dot together. */
input[type="radio"]:checked {
  border-color: var(--theme-color-secondary);
}

/* -------------------------------------------------------------------------- */
/* One tick, one box, and the controls that must be left alone                */
/* -------------------------------------------------------------------------- */

/*
 * Nothing draws a mark on a checkbox except the SVG the script adds. Older
 * treatments drew ticks with ::before or ::after and each was scoped to a
 * container, so they outranked anything written for checkboxes in general.
 * This is deliberately blunt, because that is the only shape that cannot be
 * outranked by a more specific ancestor.
 */
input[type="checkbox"]::before,
input[type="checkbox"]::after {
  content: none !important;
}

/*
 * The tick is sized as a share of its box rather than in pixels, so the two
 * stay in proportion at whatever size a form renders the control.
 */
.kaiyi-check__mark {
  width: 64%;
  height: 64%;
  inset: 0;
  margin: auto;
}

/*
 * Controls that are deliberately invisible -- a switch's own input, a styled
 * file field -- must not be given the shared box. The opt-out is the same
 * attribute the script honours, so marking a container exempts it from both.
 */
[data-kaiyi-check="off"] input[type="checkbox"],
.resource-price-toggle__switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  appearance: none;
}

/* ------------------------------------------------------ resource cards */

/*
 * The title takes the heading colour, and the bookmark sits at the right-hand
 * end of the row rather than wherever the title's width leaves it.
 */
.resource-card__title,
.resource-preview__title-row,
.single-resource__title-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.resource-card__bookmark {
  justify-self: end;
  margin-left: auto;
}

/* ------------------------------------------------- one-time code, full width */

/*
 * Six boxes across the field's whole width, sharing it evenly, rather than six
 * fixed boxes left of a gap.
 */
.kaiyi-code {
  width: 100%;
}

.kaiyi-code__box {
  flex: 1 1 0;
  max-width: none;
}

/*
 * The legal line sits at the same left edge as the logo above it. Its links
 * carry the hover reveal, whose wrapper is an inline-grid -- at this size that
 * lifts them off the baseline and drags the line with them.
 */
.auth-page .auth-legal {
  justify-self: stretch;
  text-align: left;
}

.auth-page .auth-legal .hover-reveal__text {
  vertical-align: baseline;
}

/* -------------------------------------------------------------------------- */
/* Desktop menu: the badge rides along, and the submenu steps down a size      */
/* -------------------------------------------------------------------------- */

/*
 * The label and its badge each carry their own reveal, and the menu item is
 * what drives them -- hovering anywhere on the item lifts both together
 * rather than whichever one the pointer happens to be over.
 */
.site-header .menu-item:is(:hover, :focus-within) .hover-reveal__text > span:first-child {
  transform: translateY(-110%);
}

.site-header .menu-item:is(:hover, :focus-within) .hover-reveal__text > span:last-child {
  transform: translateY(0);
}

@media (min-width: 1025px) {
  /* A submenu is subordinate to the item that opens it, so it reads a step
     down rather than at the same weight. */
  .site-header__middle .sub-menu > li > a {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* -------------------------------------------------------------------------- */
/* underline-motion: one behaviour everywhere                                 */
/* -------------------------------------------------------------------------- */

/*
 * The contact page's version was the one behaving correctly, and it differs
 * from the general rule only in sitting 3px clear of the text. That is the
 * measurement everywhere now.
 */
a.underline-motion,
.single-content__body a,
.article-excerpt a,
.author-card a,
.site-footer a {
  padding-bottom: 3px;
}

/*
 * The rising label needs clipping; the link does not. .has-hover-reveal puts
 * overflow: hidden on the link itself, which cuts off the underline drawn at
 * its bottom edge -- so the two treatments could not run together anywhere the
 * link carried both. Clipping the text wrapper instead keeps the reveal and
 * lets the underline through.
 */
a.underline-motion.has-hover-reveal {
  overflow: visible;
}

a.underline-motion.has-hover-reveal .hover-reveal__text {
  overflow: hidden;
}

/* Auth links are ordinary underline-motion links; nothing special remains. */
.auth-page a.has-hover-reveal {
  overflow: visible;
  text-decoration: none;
}

.auth-page a.has-hover-reveal .hover-reveal__text {
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Resource card title row                                                    */
/* -------------------------------------------------------------------------- */

/*
 * The three-line clamp is for the card's summary and is written as "any span
 * child of the content". The title row used to be a span too, so it was given
 * display: -webkit-box and stopped being a grid -- which is why the bookmark
 * sat against the title instead of at the end of the row. The row is a div in
 * the markup now, so the clamp cannot reach it and this only has to say what
 * the row is.
 */
.resource-card__content > .resource-preview__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/*
 * The bookmark is a round button, the same one the preview panel uses, rather
 * than a bare glyph beside the title.
 */
.resource-card__bookmark {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  justify-self: end;
  border-radius: 50% !important;
  background: var(--theme-color-surface-muted) !important;
  color: var(--theme-color-text) !important;
  transition: background-color .2s ease, color .2s ease;
}

.resource-card__bookmark svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

.resource-card__bookmark:is(:hover, :focus-visible) {
  background: var(--theme-color-border) !important;
}

.resource-card__bookmark.is-saved {
  background: var(--theme-color-secondary) !important;
  color: var(--theme-color-on-secondary) !important;
}

/* -------------------------------------------------------------------------- */
/* Editor tables belong to the block, not to a wrapper                        */
/* -------------------------------------------------------------------------- */

/*
 * The table treatment was written against .single-content__body, so it only
 * reached the templates that happen to use that wrapper. A Gutenberg table
 * should look the same wherever it is placed, so the rules hang off the block
 * itself and off the content wrappers the theme uses.
 */
.wp-block-table table,
:is(.single-content__body, .entry-content, .wp-block-post-content) table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 17px;
}

.wp-block-table :is(th, td),
:is(.single-content__body, .entry-content, .wp-block-post-content) :is(th, td) {
  padding: .875rem 1rem;
  border: 0;
  border-right: 1px solid var(--theme-color-border);
  border-bottom: 1px solid var(--theme-color-border);
  color: var(--theme-color-text);
  text-align: left;
  vertical-align: top;
}

.wp-block-table thead :is(th, td),
:is(.single-content__body, .entry-content, .wp-block-post-content) thead :is(th, td) {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
  font-weight: 700;
  /* A white tenth reads as a divider on the primary fill without becoming a
     hard rule. */
  border-right-color: rgba(255, 255, 255, .1);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.wp-block-table tbody :is(th, td),
:is(.single-content__body, .entry-content, .wp-block-post-content) tbody :is(th, td) {
  background: var(--theme-color-surface);
}

.wp-block-table tr > :last-child,
:is(.single-content__body, .entry-content, .wp-block-post-content) tr > :last-child {
  border-right: 0;
}

.wp-block-table tbody tr:last-child > *,
:is(.single-content__body, .entry-content, .wp-block-post-content) tbody tr:last-child > * {
  border-bottom: 0;
}

/* Wide tables scroll in their own box. The block already does; this is for a
   table written without the block wrapper. */
:is(.single-content__body, .entry-content, .wp-block-post-content) figure.wp-block-table {
  overflow-x: auto;
  border-radius: var(--theme-radius-medium);
}

/* -------------------------------------------------------------------------- */
/* Event page                                                                 */
/* -------------------------------------------------------------------------- */

/* A cover badge is a label, not a paragraph: it never breaks across lines. */
.event-status-mask .event-cover-badge {
  white-space: nowrap;
}

/*
 * The remaining-places line and the status line repeat what the cover badges
 * already say. The status line stays in the document because it is the live
 * region that announces the result of registering -- it is the badge that
 * shows it, so this only stops it being said twice on screen.
 */
.event-registration__spots {
  display: none;
}

.event-registration [data-event-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Cancel and the calendar are one row of two: an even split that does not
 * wrap, so the pair reads as a single control rather than as a button with an
 * afterthought below it.
 */
@media (min-width: 768px) {
  /*
   * The two controls live in different children of the panel, so the split has
   * to be made on the panel itself. Only once both are actually on screen --
   * before registering there is one button and it should have the full width.
   */
  .event-registration:has(.event-registration__actions [data-event-action="cancel"]:not([hidden])):has(.event-calendar:not([hidden])) {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .event-registration:has(.event-registration__actions [data-event-action="cancel"]:not([hidden])):has(.event-calendar:not([hidden])) > *:not(.event-registration__actions):not(.event-calendar) {
    grid-column: 1 / -1;
  }

  .event-registration__actions :is(button, a),
  .event-calendar__summary {
    width: 100%;
    white-space: nowrap;
  }
}

/* The dropdown reads as part of the panel rather than as a hole in it. */
.event-calendar__links {
  background: var(--theme-color-surface-muted);
  border-radius: var(--theme-radius-medium);
  overflow: hidden;
}

.event-calendar__links a {
  display: block;
  padding: .75rem 1rem;
}

.event-calendar__links a:hover {
  background: var(--theme-color-border);
}

/* An accordion heading is a control, not a page title. */
.event-section-title,
.event-venue-note > summary.event-section-title {
  font-size: var(--theme-font-size-h6);
  line-height: 1.4;
}

/* Hosts sit with the attendees, marked as hosts. */
.event-attendees__list--hosts em {
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-caption);
  font-style: normal;
}

.event-single__meta {
  gap: 0;
}

@media (min-width: 768px) {
  .event-about {
    padding-top: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Phone navigation actions                                                   */
/* -------------------------------------------------------------------------- */

/*
 * The two buttons at the foot of the phone menu carry an icon beside their
 * label. The icon had no size of its own, so it inherited whatever the SVG
 * happened to declare and sat off the text's centre line.
 */
@media (max-width: 1024px) {
  .mobile-nav-dropdown__actions > a {
    gap: 10px;
  }

  .mobile-nav-dropdown__actions > a svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    align-self: center;
  }

  /* These buttons opt into the hover reveal, which wraps the icon and the
     label together; without this the wrapper flattens their row. */
  .mobile-nav-dropdown__actions > a .hover-reveal__text {
    gap: inherit;
    width: 100%;
  }

  .mobile-nav-dropdown__actions > a .hover-reveal__text > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    width: 100%;
  }

  .mobile-nav-dropdown__actions > a .hover-reveal__text svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Code blocks                                                                */
/* -------------------------------------------------------------------------- */

/*
 * A code block sits on the muted surface, like every other inset panel, and
 * carries its copy button in the top-right corner. The button is positioned
 * against the block, so the block has to be the containing block -- and the
 * padding on that side has to leave room for it, or long lines run underneath.
 */
.wp-block-code {
  position: relative;
  padding: 1.25rem;
  padding-right: 3.75rem;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
}

.wp-block-code code {
  display: block;
  overflow-x: auto;
  background: none;
  font-size: var(--theme-font-size-body-sm);
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
}

.kaiyi-code-copy {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface);
  color: var(--theme-color-text-muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.kaiyi-code-copy svg {
  width: 1.15rem;
  height: 1.15rem;
}

.kaiyi-code-copy:is(:hover, :focus-visible) {
  color: var(--theme-color-text);
}

.kaiyi-code-copy.is-copied {
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

.kaiyi-code-copy.is-failed {
  color: var(--theme-color-danger, #e5484d);
}

@media (prefers-reduced-motion: reduce) {
  .kaiyi-code-copy {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   Event: the venue accordion, and who is coming
   -------------------------------------------------------------------------- */

/*
 * A closed accordion should be exactly as tall as its own control.
 *
 * It was a grid with a gap, and a closed <details> still leaves its hidden
 * content as a track -- so the box carried the gap plus an empty row and stood
 * half as tall again as the title inside it. Giving the summary the padding
 * makes the closed height the control's height, whatever the browser does with
 * the part it is not showing.
 */
.event-venue-note {
  display: block;
  gap: 0;
  padding: 0;
}

.event-venue-note > summary {
  padding: 20px clamp(20px, 3vw, 24px);
}

.event-venue-note > p {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 24px) 20px;
}

/*
 * Attendees read down the page, not across it.
 *
 * Wrapped inline rows put names at whatever x-position the previous name
 * happened to end at, so nothing lines up and the host badges scatter. One
 * person per row gives the avatars a single left edge and lets the badge sit
 * at the end of the line where it can be scanned.
 */
.event-attendees__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-attendees__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.event-attendees__list li > strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* At the end of the row rather than tucked against the name. */
.event-attendees__list--hosts em {
  margin-left: 0;
  justify-self: end;
}

/* --------------------------------------------------------------------------
   Touch: no zoom the visitor did not ask for
   -------------------------------------------------------------------------- */

/*
 * iOS zooms the page whenever a field it is about to focus renders below 16px,
 * and leaves it zoomed -- so tapping a search box quietly rescales the whole
 * layout and the visitor has to pinch back. 16px is the threshold, not a design
 * choice, which is why it is written in pixels and only on touch pointers.
 *
 * Pinch-zoom is untouched. Disabling that is an accessibility loss, and it is
 * not what makes the page jump.
 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/*
 * Double-tap-to-zoom on a control the visitor is trying to press is never what
 * they meant, and it is where the old 300ms tap delay comes from. Scrolling and
 * pinch-zoom over these elements still work.
 */
button,
[role="button"],
.ui-button,
summary,
label,
a {
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   underline-motion: a line that is replaced, not one that appears
   -------------------------------------------------------------------------- */

/*
 * The line is always there in full primary. On hover the resting line leaves to
 * the right and a new one arrives from the left, so the link reads as underlined
 * at rest and the motion is a swap rather than a reveal.
 *
 * Two pseudo-elements, one leaving and one arriving, with the delay carried by
 * whichever is second in each direction -- so the cross happens on the way out
 * as well as on the way in.
 */
a.underline-motion::before,
.single-content__body a::before,
.article-excerpt a::before,
.author-card a::before,
.site-footer a::before {
  background: var(--theme-color-primary);
  opacity: 1;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1) .12s;
}

a.underline-motion:hover::before,
.single-content__body a:hover::before,
.article-excerpt a:hover::before,
.author-card a:hover::before,
.site-footer a:hover::before {
  transform: scaleX(0);
  transition-delay: 0s;
}

a.underline-motion::after,
.single-content__body a::after,
.article-excerpt a::after,
.author-card a::after,
.site-footer a::after {
  transform-origin: left;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

a.underline-motion:hover::after,
.single-content__body a:hover::after,
.article-excerpt a:hover::after,
.author-card a:hover::after,
.site-footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  transition-delay: .12s;
}

@media (prefers-reduced-motion: reduce) {
  a.underline-motion::before,
  a.underline-motion::after,
  .single-content__body a::before,
  .single-content__body a::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Resource preview: full-bleed media, and a title that reads as a title
   -------------------------------------------------------------------------- */

/*
 * The drawer is a sheet pulled up from the edge of the screen, so its cover
 * belongs edge to edge. Inset by 1.25rem with a radius it read as a card
 * floating inside another card.
 */
@media (max-width: 767px) {
  .resource-preview-drawer .resource-preview__image {
    width: 100%;
    max-height: 15rem;
    margin: 0;
    border-radius: 0;
  }
}

/* Titles carry the heading colour; the body text around them does not. */
.resource-preview__title-row > :is(strong, h1, h2, h3),
.resource-card__content strong,
.single-resource__header h1 {
  color: var(--theme-color-title);
}


/* --------------------------------------------------------------------------
   Event attendees: one list, and it folds away
   -------------------------------------------------------------------------- */

/*
 * The same control as the venue note, so the two sections behave alike: the
 * summary carries the padding and the closed height is the control's own.
 */
.event-attendees {
  display: block;
  gap: 0;
  padding: 0;
}

.event-attendees > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px clamp(20px, 3vw, 24px);
  color: var(--theme-color-title);
  cursor: pointer;
  list-style: none;
}

.event-attendees > summary::-webkit-details-marker {
  display: none;
}

.event-attendees > summary::after {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}

.event-attendees[open] > summary::after {
  transform: rotate(180deg);
}

/*
 * A list with no marker has no need of the space a marker would have taken.
 * The browser's own padding-inline-start was indenting every name.
 */
.event-attendees__list {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 24px) 20px;
  list-style: none;
}

/* Nobody is labelled: everyone shown is somebody who will be there. */
.event-attendees__list li {
  grid-template-columns: auto minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Mobile table of contents: room to sit, and a limit to how tall it gets
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .article-toc--mobile {
    /* Clear of the bottom edge, and of a phone's home indicator. */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    /* Room above and below the row, closed and open alike. Written on both
       states because the open state carries its own padding. */
    padding-block: 1.25rem;
  }

  .article-toc--mobile[open] {
    padding-block: 1.75rem;
  }

  /*
   * A long list opened upward until it ran under the header. The box is capped
   * at what is left of the screen once the header and its own resting gap are
   * accounted for, and the list scrolls inside it.
   */
  .article-toc--mobile[open] {
    max-height: calc(100dvh - var(--kaiyi-toc-headroom, 140px));
  }

  .article-toc--mobile[open] ol {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /*
   * The chevron points the way the box will move.
   *
   * It is docked at the bottom and opens upward, so closed means "up" and open
   * means "down" -- the reverse of a panel that drops.
   */
  .article-toc--mobile summary::after {
    transform: rotate(180deg) !important;
  }

  .article-toc--mobile[open] summary::after {
    transform: rotate(0deg) !important;
  }
}

/* --------------------------------------------------------------------------
   Post actions: sharing sits apart
   -------------------------------------------------------------------------- */

/*
 * On a wide screen the button says what it is for. On a narrow one there is no
 * room for the sentiment, and 分享 alone is unambiguous.
 */
.post-action__long {
  display: none;
}

@media (min-width: 1025px) {
  .post-action__long {
    display: inline;
  }
}

/*
 * Sharing is the one action aimed outward, and on a phone the row reads better
 * with it held apart from the two that act on the article itself.
 */
@media (max-width: 767px) {
  .post-actions .post-action--share {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Dropdown menus: nothing to fall through on the way down
   -------------------------------------------------------------------------- */

/*
 * The panel sits 1.25rem below its menu item, and the pointer had to cross that
 * gap to reach it. Crossing it left the item, :hover went false and the panel
 * closed under the cursor -- so the only way to open a submenu reliably was to
 * move fast enough to beat the transition.
 *
 * This bridges the gap without closing it: an invisible strip the height of the
 * gap, belonging to the panel, so the pointer is still inside the menu item the
 * whole way down. It only exists while the panel is open, because that is the
 * only time the panel takes pointer events at all.
 */
.site-header__middle nav .sub-menu::before,
.site-header__top-nav .sub-menu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 1.5rem;
  content: "";
}

/* --------------------------------------------------------------------------
   Related posts: a column that breathes, and a button its own size
   -------------------------------------------------------------------------- */

/*
 * The left column is a flex column with space-between, which puts all the room
 * between the header and the button on a tall screen and none at all when the
 * two are stacked on a phone. A row gap gives it a floor.
 */
.home-posts-slider__left {
  row-gap: 1.5rem;
}

/*
 * The related block has no previous/next controls, so its call to action has
 * nothing to sit opposite and stretched to the full width of the column. It is
 * as wide as its own words.
 */
.home-posts-slider--related .slider-cta-button {
  align-self: flex-start;
  width: auto;
}

/* --------------------------------------------------------------------------
   Member bookmark slider: how much of the next card you can see
   -------------------------------------------------------------------------- */

/*
 * Three and a half cards on a desktop, one and a half on a tablet, one on a
 * phone. The half is the point: a card cut off at the edge says there is more
 * to the right, which a row of whole cards does not.
 *
 * The arrows already move one card at a time -- they step through the snap
 * points the cards create -- so only the widths are set here.
 */
.member-bookmark-section .home-posts-slider__track {
  padding-right: 0;
  scroll-padding-right: 0;
}

.member-bookmark-section .member-bookmark-card {
  flex: 0 0 100%;
}

@media (min-width: 768px) {
  .member-bookmark-section .member-bookmark-card {
    flex: 0 0 calc((100% - (0.5 * 1.5rem)) / 1.5);
  }
}

@media (min-width: 1025px) {
  .member-bookmark-section .member-bookmark-card {
    flex: 0 0 calc((100% - (2.5 * 1.5rem)) / 3.5);
  }
}

/* --------------------------------------------------------------------------
   Footer trims
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /*
   * The footer block is inset from the page on every side, so square corners at
   * the bottom read as the block having been cut off rather than placed.
   */
  .site-footer.kaiyi-footer-section .kaiyi-footer {
    border-radius: var(--kaiyi-footer-radius);
  }

  /*
   * The notch that carves the page colour into the footer's top right corner.
   * At the full footer radius the curve was wider than the notch itself, so it
   * read as a bite taken out of the corner rather than a fold.
   */
  .site-footer.kaiyi-footer-section .kaiyi-cutout-top-right {
    border-bottom-left-radius: calc(var(--kaiyi-footer-radius) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* The social rail runs down the left edge; the columns were starting under
     it rather than beside it. */
  .site-footer.kaiyi-footer-section .kaiyi-footer-top {
    padding-left: clamp(120px, 15vw, 170px);
  }
}

@media (min-width: 1025px) {
  /* Sits with the columns beside it rather than level with their headings. */
  .site-footer.kaiyi-footer-section .kaiyi-footer-contact {
    margin-top: clamp(24px, 3vw, 48px);
  }
}

/* --------------------------------------------------------------------------
   Text that is only for screen readers
   -------------------------------------------------------------------------- */

/*
 * Both spellings, because the markup uses both: .sr-only in the post actions
 * and .screen-reader-text in the breadcrumb. Neither was defined anywhere, so
 * the words were simply on the page.
 *
 * Clipped rather than display: none, which would take them out of the
 * accessibility tree along with the sighted view -- the opposite of the point.
 */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Breadcrumbs: the house
   -------------------------------------------------------------------------- */

/*
 * An inline SVG with a viewBox and no dimensions has no intrinsic size, so the
 * link collapsed and the first crumb disappeared entirely.
 */
.breadcrumbs__home {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__home-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* --------------------------------------------------------------------------
   Footer on a phone
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The block is inset here too, so it is rounded here too. */
  .site-footer.kaiyi-footer-section .kaiyi-footer {
    border-radius: var(--kaiyi-footer-radius);
  }
}

/* --------------------------------------------------------------------------
   Event: the attendee summary, and the cover badges
   -------------------------------------------------------------------------- */

/*
 * The summary is a space-between row so the chevron sits at its end. Its label
 * has to be one item, or "參加者（", the number and "）" are three and get
 * spread across the whole width.
 */
.event-attendees__label {
  display: inline-flex;
  align-items: baseline;
}

/*
 * Side by side. Stacked, the two badges made a column down the corner of the
 * cover that got taller every time another fact was added.
 */
.event-status-mask {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Odds and ends
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /*
   * The title had the whole screen on a desktop and the same weight on a
   * phone, where it ran to five or six lines before the article began.
   */
  .single-post .article-title,
  .single-resource .article-title,
  .single-event .article-title {
    font-size: 2.125rem;
  }
}

/*
 * A disabled arrow is not a thing to press, so it does not draw a button
 * around itself. The dimming already says it is out of reach.
 */
.home-posts-slider__btn:disabled,
.home-posts-slider__btn[disabled] {
  border-color: transparent;
}

/* The label is stretched to the circle's circumference either way, so a larger
   size shows as taller glyphs rather than a longer line. */
.sticky-contact__label text {
  font-size: 10.5px;
}

/* --------------------------------------------------------------------------
   Home hero media: dressed as footage, and it opens out as you scroll
   -------------------------------------------------------------------------- */

/*
 * --home-hero-open runs 0 → 1 as the hero leaves the screen. At 0 the media
 * sits in its column; at 1 it has taken the width of the whole row, still
 * inside the page's own left and right padding. Nothing is measured in the
 * stylesheet, so the two never disagree about where the edge is.
 */
/*
 * The media has the row to itself, and grows into it: wider and taller as the
 * hero scrolls away, anchored top-left so it opens down and to the right.
 * --home-hero-open runs 0 → 1 and nothing else in the row moves, because
 * nothing else is in the row.
 */
.home-hero__middle {
  display: block;
}

/*
 * The frame stays where it is and gets bigger, rather than getting bigger and
 * pushing the page down. Growing the layout box made the hero taller, so the
 * thing that was supposed to fill the screen simply scrolled off the bottom of
 * it instead.
 *
 * Sticky inside the hero, so it holds still while the scroll plays out and
 * stops at the section's own edge -- it can never ride over what comes next.
 */
/*
 * The pin sits one growth-height lower than where the open frame ends up,
 * because the frame now opens upwards from its bottom edge: the space it will
 * rise into has to be above it, not below. --home-hero-grow is measured by the
 * script from the same numbers that drive the scale, so the two cannot
 * disagree, and at 0 this is the plain header offset it always was.
 */
.home-hero__middle {
  position: sticky;
  top: calc(var(--site-header-sticky-height, 85px) + 24px + var(--home-hero-grow, 0px));
}

.home-hero__media {
  position: relative;
  z-index: 1;
  width: var(--home-hero-start, 72%);
  aspect-ratio: 16 / 9;
  height: auto;
  /* From its own size to the full width of the row: 1 → 1 / start. The pivot
     is the bottom left corner, so that corner stays put and the frame opens
     out to the right and up into the room the pin left above it. Anchoring the
     top instead sent the bottom edge off the screen, which is where the part
     of the picture you were watching went. */
  transform: scale(calc(1 + var(--home-hero-open, 0) * (var(--home-hero-full, 1) - 1)));
  transform-origin: 0 100%;
  will-change: transform;
}

/* The image keeps filling whatever width the frame has arrived at. */
.home-hero__media :is(img, .home-hero__media-placeholder) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------- the video furniture -------------------------- */

.home-hero__media-chrome {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  left: clamp(14px, 2vw, 24px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--theme-radius-extra);
  background: color-mix(in srgb, #000 55%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  pointer-events: none;
}

/* A recording dot rather than a play triangle: this is meant to read as
   something already running, not something waiting to be started. */
.home-hero__media-state {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-color-primary);
  animation: home-hero-pulse 2s ease-in-out infinite;
}

.home-hero__media-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.home-hero__media-time b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.home-hero__media-progress {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, #fff 25%, transparent);
  overflow: hidden;
}

.home-hero__media-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  border-radius: 2px;
  background: var(--theme-color-primary);
  transform-origin: left;
  animation: home-hero-scrub 24s linear infinite;
}

@keyframes home-hero-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@keyframes home-hero-scrub {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__media {
    transition: none;
  }

  .home-hero__media-state,
  .home-hero__media-progress i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Home steps: edge to edge, and a feed rather than a slideshow
   -------------------------------------------------------------------------- */

/*
 * Out past .site-main's padding and back in by its own, so the block spans the
 * viewport while its contents keep the page's own left and right margin. The
 * negative margin uses the same token as the padding it undoes, so a change to
 * one cannot leave the other behind.
 */
.home-sticky-steps {
  margin-inline: calc(-1 * var(--theme-page-padding));
  padding-inline: var(--theme-page-padding);
  background: var(--theme-color-surface-muted);
  padding-block: clamp(3rem, 6vw, 6rem);
  border-radius: var(--theme-radius-heavy);
}

/* The feed and the picture, with the picture given the larger share. */
.home-sticky-steps__sticky {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  overflow: visible;
}

/*
 * Every step on the page at once, down a single rail. Crossfading one card
 * over another meant the reader could never see where they were in the list,
 * or that there was a list at all.
 */
.home-sticky-steps__feed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-sticky-steps__feed .home-sticky-steps__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 1.5vw, 20px);
  inset: auto;
  opacity: .35;
  padding: clamp(12px, 1.4vw, 18px) 0;
  pointer-events: auto;
  transform: none;
  transition: opacity .4s ease, color .4s ease;
}

.home-sticky-steps__feed .home-sticky-steps__card.is-active {
  opacity: 1;
  transform: none;
}

/* The rail: a line down the numbers, filled in at the step being read. */
.home-sticky-steps__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--theme-color-border);
  border-radius: 50%;
  background: var(--theme-color-surface);
  color: var(--theme-color-text-muted);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.home-sticky-steps__card.is-active .home-sticky-steps__marker {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-9);
}

/* Joins one number to the next, so the column reads as one thread. */
.home-sticky-steps__card:not(:last-child) .home-sticky-steps__marker::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.5px;
  height: calc(clamp(1rem, 2vw, 1.75rem) + clamp(24px, 2.8vw, 36px));
  content: "";
  background: var(--theme-color-border);
  transform: translateX(-50%);
}

.home-sticky-steps__body {
  min-width: 0;
}

.home-sticky-steps__feed .home-sticky-steps__card h2 {
  margin: 0;
}

/* The picture keeps its own frame and only the image inside it changes. */
.home-sticky-steps__visuals {
  overflow: hidden;
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface);
}

@media (max-width: 767px) {
  .home-sticky-steps__sticky {
    grid-template-columns: 1fr;
  }

  .home-sticky-steps__feed {
    gap: .5rem;
  }

  .home-sticky-steps__feed .home-sticky-steps__card {
    padding: 8px 0;
  }

  /* Too short to draw a thread between at this size. */
  .home-sticky-steps__card:not(:last-child) .home-sticky-steps__marker::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Consultation form spacing
   -------------------------------------------------------------------------- */

.consultation-form-shell .form-header,
.kaiyi-contact-form .form-header {
  margin-block: 10px;
}

.consultation-form-shell .form-section,
.kaiyi-contact-form .form-section {
  gap: 25px;
}

/* A section heading was the same size as the questions under it. */
.consultation-form-shell .form-section > h3,
.kaiyi-contact-form .form-section > h3 {
  font-size: 1.5rem;
}

/* The tick is hidden by opacity, not only by retracting the dash: a round cap
   is painted even when the dash it belongs to has no length, so a fully
   retracted tick left a dot in the middle of the box. */
.kaiyi-check__mark path {
  transition: stroke-dashoffset .28s ease, opacity .16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .kaiyi-check__mark path {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Home steps, rebuilt: a picture and a list that advances itself
   -------------------------------------------------------------------------- */

/*
 * Out past .site-main's padding and not back in: the picture reaches the edge
 * of the screen, which is the point of taking it out of the container at all.
 */
.home-steps {
  margin-block: clamp(3rem, 6vw, 6rem);
  margin-inline: calc(-1 * var(--theme-page-padding));
}

.home-steps__flex {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5.5rem);
}

/* ------------------------------- the picture ------------------------------ */

/*
 * Every slide stacked in one frame, so the frame never resizes and nothing
 * below it moves while the list is read.
 */
/* Square, and flush with the edge it reaches. */
.home-steps__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 0;
  background: var(--theme-color-surface-muted);
}

.home-steps__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.home-steps__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.home-steps__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-steps__slide-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, var(--theme-color-primary), var(--theme-color-primary-hover));
  color: var(--theme-color-9);
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: .2em;
}

/* -------------------------------- the list -------------------------------- */

/* The text keeps the page's margin; only the picture gives it up. */
.home-steps__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
  padding-right: var(--theme-page-padding);
}

.home-steps__header {
  display: grid;
  gap: .75rem;
}

.home-steps__eyebrow {
  color: var(--theme-color-summary);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.home-steps__heading {
  margin: 0;
  color: var(--theme-color-title);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.2;
}

.home-steps__item {
  padding-block: clamp(1rem, 1.8vw, 1.5rem) 0;
}

.home-steps__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 1.6vw, 22px);
}

.home-steps__num {
  color: var(--theme-color-text);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .2;
  transition: opacity .4s ease;
}

.home-steps__item.is-selected .home-steps__num {
  opacity: 1;
}

.home-steps__text h3 {
  margin: 0;
}

/*
 * The title is the control. It is a button so it can be reached by keyboard
 * and says whether its description is open.
 */
.home-steps__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-color-title);
  font: inherit;
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.home-steps__btn:hover {
  color: var(--theme-color-primary);
}

.home-steps__desc {
  padding-top: .75rem;
  color: var(--theme-color-summary);
  line-height: 1.8;
}

.home-steps__desc p {
  margin: 0 0 .5rem;
}

.home-steps__sub {
  color: var(--theme-color-primary);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/*
 * The line under each step fills over the time it is selected, so the reader
 * can see how long they have before it moves on. Auto-advance without it is a
 * carousel that changes under you for no visible reason.
 */
.home-steps__line {
  position: relative;
  height: 1.5px;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--theme-color-border);
}

.home-steps__progress {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  background: var(--theme-color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .home-steps__slide {
    transition: none;
  }

  /* Nothing advances on its own, so a line that never fills would only
     mislead. */
  .home-steps__progress {
    display: none;
  }
}

@media (max-width: 1024px) {
  .home-steps__flex {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .home-steps__media {
    aspect-ratio: 16 / 9;
  }

  .home-steps__panel {
    padding-inline: var(--theme-page-padding);
  }
}

/* --------------------------------------------------------------------------
   Scroll highlight: one clip per line, not one tween per glyph
   -------------------------------------------------------------------------- */

/*
 * The line holds its muted text; a coloured copy sits exactly on top of it,
 * clipped to nothing, and the scroll opens the clip. One composited property
 * per line, so the work per frame no longer grows with the length of the
 * sentence.
 */
.highlight-text-on-scroll__line {
  position: relative;
  /* Colour is no longer animated, so promising it costs a layer for nothing. */
  will-change: auto;
}

/*
 * Each line takes its share of --highlight-progress and works out its own
 * position in CSS, so the script writes one number per frame however many
 * lines there are. The shares overlap deliberately: a line starts before the
 * one above it has finished, which is what makes the sweep read as continuous.
 */
.highlight-text-on-scroll__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
 * The reveal is this rectangle sliding off, not the text being clipped.
 * Clipping repainted the words on every frame and they are very large; moving
 * an opaque block is compositing only, so their size stops mattering.
 */
.highlight-text-on-scroll__mask {
  position: absolute;
  inset: 0;
  background: var(--theme-color-background);
  transform: translate3d(
    calc(
      100% * clamp(
        0,
        (var(--highlight-progress, 0) * (var(--highlight-count, 1) * 0.62 + 0.38) - var(--highlight-index, 0) * 0.62),
        1
      )
    ),
    0,
    0
  );
  will-change: transform;
}

/* Both copies have to wrap identically or the coloured one drifts off the
   words underneath it. */
.highlight-text-on-scroll__fill {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: inherit;
  text-align: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .highlight-text-on-scroll__fill {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Header, between a tablet and a wide desktop
   -------------------------------------------------------------------------- */

/*
 * Two complete labels rather than one with a piece hidden inside it. The
 * hover-reveal wraps each child in its own line, so a 預約 in its own span
 * became a line of its own and the button read as two.
 */
.site-header__consult-short {
  display: none;
}

/*
 * There is a band where the desktop header is still shown but no longer fits:
 * the menu items wrap to two and three lines and the row grows to twice its
 * height. Everything that has a shorter form takes it before that happens.
 */
@media (min-width: 1025px) and (max-width: 1400px) {
  /*
   * The name alone, which is what the sticky header already shows. Scoped
   * through .site-header__middle because the rule that hides the short form
   * while the header is not stuck is written that way -- a shorter selector
   * here would hide the long name and never reveal the short one.
   */
  .site-header__middle .site-header__logo-desktop .logo-normal {
    display: none;
  }

  .site-header__middle:not(.is-sticky) .site-header__logo-desktop .logo-sticky {
    display: inline;
  }

  /* The icon says "account" on its own. */
  .site-header__account span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header__consult-full {
    display: none;
  }

  .site-header__consult-short {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   Service comparison
   -------------------------------------------------------------------------- */

.service-compare {
  margin-top: clamp(3rem, 6vw, 6rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.service-compare__head {
  display: grid;
  gap: .75rem;
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.service-compare__head h2 {
  margin: 0;
  color: var(--theme-color-title);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.3;
}

.service-compare__head p {
  margin: 0;
  color: var(--theme-color-summary);
  line-height: 1.8;
}

/* Narrow screens scroll the table rather than squeezing three columns into a
   phone; the page itself never scrolls sideways. */
.service-compare__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.service-compare__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.service-compare__table th,
.service-compare__table td {
  padding: clamp(.875rem, 1.6vw, 1.25rem) clamp(.75rem, 1.4vw, 1.25rem);
  border-bottom: 1px solid var(--theme-color-border);
  vertical-align: middle;
}

.service-compare__table thead th {
  padding-bottom: 1rem;
  color: var(--theme-color-title);
  text-align: center;
}

.service-compare__table thead th:first-child {
  border-bottom-color: transparent;
}

.service-compare__table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

/* Every other row shaded, so the eye can carry a long label across to its
   column without losing the line. */
.service-compare__table tbody tr:nth-child(odd) :is(th, td) {
  background: color-mix(in srgb, var(--theme-color-surface) 55%, transparent);
}

.service-compare__table tbody th {
  width: 46%;
  color: var(--theme-color-text);
  font-weight: 600;
}

.service-compare__table tbody td {
  text-align: center;
}

.service-compare__who {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
}

.service-compare__note {
  display: block;
  margin-top: .25rem;
  color: var(--theme-color-summary);
  font-size: .8125rem;
  font-weight: 500;
}

.service-compare__hint {
  display: block;
  margin-top: .25rem;
  color: var(--theme-color-summary);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.6;
}

.service-compare__yes {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--theme-color-primary);
}

.service-compare__no {
  color: var(--theme-color-text-muted);
}

/* --------------------------------------------------------------------------
   Home steps: the accordion opens and closes
   -------------------------------------------------------------------------- */

/*
 * A grid with one row that goes from 0fr to 1fr. It is the only way to
 * animate to a height nobody has measured, and it needs no JavaScript reading
 * scrollHeight on every open.
 */
.home-steps__desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}

.home-steps__item.is-selected .home-steps__desc {
  grid-template-rows: 1fr;
}

.home-steps__desc-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  /* Out of the reading order while closed, and only once it has finished
     closing -- visibility cannot be interpolated, so it waits. */
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .45s;
}

.home-steps__item.is-selected .home-steps__desc-inner {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .12s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .home-steps__desc,
  .home-steps__desc-inner {
    transition: none;
  }
}

@media (max-width: 1024px) {
  /* Room above and below the list once it sits under the picture rather than
     beside it. */
  .home-steps__panel {
    padding-block: clamp(1.75rem, 5vw, 3rem);
  }
}

/* --------------------------------------------------------------------------
   About video: the frame carries the player
   -------------------------------------------------------------------------- */

/*
 * The controls sit on the frame, so the same set serves a real video and the
 * placeholder that stands in for one. Nothing here knows which it is except
 * the two rules that take the cursor away when there is nothing to control.
 */
.about-video {
  position: relative;
}

.about-video__controls {
  position: absolute;
  bottom: clamp(12px, 1.6vw, 20px);
  left: clamp(12px, 1.6vw, 20px);
  z-index: 2;
  display: flex;
  gap: 8px;
}

/*
 * A muted surface, with a hairline: the frame behind these is a video on one
 * page and a muted panel on another, and a muted button on a muted panel is
 * an invisible button. The border is what keeps them readable on either.
 */
.about-video__control {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--theme-color-border);
  border-radius: 50%;
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* The same hover the button system uses: everything that is not primary
   arrives at primary, border included. */
.about-video--live .about-video__control:hover {
  border-color: var(--theme-color-primary);
  background: var(--theme-color-primary);
  color: var(--theme-color-on-primary);
}

.about-video__icon {
  width: 20px;
  height: 20px;
}

/* [hidden] is only a user-agent display rule, and inline-flex above would beat
   it on the button's own children if this were left out. */
.about-video__icon[hidden] {
  display: none;
}

/* The cutout, bottom right. Same two curves as the card masks, mirrored: the
   fillet that sat above a top-right notch belongs below a bottom-right one. */
.about-video__mask {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-top: 10px;
  padding-left: 10px;
  border-top-left-radius: var(--theme-radius-medium);
  background: var(--theme-color-surface);
}

.about-video__mask-curve {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--theme-color-surface);
  fill: currentColor;
  pointer-events: none;
}

.about-video__mask-curve--left {
  bottom: 0;
  left: 1px;
  transform: translateX(-100%) scaleY(-1);
}

.about-video__mask-curve--top {
  top: 1px;
  right: 0;
  transform: translateY(-100%) scaleY(-1);
}

.about-video__expand {
  padding: .5rem .9rem;
  border-radius: var(--theme-radius-extra);
  font-size: .8125rem;
}

.about-video__expand svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Nothing to play: the furniture stays, the cursor does not pretend. */
.about-video:not(.about-video--live) .about-video__control,
.about-video:not(.about-video--live) .about-video__expand {
  cursor: default;
  pointer-events: none;
}

/* The placeholder copy is centred in the frame; keep it clear of the row of
   controls now standing along the bottom of it. */
.about-video__placeholder {
  padding-bottom: 5rem;
}

@media (max-width: 767px) {
  .about-video__control {
    width: 38px;
    height: 38px;
  }

  .about-video__icon {
    width: 18px;
    height: 18px;
  }

  .about-video__expand {
    padding: .45rem .7rem;
    font-size: .75rem;
  }

  .about-video__placeholder {
    padding-bottom: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   Design-resources mega menu: the resource leads, the category files it
   -------------------------------------------------------------------------- */

/*
 * The two were reading at almost the same size, so neither led. The title is
 * what is being chosen; the category is only how it is filed.
 */
.c-mega-card--resource .c-mega-card__title {
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1.3;
}

.c-mega-card--resource .c-mega-card__meta {
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   No headings, no contents column
   -------------------------------------------------------------------------- */

/*
 * Hiding the box was never enough. The sidebar is a grid track, so an article
 * with nothing to list still sat at seven tenths of the width beside an empty
 * column. The aside carries display: block !important from the sticky rules,
 * which is why this needs the same weight to answer it.
 */
.single-sidebar--empty,
.single-post .single-sidebar--empty {
  display: none !important;
}

.single-layout:has(> .single-sidebar--empty),
.single-post .single-layout:has(> .single-sidebar--empty) {
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Long card grids: off-screen cards cost nothing
   -------------------------------------------------------------------------- */

/*
 * The resource and event grids render their whole library at once, and the
 * page is scrolled with a rAF-driven smooth scroller -- so every frame was
 * paying layout and paint for hundreds of cards, almost all of them off the
 * screen. content-visibility lets the browser skip the ones nobody can see.
 *
 * contain-intrinsic-size is not optional here: without a placeholder height
 * the scrollbar would resize on every card that comes into view. The value is
 * one card at the grid's own proportions -- a 16/9 image, a badge and two
 * lines -- and only has to be close, since a card that has been rendered once
 * keeps its real size.
 */
.resource-card,
.event-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}

/* --------------------------------------------------------------------------
   One touch target, one hover colour
   -------------------------------------------------------------------------- */

/*
 * Every button clears 50px, whatever family it came from. The sizes are set
 * with padding, so a short label in a small variant landed well under a
 * comfortable target while the button beside it did not.
 *
 * The return button is left out: it has no face, it is a line of text.
 */
.ui-button:not(.ui-button--return),
.member-button,
.about-button,
.site-header__consult,
.site-footer__button,
.kaiyi-cta-button,
.slider-cta-button,
input[type="submit"],
button[type="submit"]:not(.search-submit) {
  min-height: 50px;
}

/*
 * The sweep that fills these on hover is the secondary colour, so the label
 * has to be the one that reads on it. It was pinned to --theme-color-9 by a
 * rule that did not know about the hover, and in the footer by a more specific
 * one that outranked even that -- which is why the footer's button was the
 * one that looked wrong.
 */
.member-button::after,
.site-header__consult::after,
.site-footer__button::after,
.kaiyi-cta-button::after {
  background: var(--theme-color-secondary);
}

.member-button:hover,
.site-header__consult:hover,
.site-footer__button:hover,
.kaiyi-cta-button:hover,
.site-footer a.kaiyi-cta-button:hover,
.site-footer a.site-footer__button:hover {
  color: var(--theme-color-on-secondary) !important;
}

.site-footer.kaiyi-footer-section .kaiyi-cta-button:hover .kaiyi-cta-button-icon {
  background: var(--theme-color-on-secondary);
  color: var(--theme-color-secondary);
}

/* --------------------------------------------------------------------------
   Insight archive: one lead, three behind it, then two columns and a rail
   -------------------------------------------------------------------------- */

/*
 * The three-pass shape is a wide-screen arrangement only. Below 1025px every
 * block collapses back to the single stack of cards the page always had, so
 * there is one set of markup and no second template to keep in step.
 */
.insight-content {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* The gap above owns the spacing now; the header's own bottom margin would be
   added to it. */
.insight-archive .insight-header {
  margin-bottom: 0;
}

.insight-lead {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.insight-lead__body {
  display: grid;
  align-content: center;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.insight-lead__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.insight-lead__title a {
  color: var(--theme-color-text);
  text-decoration: none;
}

.insight-lead__excerpt {
  /* Mixed rather than faded: opacity would take the selection highlight with
     it, the way the article body used to. */
  margin: 0;
  max-width: 44rem;
  color: color-mix(in srgb, var(--theme-color-text) 65%, var(--theme-color-surface));
  font-size: var(--theme-font-size-text);
  line-height: 1.7;
}

.insight-lead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--theme-color-text-muted);
  font-size: var(--theme-font-size-post-meta);
}

.insight-lead__category {
  padding: .25rem .75rem;
  border-radius: var(--theme-radius-extra);
  background: var(--theme-color-surface-muted);
  color: var(--theme-color-text);
  font-weight: 600;
}

.insight-columns {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* ------------------------------- The rail --------------------------------- */

/* One panel, two blocks inside it -- the surface belongs to the rail, not to
   each block, or the two read as separate cards stacked in a column. */
.insight-sidebar {
  display: grid;
  align-content: start;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface-muted);
}

.insight-sidebar__block {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.insight-sidebar__title {
  margin: 0;
  color: var(--theme-color-text);
  font-size: clamp(1.375rem, 1.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
}

.insight-sidebar__lead {
  margin: 0;
  color: color-mix(in srgb, var(--theme-color-text) 65%, var(--theme-color-surface-muted));
  font-size: 1.0625rem;
  line-height: 1.75;
}

.insight-sidebar__cta,
.insight-sidebar .kaiyi-newsletter-form :is(input[type="submit"], button[type="submit"]) {
  justify-self: stretch;
  width: 100%;
}

/*
 * The label goes back to being a block, and the chip is pinned to its own
 * width.
 *
 * Two separate things were wrong here, and fixing only the first is why this
 * kept coming back:
 *
 * 1. Contact Form 7 decides how deep the caption sits. Some fields arrive as
 *    .form-field > label, others as .form-field > p > label, because CF7 wraps
 *    each line of the form in a paragraph. A selector written for the first
 *    shape simply never matched the second, so the base rules kept applying.
 *
 * 2. .form-field is a grid, and a grid stretches whatever it holds. That is
 *    what drew 必填 as a full-width bar rather than a chip -- the badge is
 *    inline-flex, but an inline-level grid item is blockified and then
 *    stretched to the column, so its own display never got a say.
 *
 * So the caption matches at any depth, and the chip carries justify-self and
 * width: fit-content, which hold whether its parent turns out to be a block,
 * a flex row or a grid.
 */
.insight-sidebar .kaiyi-newsletter-form label {
  display: block;
  width: auto;
  max-width: 100%;
}

.insight-sidebar .kaiyi-newsletter-form :is(.required-badge, .optional-badge) {
  display: inline-flex;
  justify-self: start;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin-left: .5rem;
  vertical-align: middle;
}

.insight-sidebar .kaiyi-newsletter-form :is(input, textarea, select, .wpcf7-form-control-wrap) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: .5rem;
}

/*
 * The footer's rail runs down the page; this one runs across it, edge to edge
 * of the panel with the space shared out between the marks rather than left
 * over at the end.
 */
.kaiyi-socials--inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
}

@media (min-width: 1025px) {
  .insight-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .insight-columns {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
    align-items: start;
  }

  /* Two per row beside the rail, rather than the three a full-width grid
     takes. */
  .insight-columns__posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * The same offset every other sticky sidebar on the site uses -- the article
   * contents, the contact intro, the resource intro. align-self is stated on
   * the item as well as align-items on the row, because a sticky element
   * stretched to the full height of its container has nowhere to stick to.
   */
  .insight-sidebar {
    position: sticky;
    top: calc(var(--wp-admin-bar-height, 0px) + var(--site-header-anchor-offset, 30px));
    align-self: start;
  }
}

@media (max-width: 1024px) {
  /* The picture leads on a narrow screen, the way every card on this page
     does. */
  .insight-lead .post-card__media {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Insight lead: the card's picture, at the card's own hover
   -------------------------------------------------------------------------- */

/*
 * The lead renders the same .post-card__media as every card in the grid, so
 * the badge, the author cut-out and their positioning all come for free. What
 * does not come for free is the hover, which the stylesheet hangs off
 * .post-card -- a class the lead does not carry, because it is laid out as two
 * columns rather than a stack.
 */
@media (hover: hover) and (pointer: fine) {
  .insight-lead:hover .post-card__image {
    border-radius: var(--theme-radius-medium);
  }

  .insight-lead:hover .post-card__author-mask {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   Service pages: nothing pushes the page wider than the screen
   -------------------------------------------------------------------------- */

/*
 * Every section is a grid item, and a grid item's automatic minimum size is
 * its content -- so one wide child (the comparison table is 34rem before it
 * starts scrolling) stretched the column past the viewport and took the whole
 * page sideways with it. min-width: 0 lets the track shrink; the clip is the
 * backstop, the same one single posts already carry.
 */
.kaiyi-service,
.kaiyi-services {
  overflow-x: clip;
}

.kaiyi-service > *,
.kaiyi-services > * {
  min-width: 0;
}

/* The table scrolls, and does it quietly: the bar is a permanent grey line
   across a panel that is only sometimes scrollable. */
.service-compare__scroll {
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.service-compare__scroll::-webkit-scrollbar {
  display: none;
}

/*
 * The archive header is not drawn on a wide screen -- the lead post is the
 * page's opening statement there.
 *
 * Taken out of the flow rather than display: none, because that would take the
 * page's only h1 and its breadcrumb trail with it. Nothing moves; the heading
 * is still there for a screen reader and for a crawler.
 */
@media (min-width: 1025px) {
  .insight-archive .insight-header {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Service page: a stack, real work cards, and a two-column FAQ
   -------------------------------------------------------------------------- */

/*
 * "What the work includes" is a pile, not a grid.
 *
 * Each card is sticky at an offset taken from its place in the pile, so the
 * one before it stays visible as a lip while the next slides over.
 *
 * The service page carries overflow-x: clip, which is safe here: clip is not
 * a scroll container, so sticky still resolves against the viewport. Changing
 * it to overflow: hidden would silently flatten this whole section.
 */
.kaiyi-service-includes__stack {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.kaiyi-service-include {
  position: sticky;
  top: calc(var(--site-header-sticky-height, 85px) + 24px + var(--stack-index, 0) * clamp(.75rem, 1.6vw, 1.25rem));
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-heavy);
  background: var(--theme-color-surface);
}

/*
 * The depth. Where scroll-driven animation exists, a card shrinks and dims as
 * it is covered -- that is the parallax, and it is tied to the scroll rather
 * than to a duration. Everywhere else the cards simply stack, which is the
 * same arrangement without the movement.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kaiyi-service-include {
      transform-origin: 50% 0;
      animation: kaiyi-stack-settle linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
  }
}

@keyframes kaiyi-stack-settle {
  to {
    transform: scale(.92);
    opacity: .55;
  }
}

/* ------------------------------- work cards ------------------------------- */

/* The archive's grid is display: none until its view toggle turns it on; the
   service page has no toggle, so it states its own. */
.work-card-grid,
.kaiyi-service-work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

@media (max-width: 1024px) {
  .work-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .work-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------- FAQ ----------------------------------- */

.kaiyi-service-faq__intro h2 {
  margin: 0;
}

.kaiyi-service-faq__list {
  max-width: none;
}

@media (min-width: 1025px) {
  /* The heading holds the left third and stays with the questions it labels. */
  .kaiyi-service-faq {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .kaiyi-service-faq__intro {
    position: sticky;
    top: calc(var(--site-header-sticky-height, 85px) + 24px);
  }
}

/*
 * A <details> cannot be animated by wrapping its contents -- the browser hides
 * them itself. ::details-content is the element that actually opens, so the
 * height transition goes there, and interpolate-size is what lets it run to
 * `auto` instead of a number somebody had to guess.
 *
 * Browsers without it open and close instantly, which is what this did before.
 */
:root {
  interpolate-size: allow-keywords;
}

.kaiyi-service-faq__item::details-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, content-visibility .35s allow-discrete;
}

.kaiyi-service-faq__item[open]::details-content {
  height: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kaiyi-service-faq__item::details-content {
    transition: none;
  }

  .kaiyi-service-include {
    animation: none;
  }
}