/* Shared typefaces and document-level defaults. Page styles may override the
 * body font, canvas sizing, colors, and spacing when their composition needs it. */
@font-face {
  font-family: "Source Han Sans CN";
  src: url("../fonts/SourceHanSansCN-Regular-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans CN";
  src: url("../fonts/SourceHanSansCN-Medium-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Serif CN";
  src: url("../fonts/SourceHanSerifCN-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Legacy family aliases used by source-restored testimonial layouts. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/SourceHanSansCN-Regular-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/SourceHanSansCN-Medium-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("../fonts/SourceHanSerifCN-Site.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* CSS unit policy:
   * - rem for typography so browser/user font-size settings can scale text.
   * - unitless line-height for text rhythm.
   * - px is reserved for hairlines, icons, exact artwork/canvas coordinates,
   *   breakpoints, and intrinsic media dimensions where visual parity requires it.
   * - %, min(), max(), clamp(), and calc() are preferred for fluid layout.
   */
  --clear-white: #fffdfa;
  --paper: #fffdfa;
  --pearl-white: #f8f5f4;
  --paper-soft: #f8f5f4;
  --panel-gray: #f0ecea;
  --ink: #211f24;
  --body-gray: #514d52;
  --muted: #5c575d;
  --camellia-red: #c64b67;
  --rose: #c64b67;
  --deep-red: #b6405a;
  --rose-deep: #b6405a;
  --champagne-gold: #bfa86f;
  --gold: #bfa86f;
  --gold-text: #8a7338;
  --divider-gray: #d8d3d4;
  --line: #d8d3d4;
  --shell: 1328px;
  --yj-section-y: 5rem;
  --yj-section-y-compact: 4rem;
  --yj-section-y-tight: 3rem;
  --yj-section-y-hero: 4.5rem;
  --yj-section-gap: 3rem;
}

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-size: 100%;
  scroll-behavior: smooth;
}

@media (max-width: 1440px) {
  :root {
    --yj-section-y: 4.5rem;
    --yj-section-y-compact: 3.75rem;
    --yj-section-y-tight: 2.75rem;
    --yj-section-y-hero: 4rem;
    --yj-section-gap: 2.5rem;
  }
}

@media (max-width: 680px) {
  html {
    font-size: 87.5%;
  }

  :root {
    --yj-section-y: 4rem;
    --yj-section-y-compact: 3rem;
    --yj-section-y-tight: 2rem;
    --yj-section-y-hero: 3.75rem;
    --yj-section-gap: 2rem;
  }
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  font-family: "Source Han Sans CN", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.yj-responsive-scale-frame,
.yj-responsive-scale-canvas {
  width: 100%;
}

.yj-responsive-scale-frame {
  overflow-x: clip;
  overflow-y: visible;
}

.yj-responsive-scale-canvas {
  transform-origin: top left;
}

@media (min-width: 681px) and (max-width: 1439.98px) {
  .yj-responsive-scale-frame {
    max-width: 100vw;
  }

  .yj-responsive-scale-canvas {
    width: 1440px;
    max-width: none;
    transform: scale(var(--yj-responsive-scale, calc(100vw / 1440)));
    will-change: transform;
  }
}

@media (max-width: 680px), (min-width: 1440px) {
  .yj-responsive-scale-frame {
    height: auto !important;
  }

  .yj-responsive-scale-canvas {
    width: 100%;
    transform: none;
    will-change: auto;
  }
}

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

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

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 1000;
  padding: 0.625rem 0.875rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}