/* Self-hosted subsets. Modified versions of IBM Plex Sans and the Noto Sans/Serif SC
   families; see LICENSES.txt and README.md for provenance and regeneration. */
@font-face {
  font-family: "Danze Sans Latin";
  src: url("fonts/danze-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Danze Sans Han";
  src: url("fonts/danze-sans-han.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Danze Serif Han";
  src: url("fonts/danze-serif-han.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --surface:#ffffff;
  --paper:#f6f5f0;
  --ink:#13201c;
  --ink-muted:#4a5752;
  --ze:#0b5d57;
  --ze-deep:#083f3b;
  --ze-tint:#e3efed;
  --dan:#b8361e;
  --on-dan:#ffffff;
  --on-ze:#ffffff;
  --on-deep:#eef3f1;
  --on-deep-muted:#a9c7c1;
  --line:#d6dcd9;
  --line-strong:#8a9893;
  --focus:var(--ze);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-pill:999px;
  --container:1200px;
  --measure:38em;
  --seal:36px;
  --border:1px;
  --focus-width:3px;
  --font-sans:"Danze Sans Latin", "Danze Sans Han", "IBM Plex Sans", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif:"Danze Serif Han", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  }
html, body { margin: 0; background: #ffffff; }

.dz, .dz *, .dz *::before, .dz *::after { box-sizing: border-box; }
.dz { container: page / inline-size; margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.75; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.dz h1, .dz h2, .dz h3, .dz p, .dz dl, .dz dd, .dz ul { margin: 0; padding: 0; }
.dz ul { list-style: none; }
.dz .en { display: block; color: var(--ink-muted); font-size: 16px; line-height: 1.65; }
.dz .nw { white-space: nowrap; }
.dz .chunk { display: inline-block; }
.dz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dz-wrap { max-width: calc(var(--container) + 2 * var(--space-16)); margin: 0 auto; padding-inline: var(--space-16); }

/* focus — one rule for every interactive element */
.dz a:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 3px; }

/* skip link */
.dz-skip { position: absolute; left: var(--space-4); top: -64px; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--surface); font-size: 15px; font-weight: 500; border-radius: var(--radius-sm); text-decoration: underline; text-underline-offset: 3px; }
.dz-skip:focus { top: var(--space-4); }

/* wordmark */
.dz-mark { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.dz-seal { --k: var(--dan); flex: none; display: block; width: var(--seal); height: var(--seal); background: var(--dan); color: var(--on-dan); border-radius: var(--radius-xs); }
.dz-seal svg, .dz-glyph-solo svg { display: block; width: 100%; height: 100%; }
.dz-seal .d, .dz-glyph-solo .d { fill: currentColor; }
.dz-seal .z, .dz-glyph-solo .z { fill: none; stroke: var(--k); stroke-width: 2.8; stroke-linejoin: miter; stroke-linecap: butt; }
.dz-glyph-solo { --k: var(--surface); display: block; width: 64px; height: 64px; color: var(--ze); }
.dz-mark__word { font-size: 19px; font-weight: 600; letter-spacing: 0.2em; line-height: 1; }

/* header + nav */
.dz-header { background: var(--surface); border-bottom: var(--border) solid var(--line); }
.dz-header .dz-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-8); padding-block: var(--space-4); }
.dz-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-nav a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.45; text-decoration: none; }
.dz-nav a .en { display: inline; font-size: 15px; font-weight: 400; line-height: 1.45; }
.dz-nav a:hover { background: var(--ze-tint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* hero */
.dz-hero { background: var(--paper); border-bottom: var(--border) solid var(--line); overflow: hidden; }
.dz-hero .dz-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-16); align-items: center; padding-block: var(--space-24); }
.dz-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 1.22; letter-spacing: 0.02em; }
.dz-hero h1 .en { margin-top: var(--space-4); font-family: var(--font-sans); font-weight: 400; font-size: 22px; line-height: 1.45; letter-spacing: 0; }
.dz-hero__intro { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border) solid var(--line); max-width: var(--measure); }
.dz-hero__intro p + p { margin-top: var(--space-2); }
.dz-hero__art { width: 340px; height: 340px; }
.dz-hero__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dz-art-seal { fill: var(--dan); }
.dz-art-d { fill: var(--on-dan); }
.dz-art-z { fill: none; stroke: var(--dan); stroke-width: 2.8; stroke-linejoin: miter; }
.dz-art-pool { fill: var(--ze-tint); }
.dz-art-ripple { fill: none; stroke: var(--ze); stroke-width: 1.5; }

