/* Google Sans Flex + Noto Sans SC: a clear, consistent type system. */
:root {
  --sans: 'Google Sans Flex', 'Noto Sans SC', 'Microsoft YaHei', Arial, sans-serif;
  --mono: var(--sans);
}

body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
}

h1, h2, h3, p, button, input, select, textarea, nav {
  font-family: var(--sans);
}

h1, h2, h3 {
  font-weight: 600;
  text-wrap: balance;
}

h2 {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.hero-photographic h1,
html[lang=zh-CN] .hero-photographic h1 {
  font-size: clamp(44px, 3.8vw, 56px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.035em;
}

.hero-photographic .hero-description {
  font-size: 16px;
  line-height: 1.8;
  max-width: 495px;
}

.site-header nav {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.button, .sample-inquiry, .detail-button {
  font-weight: 600;
  letter-spacing: 0;
}

.button-small { font-size: 13px; }
.language-switch { font-size: 12px; font-weight: 500; }
.eyebrow, .hero-photographic .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .085em;
  line-height: 1.5;
}

.utility-inner { font-size: 11px; letter-spacing: .035em; }
.hero-photographic .hero-proof,
.hero-photographic .hero-industries {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .015em;
}
.hero-image-caption strong { font-size: 10px; letter-spacing: .045em; }
.hero-image-caption div > span { font-size: 10px; line-height: 1.55; }

.capability-strip strong { font-size: 14px; font-weight: 600; }
.capability-strip div > span:not(.capability-icon) { font-size: 12px; }
.range-heading h2, .section-heading h2, .story-copy h2, .about-copy h2 {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.section-intro { font-size: 14px; line-height: 1.75; }
.range-heading .text-link, .about-copy .text-link { font-size: 13px; }
.family-copy h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.family-copy p { font-size: 12px; line-height: 1.6; max-width: 190px; }
.family-copy { min-height: 117px; }
.family-index, .application-index { font-variant-numeric: tabular-nums; }

.cabinet-top { font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.desktop-hint { font-size: 10px; letter-spacing: .01em; }
.row-title, html[lang=zh-CN] .row-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.row-subtitle { font-size: 10px; line-height: 1.5; letter-spacing: .025em; }
.row-number { font-size: 11px; font-variant-numeric: tabular-nums; }
.inspector-top, .sample-type { font-size: 10px; letter-spacing: .04em; }
.sample-name { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.sample-description { font-size: 13px; line-height: 1.75; }
.sample-tags { font-size: 10px; }
.detail-button, .sample-inquiry { font-size: 13px; }
.inspector-note, .prototype-note, .cabinet-bottom { font-size: 10px; line-height: 1.65; }
.custom-grid h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.custom-grid p { font-size: 14px; line-height: 1.75; }
.custom-bottom { font-size: 11px; letter-spacing: 0; line-height: 1.7; }
.story-copy > p:not(.eyebrow), .about-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
.story-swatch span { font-size: 12px; }
.about-brand span { font-size: 10px; letter-spacing: .04em; }
.application-grid .application-copy h3 { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.application-grid .application-copy p,
.application-grid > a[data-sector=bags] .application-copy p,
.application-grid > a[data-sector=pets] .application-copy p { font-size: 14px; line-height: 1.7; }
.application-explore { font-size: 13px; font-weight: 500; }
.application-image-label { font-size: 10px; letter-spacing: .03em; }
.contact-section h2 { font-size: 36px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.contact-section p:not(.eyebrow) { font-size: 15px; line-height: 1.75; }
.contact-actions > span { font-size: 11px; letter-spacing: .02em; }
.footer-top p, .footer-links { font-size: 13px; line-height: 1.75; }
.footer-bottom { font-size: 11px; line-height: 1.6; }

.catalog-heading h1, html[lang=zh-CN] .catalog-heading h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.25;
}
.category-description { font-size: 15px; line-height: 1.75; }
.catalog-back, .category-navigation a { font-size: 13px; font-weight: 500; }
.catalog-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.catalog-card p { font-size: 14px; line-height: 1.75; }
.catalog-card-actions button { font-size: 13px; font-weight: 500; }
.catalog-note { font-size: 12px; line-height: 1.75; }
.dialog-heading .eyebrow { font-size: 11px; }
.texture-dialog h2, .inquiry-dialog h2 { font-size: 28px; font-weight: 600; }
.dialog-description, .inquiry-intro, .form-grid label { font-size: 14px; line-height: 1.65; }
.form-grid input, .form-grid textarea, .form-grid select { font-size: 15px; }
.dialog-footnote, .inquiry-preview-note { font-size: 12px; line-height: 1.7; }

html[lang=zh-CN] h1, html[lang=zh-CN] h2, html[lang=zh-CN] h3,
html[lang=zh-CN] .row-title { letter-spacing: 0; }
html[lang=zh-CN] .hero-photographic h1 { letter-spacing: -.01em; line-height: 1.25; }
html[lang=zh-CN] .eyebrow, html[lang=zh-CN] .utility-inner { letter-spacing: .04em; }
html[lang=zh-CN] .row-subtitle, html[lang=zh-CN] .hero-industries { letter-spacing: 0; }

@media (max-width: 1180px) {
  .site-header nav { font-size: 13px; gap: 20px; }
  .button-small { font-size: 12px; padding-left: 15px; padding-right: 15px; }
  .hero-photographic h1, html[lang=zh-CN] .hero-photographic h1 { font-size: 48px; }
  .family-copy h3 { font-size: 15px; }
  .family-copy p { font-size: 11px; }
  .application-grid .application-copy h3 { font-size: 21px; }
  .application-explore { font-size: 12px; }
}

@media (max-width: 930px) {
  .site-header nav { font-size: 12px; gap: 14px; }
  .header-end { gap: 12px; }
  .button-small { font-size: 11px; padding-left: 12px; padding-right: 12px; }
  .hero-photographic h1, html[lang=zh-CN] .hero-photographic h1 { font-size: 42px; }
  .hero-photographic .hero-description { font-size: 15px; }
  .utility-inner { font-size: 10px; }
  .row-title, html[lang=zh-CN] .row-title { font-size: 13px; }
  .row-subtitle { font-size: 9px; }
  .sample-name { font-size: 23px; }
  .custom-grid h3 { font-size: 16px; }
  .custom-grid p { font-size: 13px; }
  .application-grid .application-copy h3 { font-size: 19px; }
  .application-grid .application-copy p,
  .application-grid > a[data-sector=bags] .application-copy p,
  .application-grid > a[data-sector=pets] .application-copy p { font-size: 13px; }
  .application-explore { font-size: 11px; }
}

@media (max-width: 760px) {
  .site-header nav { display: none; }
  .hero-photographic h1, html[lang=zh-CN] .hero-photographic h1 { font-size: 39px; }
  .hero-photographic .hero-proof, .hero-photographic .hero-industries { font-size: 10px; }
  .range-heading h2, .section-heading h2, .story-copy h2, .about-copy h2 { font-size: 29px; }
  .custom-grid p { font-size: 12px; }
  .custom-bottom { font-size: 10px; }
  .application-grid .application-copy h3 { font-size: 18px; }
  .application-grid .application-copy p,
  .application-grid > a[data-sector=bags] .application-copy p,
  .application-grid > a[data-sector=pets] .application-copy p { font-size: 12px; }
  .application-explore { font-size: 10px; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .button-small { font-size: 10px; padding: 10px 11px; }
  .language-switch { font-size: 11px; }
  .utility-inner { font-size: 9px; }
  .hero-photographic h1, html[lang=zh-CN] .hero-photographic h1 { font-size: 40px; line-height: 1.16; }
  html[lang=zh-CN] .hero-photographic h1 { font-size: 38px; line-height: 1.28; }
  .hero-photographic .eyebrow { font-size: 10px; }
  .hero-photographic .hero-description { font-size: 15px; line-height: 1.75; }
  .hero-photographic .hero-proof, .hero-photographic .hero-industries { font-size: 10px; line-height: 1.65; }
  .hero-photographic .hero-actions .button { font-size: 13px; }
  .hero-image-caption strong, .hero-image-caption div > span { font-size: 9px; }
  .capability-strip strong { font-size: 13px; }
  .capability-strip div > span:not(.capability-icon) { font-size: 11px; }
  .family-copy h3 { font-size: 15px; }
  .family-copy p { font-size: 11px; }
  .family-copy { min-height: 116px; }
  .range-heading h2, .section-heading h2, .story-copy h2, .about-copy h2 { font-size: 27px; }
  .section-intro { font-size: 13px; }
  .cabinet-top { font-size: 10px; }
  .touch-hint { font-size: 9px; }
  .row-title, html[lang=zh-CN] .row-title { font-size: 14px; }
  .row-number { font-size: 11px; }
  .sample-name { font-size: 24px; }
  .sample-description { font-size: 13px; }
  .custom-grid h3 { font-size: 15px; line-height: 1.4; }
  .custom-grid p { font-size: 12px; }
  .story-copy > p:not(.eyebrow), .about-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.8; }
  .story-swatch span { font-size: 11px; }
  .about-brand span { font-size: 9px; }
  .application-grid .application-copy h3 { font-size: 22px; }
  .application-grid .application-copy p,
  .application-grid > a[data-sector=bags] .application-copy p,
  .application-grid > a[data-sector=pets] .application-copy p { font-size: 14px; min-height: 0; }
  .application-explore { font-size: 12px; }
  .application-image-label { font-size: 9px; }
  .contact-section h2 { font-size: 29px; }
  .contact-section p:not(.eyebrow) { font-size: 14px; }
  .contact-actions > span { font-size: 10px; }
  .footer-top p, .footer-links { font-size: 12px; }
  .footer-bottom { font-size: 10px; }
  .catalog-heading h1, html[lang=zh-CN] .catalog-heading h1 { font-size: 31px; }
  .category-description { font-size: 14px; }
  .catalog-card h3 { font-size: 21px; }
  .catalog-card p { font-size: 14px; }
}

@media (max-width: 380px) {
  .button-small { font-size: 9px; padding: 9px; }
  .header-end { gap: 8px; }
  .hero-photographic h1, html[lang=zh-CN] .hero-photographic h1 { font-size: 36px; }
  html[lang=zh-CN] .hero-photographic h1 { font-size: 34px; }
  .hero-photographic .hero-actions .button { font-size: 12px; padding: 12px 14px; }
}