/* KINGCONN page layer — sits after styles.css (foundation → graphite → components → terminal) */

/* CJK: Han glyphs are square — negative Latin tracking collides strokes. Reset. */
:root {
  --font-display: "Geist", "Noto Sans TC", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans TC", system-ui, sans-serif;
}
body { letter-spacing: 0; }
.display, .h1, .h2, .h3, .lead { letter-spacing: 0; }
.display { max-width: 16ch; }

/* section header: heading + muted context on one baseline row */
.sechead { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; padding-top: var(--section-sm);
  margin-bottom: var(--space-8); }
.sechead .en { font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* product rows: family code + zh/en name + spec line */
.frow .fen { font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: var(--space-1); }
.frow .fbody .body { margin-top: var(--space-2); }

/* verified-clients strip: quiet mono manifest, not a logo wall */
.clients { padding-block: var(--space-12); border-top: 1px solid var(--border); }
.clients .row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6); }
.clients .row span { font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--muted); letter-spacing: 0.06em; }

/* quality: text column + factory photo slot */
.quality { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12);
  padding-block: var(--section-y); align-items: stretch; }
.quality .lead-index { margin-top: var(--space-8); max-width: 40ch; }
.quality .photo-slot { min-height: 400px; min-width: 0; }
.quality > div { min-width: 0; }

@media (max-width: 820px) {
  .quality { grid-template-columns: 1fr; }
  .quality .photo-slot { min-height: 300px; }
  .clients .row { gap: var(--space-2) var(--space-4); }
}

/* footer: multi-line contact block */
footer .contact { text-align: right; }
@media (max-width: 640px) { footer { flex-direction: column; } footer .contact { text-align: left; } }

/* CJK headline wrap units: never break inside a phrase */
.display .wu { display: inline-block; }