/* sections */
.dz-section { padding-block: var(--space-24); }
.dz-section--paper { background: var(--paper); }
.dz-section .dz-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8) var(--space-16); }
.dz-section__head h2 { font-family: var(--font-serif); font-weight: 700; font-size: 34px; line-height: 1.3; letter-spacing: 0.02em; scroll-margin-top: var(--space-6); }
.dz-section__head h2 .en { margin-top: var(--space-1); font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; }

/* product card */
.dz-product { display: grid; grid-template-columns: minmax(min-content, 1.1fr) minmax(0, 1fr); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.dz-product__body { padding: var(--space-12); min-inline-size: calc(120px + 10.75em); display: flex; flex-direction: column; gap: var(--space-6); }
.dz-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.dz-eyebrow .dz-seal { width: 20px; height: 20px; border-radius: 2px; }
.dz-eyebrow .dz-seal .z { stroke-width: 3.2; }
.dz-product h3 { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; }
.dz-product__desc p + p { margin-top: var(--space-3); }
.dz-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dz-chips li { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 14px; border: var(--border) solid var(--line-strong); border-radius: var(--radius-pill); font-size: 15px; line-height: 1.5; font-weight: 500; }
.dz-chips li .en { display: inline; font-size: 14px; font-weight: 400; line-height: 1.5; }
.dz-product__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }
.dz-dest { font-size: 14px; line-height: 1.5; color: var(--ink-muted); overflow-wrap: anywhere; }
.dz-product__media { position: relative; background: var(--ze-tint); display: flex; align-items: center; padding: var(--space-8); min-height: 320px; }
.dz-shot { flex: 1 1 auto; display: block; min-width: 0; width: 100%; height: auto; border: var(--border) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }

/* button */
.dz-button { display: inline-flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 0 8px; min-height: 48px; padding: 11px var(--space-6); background: var(--ze); color: var(--on-ze); border-radius: var(--radius-sm); font-size: 16px; line-height: 1.6; font-weight: 500; text-decoration: none; }
.dz-button .en { display: inline; color: inherit; font-size: 16px; line-height: 1.6; font-weight: 400; }
.dz-button .arrow { font-weight: 400; }
.dz-button:hover { background: var(--ze-deep); text-decoration: underline; text-underline-offset: 4px; }

/* text link */
.dz-link { color: var(--ze); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.dz-link:hover { color: var(--ze-deep); text-decoration-thickness: 2px; }

/* company information */
.dz-info { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); align-items: start; }
.dz-rows > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2) var(--space-8); padding-block: var(--space-6); border-top: var(--border) solid var(--line); }
.dz-rows > div:last-child { border-bottom: var(--border) solid var(--line); }
.dz-rows dt { font-size: 15px; font-weight: 500; line-height: 1.5; padding-top: 3px; }
.dz-rows dt .en { font-size: 15px; font-weight: 400; line-height: 1.5; }
.dz-rows dd { overflow-wrap: anywhere; }
.dz-rows dd .en { margin-top: var(--space-2); }
.dz-num { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: 0.04em; }
.dz-contact { background: var(--ze-tint); border-radius: var(--radius-md); padding: var(--space-8); }
.dz-contact__label { font-size: 15px; font-weight: 500; line-height: 1.5; }
.dz-contact__label .en { display: inline; font-size: 15px; font-weight: 400; }
.dz-contact .dz-link { display: inline-block; margin-top: var(--space-3); font-size: 26px; line-height: 1.3; font-weight: 500; }

/* footer */
.dz-footer { background: var(--ze-deep); color: var(--on-deep); }
.dz-footer .dz-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-12); }
.dz-footer p { font-size: 16px; line-height: 1.6; font-weight: 500; }
.dz-footer p .en { color: var(--on-deep-muted); font-size: 15px; font-weight: 400; line-height: 1.6; }
.dz-footer .dz-footer__icp { flex-basis: 100%; min-inline-size: 0; font-size: 15px; font-weight: 400; line-height: 1.6; }
.dz-footer__icp a { display: inline-block; max-width: 100%; min-block-size: var(--space-6); color: var(--on-deep-muted); text-decoration: underline; white-space: normal; overflow-wrap: anywhere; }
.dz-footer__icp a:hover, .dz-footer__icp a:focus-visible { color: var(--on-deep); text-decoration-thickness: 2px; }
.dz-footer a:focus-visible { outline-color: var(--on-deep); }

