/* Chinese copy keeps the same visual footprint without depending on Latin word length. */
:root {
  --reading-size: clamp(13px, .98vw, 16px);
  --reading-leading: 1.85;
}
body { line-break: strict; }
h2, h3, p { overflow-wrap: break-word; }
.hero-headline h1 { letter-spacing: -.025em; }
.hero-copy {
  width: clamp(320px, 26vw, 440px);
  bottom: 10.5%;
}
.hero-copy > .eyebrow { font-size: 10px; line-height: 1.6; margin-bottom: 16px; }
.hero-copy > h2 { font-size: clamp(25px, 1.9vw, 33px); line-height: 1.4; margin-bottom: 18px; }
.hero-description { width: 100%; font-size: var(--reading-size); line-height: var(--reading-leading); color: #a4a79f; }
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
.hero-actions .button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  width: 100%; min-width: 0; min-height: 56px;
  padding: 0; gap: 3px; background: transparent;
}
.hero-actions .button > .button-label,
.hero-actions .button > .button-arrow {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; background: var(--red); transition: background .2s;
}
.hero-actions .button > .button-label { font-size: 14px; letter-spacing: .04em; }
.hero-actions .button > .button-arrow { font-size: 24px; }
.hero-actions .button:hover > span { background: #fc4648; }
.hero-actions > .text-link { justify-self: end; font-size: 12px; gap: 20px; min-height: 24px; }
.text-link { font-size: 13px; gap: 24px; min-height: 28px; }
.section-heading { gap: 24px; align-items: baseline; font-size: 12px; line-height: 1.8; }
.section-heading .eyebrow { flex-shrink: 0; font-size: 10px; letter-spacing: 1.8px; }
.section-heading > span { text-align: right; }
.intro-heading h2, .products-title h2 { letter-spacing: -.025em; line-height: 1.23; }
.intro-series > a { min-height: 122px; }
.intro-series h3 { line-height: 1.4; }
.intro-series p { font-size: var(--reading-size); line-height: var(--reading-leading); }
.intro-aside { max-width: 390px; }
.intro-aside > p { font-size: clamp(15px, 1.15vw, 19px); line-height: var(--reading-leading); }
.intro-bottom { font-size: 10px; line-height: 1.8; }
.products-title p { font-size: var(--reading-size); line-height: var(--reading-leading); }
.product-filters button { min-height: 48px; font-size: 13px; }
.product-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; min-height: 106px; }
.product-info > div { min-width: 0; }
.product-info h3 { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; }
.product-info p { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.product-info > span { font-size: 12px; line-height: 1.6; }
.product-note { font-size: 12px; line-height: var(--reading-leading); max-width: 65em; }
.section-intro { font-size: var(--reading-size); line-height: var(--reading-leading); }
.layer { gap: 24px; min-height: 99px; }
.layer h3 { font-size: 18px; line-height: 1.5; }
.layer p { font-size: 13px; line-height: 1.85; }
.about-left > p:not(.eyebrow) { font-size: var(--reading-size); line-height: 1.95; }
.about-art small { font-size: 12px; line-height: 1.85; }
.about-art > span, .about-art > small { position: relative; z-index: 2; }
.about-art .wire-lines { z-index: 1; opacity: .65; }
.contact-bottom p { font-size: 13px; line-height: 1.9; }
.contact-info { font-size: 14px; line-height: 1.95; }
footer { font-size: 11px; line-height: 1.8; gap: 22px; }
.dialog-content { overflow-wrap: anywhere; }
.dialog-content h2 { padding-right: 15px; line-height: 1.5; }
#detail-specs { grid-template-columns: 70px minmax(0, 1fr); font-size: 13px; }
.detail-source { font-size: 13px; line-height: 1.85; }

@media (min-width: 651px) and (max-height: 800px) {
  .hero-copy { width: clamp(300px, 26vw, 365px); bottom: 10%; }
  .hero-copy > .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .hero-copy > h2 { font-size: 23px; line-height: 1.35; margin-bottom: 12px; }
  .hero-description { font-size: 13px; line-height: 1.7; }
  .hero-actions { margin-top: 18px; gap: 8px; }
  .hero-actions .button { min-height: 48px; grid-template-columns: minmax(0, 1fr) 48px; }
  .hero-actions .button > span { min-height: 48px; }
  .hero-actions > .text-link { min-height: 20px; font-size: 11px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .hero-copy { width: clamp(285px, 38vw, 340px); }
  .hero-copy > h2 { font-size: 24px; }
  .hero-description { font-size: 13px; }
  .product-info { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-height: 135px; }
  .product-info > span { justify-self: end; font-size: 11px; }
  .product-info h3 { font-size: 18px; }
  .product-info p { font-size: 11px; }
  .intro-columns { grid-template-columns: 55% minmax(0, 1fr); gap: 8%; }
  .intro-series > a { gap: 18px; }
  .intro-series p { font-size: 13px; }
  .about-art > span { font-size: 3.4vw; letter-spacing: -1px; }
  .about-art { padding-left: 28px; }
  .structure-copy { max-width: 330px; }
}
@media (max-width: 650px) {
  :root { --reading-size: 13px; }
  .hero-copy { left: 7%; width: 86%; bottom: 10%; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: 1.2px; margin-bottom: 12px; }
  .hero-copy > h2 { font-size: 23px; line-height: 1.4; margin-bottom: 12px; }
  .hero-description { font-size: 13px; line-height: 1.8; }
  .hero-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-top: 18px; }
  .hero-actions .button { grid-template-columns: minmax(0, 1fr) 44px; min-height: 50px; }
  .hero-actions .button > span { min-height: 50px; }
  .hero-actions .button > .button-label { font-size: 12px; letter-spacing: 0; }
  .hero-actions > .text-link { font-size: 12px; gap: 10px; white-space: nowrap; }
  .hero-headline h1 { letter-spacing: -.03em; }
  .section-heading { font-size: 11px; gap: 18px; }
  .section-heading .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .section-heading > span { max-width: 13em; }
  .intro-heading h2, .products-title h2 { letter-spacing: -.025em; }
  .intro-series > a { min-height: 112px; gap: 20px; }
  .intro-series p { font-size: 12px; max-width: none; }
  .intro-series > a > div { min-width: 0; }
  .intro-series b { flex-shrink: 0; }
  .intro-aside > p { font-size: 15px; line-height: 1.9; }
  .intro-bottom { font-size: 9px; gap: 25px; letter-spacing: .3px; }
  .product-filters { gap: 22px; }
  .product-filters button { font-size: 12px; }
  .product-info { grid-template-columns: minmax(0, 1fr) auto; min-height: 106px; align-items: center; }
  .product-info h3 { font-size: 20px; }
  .product-info p { font-size: 12px; }
  .product-info > span { font-size: 11px; }
  .product-note { font-size: 11px; }
  .products-title p { font-size: 13px; }
  .section-intro { font-size: 13px; }
  .layer-list { max-width: 64%; }
  .layer { min-height: 105px; padding: 17px 0; gap: 12px; }
  .layer h3 { font-size: 16px; margin-bottom: 8px; }
  .layer p { font-size: 12px; line-height: 1.8; }
  .layer > span { font-size: 9px; }
  .about-left > p:not(.eyebrow) { font-size: 13px; }
  .about-art small { font-size: 11px; }
  .about-art .wire-lines { bottom: -60px; right: -90px; width: 200px; height: 190px; overflow: hidden; }
  .contact h2 { font-size: 36px; letter-spacing: -.025em; }
  .contact-bottom { gap: 16px; align-items: flex-start; }
  .contact-bottom p { font-size: 12px; margin: 0; }
  .contact-bottom .text-link { flex-shrink: 0; font-size: 11px; gap: 8px; }
  footer p, footer > a:last-child { font-size: 10px; }
  footer { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  footer p { grid-row: 2; grid-column: 1 / -1; margin: 0; }
  .dialog-content > p:not(.eyebrow) { font-size: 13px; }
  #detail-specs { grid-template-columns: 50px minmax(0, 1fr); font-size: 12px; }
}
@media (max-width: 360px) {
  .hero-copy > h2 { font-size: 21px; }
  .hero-description { font-size: 12px; }
  .hero-actions { gap: 16px; }
  .hero-actions .button > .button-label { font-size: 11px; }
  .hero-actions > .text-link { font-size: 11px; gap: 8px; }
  .intro-heading h2 { font-size: 35px; }
  .product-info h3 { font-size: 18px; }
  .product-info { gap: 10px; }
  .product-info > span { font-size: 10px; }
  .contact-bottom { flex-direction: column; gap: 16px; }
  .about-art > span { font-size: 36px; }
}