/* ---------- responsive (container queries: the page box, not the window) ---------- */
@container page (max-width: 1279px) {
  .dz-wrap { padding-inline: var(--space-12); }
  .dz-hero h1 { font-size: 48px; }
  .dz-hero .dz-wrap { grid-template-columns: minmax(0, 1fr) 260px; }
  .dz-hero__art { width: 260px; height: 260px; }
  .dz-info { grid-template-columns: minmax(0, 1fr) 300px; }
}
@container page (max-width: 1023px) {
  .dz-wrap { padding-inline: var(--space-8); }
  .dz-section { padding-block: var(--space-16); }
  .dz-hero .dz-wrap { padding-block: var(--space-16); }
  .dz-section .dz-wrap { grid-template-columns: minmax(0, 1fr); }
  .dz-product { grid-template-columns: minmax(0, 1fr); }
  .dz-product__media { min-height: 0; }
  .dz-info { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .dz-contact { order: -1; }
}
/* Enlarged-text safety, in two parts.

   Sizing. The body column reserves the heading's real min-content, so its longest word
   ("Macau", including any WCAG 1.4.12 letter/word spacing a visitor applies) can never be
   wider than the column, whatever font actually renders: minmax(min-content, 1.1fr) below.
   min-content alone is a zero-margin fit, so the body also carries a measured floor of
   120px + 10.75em. At 2x native text (34px em) that is 485.5px, i.e. 389.5px of content,
   against the measured spaced min-content of 349.05px shipped and 363.517px with WOFF2
   blocked (~26px margin on the wider fallback). The 120px fixed term keeps the 1x value at
   302.75px, below the 314.81px body track share of the narrowest two-column card (page
   1023.0001px), so normal-size pixels do not move. This sizing is independent of the
   padding branch and of the 1328px wrap cap: the body track share is 0.5238095 * (W - 422) for
   1023 < W <= 1279, 0.5238095 * (W - 454) for 1279 < W <= 1328, and freezes at 361.817px
   above the cap; at 2x the 485.5px floor is above all of those, so both branches and the
   capped range keep the 389.5px content box. If a fallback font is even wider, min-content
   raises the track with the real word instead of overflowing it.

   Stacking. Below the affine threshold the card stacks instead of squeezing the media panel.
   The threshold is a fixed 625px floor plus 16.4em, where em is the page box's 17px base
   font and therefore follows native text-only zoom: 903.8px at 100%, 1043.2px at 150%,
   1071.08px at 160%, 1182.6px at 200%. At 1x it falls inside the already-stacked <=1023px
   range, so normal-size rendering is unchanged. The body floor is reset to 0 inside this
   query, so stacked layouts (including 320 and 390) are never widened by it. Sizing, not the
   threshold, is what guarantees containment at every two-column width. */
@container page (max-width: calc(625px + 16.4em)) {
  .dz-product { grid-template-columns: minmax(0, 1fr); }
  .dz-product__media { min-height: 0; }
  .dz-product__body { min-inline-size: 0; }
}
/* Company rows: exclusive complement of the 1023px narrow layout, so fractional
   page-container widths just above 1023 are repaired too. */
@container page (width > 1023px) and (width <= 1279px) {
  .dz-rows > div { grid-template-columns: minmax(0, 1fr); }
}
@container page (max-width: 767px) {
  .dz .en { font-size: 15px; }
  .dz-wrap { padding-inline: var(--space-5); }
  .dz-hero .dz-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-12) var(--space-12); }
  .dz-hero__art { order: -1; width: 112px; height: 112px; }
  .dz-hero h1 { font-size: 30px; line-height: 1.3; }
  .dz-hero h1 .en { font-size: 18px; margin-top: var(--space-3); }
  .dz-section { padding-block: 56px; }
  .dz-section__head h2 { font-size: 26px; }
  .dz-product__body { padding: var(--space-6); }
  .dz-product h3 { font-size: 34px; }
  .dz-product__media { padding: var(--space-5); }
  .dz-product__cta { flex-direction: column; align-items: stretch; }
  .dz-button { width: 100%; }
  .dz-rows > div { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); }
  .dz-contact { padding: var(--space-6); }
  .dz-contact .dz-link { font-size: 21px; }
  .dz-mark__word { font-size: 17px; }
  .dz-nav a { padding-inline: 10px; }
}
@container page (max-width: 359px) {
  .dz-wrap { padding-inline: var(--space-4); }
  .dz-hero h1 { font-size: 27px; }
  .dz-product h3 { font-size: 30px; }
  .dz-contact .dz-link { font-size: 19px; }
}

@media (prefers-reduced-motion: no-preference) {
  .dz-nav a, .dz-button, .dz-link { transition: background-color .15s ease, color .15s ease, text-decoration-color .15s ease; }
  .dz-skip { transition: top .15s ease; }
}