/* Proportional Latin punctuation for English; retain the Chinese type system. */
html[lang="en"] {
  --font-sans: "MT Latin Text", "MT Text", Arial, sans-serif;
  font-kerning: normal;
}

html[lang="en"] body {
  letter-spacing: normal;
  word-spacing: normal;
}

/* Long English passages need a shorter measure and a closer reading rhythm. */
html[lang="en"] :is(
  .intro-copy, .collection p, .story-copy > p:not(.eyebrow),
  .client-teaser > div > p:not(.eyebrow), .uk > p:not(.eyebrow),
  .profile-heading > p:not(.eyebrow), .letter-chapter p,
  .design-memory p:not(.eyebrow), .new-chapter-band p:not(.eyebrow),
  .stories-deck, .journal-chapter p, .story-ending > p:not(.eyebrow),
  .history-deck, .history-copy > p:not(.eyebrow), .next-chapter-copy p
) {
  line-height: 1.75;
  letter-spacing: normal;
  word-spacing: normal;
  text-wrap: pretty;
}

html[lang="en"] :is(
  .letter-chapter p, .journal-chapter p, .history-copy > p:not(.eyebrow),
  .new-chapter-band p:not(.eyebrow), .next-chapter-copy p
) { max-width: 65ch; }

html[lang="en"] .history-deck { max-width: 64ch; }
html[lang="en"] .stories-deck { max-width: 64ch; }

/* Keep the serif character, without squeezing letters or forcing short lines. */
html[lang="en"] :is(h1, h2, .statement) { letter-spacing: -.025em; }
html[lang="en"] h2 { white-space: normal; }
html[lang="en"] h3 { letter-spacing: -.015em; }
html[lang="en"] :is(.letter-intro h2, .journal-intro h2, .history-copy h2) {
  line-height: 1.25;
}
html[lang="en"] .turnover-value { letter-spacing: -.025em; }

/* Restrained tracking keeps possessives and captions easy to read. */
html[lang="en"] .eyebrow { font-size: .8125rem; letter-spacing: .08em; line-height: 1.7; }
html[lang="en"] :is(.client-byline, .coming, .founder > span:last-child) {
  letter-spacing: .06em;
}

html[lang="en"] :is(.archive-photo figcaption, .story-visual figcaption) {
  letter-spacing: .025em;
  line-height: 1.7;
}
html[lang="en"] :is(.client-teaser figcaption, .featured-quote figcaption) {
  letter-spacing: .06em;
  line-height: 1.7;
}
html[lang="en"] .editorial-note { line-height: 1.7; }
html[lang="en"] .nav a { white-space: nowrap; }

@media (max-width: 700px) {
  html[lang="en"] :is(.history-opening h1, .stories-heading h1) { line-height: 1.2; }
  html[lang="en"] :is(.profile-heading h2, .new-chapter-band h2, .history-next h2) {
    line-height: 1.25;
  }
  html[lang="en"] .eyebrow { letter-spacing: .06em; }
  html[lang="en"] .client-byline { letter-spacing: .045em; }
  html[lang="en"] :is(.client-teaser blockquote, .featured-quote blockquote) {
    line-height: 1.45;
    letter-spacing: -.015em;
  }
}

/* Shared reading rhythm and alignment, for both language editions. */
:root { --reading-width: 64ch; --reading-leading: 1.8; }
html[lang="zh-CN"] { --reading-width: 34em; --reading-leading: 1.95; }
html[lang="zh-CN"] .eyebrow { font-size: .8125rem; line-height: 1.8; }

html[lang] :is(
  .intro-copy, .story-copy > p:not(.eyebrow),
  .client-teaser > div > p:not(.eyebrow), .uk > p:not(.eyebrow),
  .profile-heading > p:not(.eyebrow), .letter-chapter p,
  .design-memory p:not(.eyebrow), .new-chapter-band p:not(.eyebrow),
  .stories-deck, .journal-chapter p, .story-ending > p:not(.eyebrow),
  .history-deck, .history-copy > p:not(.eyebrow), .next-chapter-copy p
) {
  max-width: var(--reading-width);
  font-size: 1rem;
  line-height: var(--reading-leading);
  letter-spacing: normal;
  word-spacing: normal;
  word-break: normal;
  overflow-wrap: break-word;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}
html[lang="zh-CN"] :is(p, figcaption) { line-break: strict; }
.brand-name { white-space: nowrap; }
/* The words define each heading's centre; Chinese punctuation hangs outside. */
html[lang] main { text-align: center; }
html[lang] main :is(h1, h2, h3, p, blockquote, figcaption) { text-align: center; }
html[lang] main .typeset-title { white-space: normal; }
.typeset-title .title-line {
  display: block; padding-inline: .55em; text-align: center;
  white-space: normal; text-wrap: balance;
}
.typeset-title .title-tail { display: inline; white-space: nowrap; }
.typeset-title .title-punctuation {
  display: inline-block; width: 0; letter-spacing: 0;
  white-space: nowrap; text-align: start;
}
.letter-chapter p + p, .journal-chapter p + p { margin-top: 1em; }
html[lang] :is(.profile-heading h2, .letter-intro h2, .journal-intro h2,
  .new-chapter-band h2, .brand-history h2) { white-space: normal; text-wrap: balance; }

/* Centre copy and controls within each section, across all four routes. */
.hero-copy { align-items: center; padding-inline: 9%; }
.profile-heading { padding-inline: 10%; }
.hero-copy :is(h1, p) { width: 100%; }
.hero-description, .figure-note, .editorial-note { margin-inline: auto; }
.hero-image figcaption { left: 24px; right: 24px; margin-inline: auto; }
/* Pin the portraits to their frames instead of using the centred text position. */
.hero-image img, .profile-portrait img {
  inset: 0; display: block; object-position: 50% 0%;
}
html[lang="en"] .hero-image figcaption {
  left: 16px; right: 16px; max-width: none; white-space: nowrap; letter-spacing: .025em;
}
.story-links { justify-content: center; }
html[lang] main :is(.text-link, .light-text-link) {
  margin-inline: auto; max-width: 100%; justify-content: center; text-align: center;
}
main :is(.contact-actions, .showcase-intro, .showcase-contact) { align-items: center; justify-content: center; }
.letter-body > .text-link { display: table; margin-inline: auto; }
.letter-chapter, .journal-chapter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.chapter-number { text-align: center; padding-top: 0; }
.design-memory > div, .turnover { text-align: center; }
.product-group-heading { flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.introduction, .stories-heading, .history-opening, .uk, .story-ending { text-align: center; }
.stories-heading h1, .history-opening h1 { max-width: 19em; margin-inline: auto; }
.introduction .statement { max-width: 20em; margin-inline: auto; }
.intro-copy, .stories-deck, .history-deck,
.uk > p:not(.eyebrow), .story-ending > p:not(.eyebrow) { margin-inline: auto; }
html[lang] :is(.uk.section, .story-ending.content-width) > p:not(.eyebrow) {
  max-width: 42ch; margin-inline: auto; text-align: center; text-wrap: balance;
}
html[lang="zh-CN"] :is(.uk.section, .story-ending.content-width) > p:not(.eyebrow) {
  max-width: 28em;
}
.client-byline { justify-content: center; font-size: .875rem; line-height: 1.7; }
.history-founder { justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
.history-founder span { letter-spacing: .06em; }
.profile-heading { text-align: center; }
.profile-heading h2 { max-width: 24em; margin-inline: auto; }
.profile-heading h1 span { padding-left: .3em; }
.profile-heading > p:not(.eyebrow) { margin-inline: auto; }
.new-chapter-band .content-width, .history-next .content-width { text-align: center; }
.new-chapter-band h2, .history-next h2 { max-width: 22em; margin-inline: auto; }
.new-chapter-band p:not(.eyebrow), .next-chapter-copy { margin-inline: auto; }
.next-chapter-copy { max-width: var(--reading-width); }
.chapter-emblem { margin-inline: auto; }
.new-chapter-band .contact-actions, .history-next .contact-actions { justify-content: center; align-items: center; }
.chapter-signature, .founder-belief figcaption { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.chapter-signature span, .founder-belief figcaption span { margin-left: 0; }
.founder-belief figcaption .signature-name {
  font: inherit; color: inherit; letter-spacing: normal; white-space: nowrap; flex: none;
}
.founder-belief { max-width: 44rem; margin-inline: auto; }
.founder-belief blockquote { text-wrap: balance; }

/* Quotes and image labels sit on the centre of their own visual area. */
.featured-quote figure { max-width: 54rem; padding-left: 0; text-align: center; }
.featured-quote .quote-mark { position: static; display: block; height: 2.75rem; font-size: 4.5rem; line-height: 1; margin-bottom: 18px; }
html[lang] .featured-quote blockquote { max-width: 30ch; margin-inline: auto; white-space: normal; font-size: clamp(1.5rem, 3.6vw, 2.875rem); line-height: 1.45; }
.featured-quote blockquote p { white-space: normal; text-wrap: balance; }
html[lang="zh-CN"] .featured-quote blockquote { max-width: 22em; line-height: 1.7; }
.client-teaser figure { text-align: center; padding-inline: clamp(20px, 3vw, 44px); }
.client-teaser blockquote { text-wrap: balance; }
.client-teaser figcaption, .featured-quote figcaption { font-size: .875rem; }
.archive-photo figcaption, .story-visual figcaption { text-align: center; max-width: 62ch; margin-inline: auto; font-size: .875rem; }
.figure-note { font-size: .875rem; line-height: 1.75; }
.product-showcase > .section-heading { justify-content: center; text-align: center; }
.product-showcase .showcase-intro, .product-showcase .showcase-contact { flex-direction: column; text-align: center; align-items: center; gap: 12px; }
.product-showcase .showcase-intro p, .product-showcase .showcase-contact p { margin-inline: auto; max-width: 42ch; text-wrap: balance; }
.product-card figcaption { text-align: center; }
.product-card figcaption span { margin-inline: auto; text-wrap: balance; }
.wordmark > span { text-align: center; }
.footer-top p { text-align: center; }
.footer-contact a { justify-self: center; justify-content: center; text-align: center; }

@media (min-width: 701px) and (max-width: 1050px) {
  .letter-body, .journal-chapters { width: 100%; max-width: 44rem; margin-inline: auto; }
  .letter-intro, .journal-intro { text-align: center; }
  .journal-intro { display: block; }
  .editorial-note { margin: 20px auto 0; max-width: 48ch; }
}
@media (max-width: 700px) {
  /* Identical side margins for each continuous passage on a phone. */
  .history-opening, .stories-heading { text-align: center; }
  .hero-copy { align-items: center; text-align: center; }
  .hero-copy .hero-description { margin-inline: auto; max-width: 30ch; text-wrap: balance; }
  .hero-note { text-align: center; }
  .profile-heading h1 span { padding-left: .28em; }
  .letter-intro, .journal-intro { text-align: center; }
  .editorial-note { max-width: var(--reading-width); margin-inline: auto; text-align: center; }
  .letter-body, .journal-chapters { width: 100%; margin-inline: auto; }
  .letter-chapter, .journal-chapter { gap: 12px; }
  .letter-chapter h3, .journal-chapter h3 { line-height: 1.45; margin-bottom: 16px; }
  .client-teaser figure { padding-inline: 0; }
  .client-byline { align-items: center; gap: 6px; }
  .design-memory > div:first-child { text-align: center; }
  .design-memory h2 { text-align: center; }
  .new-chapter-band .contact-actions, .history-next .contact-actions { align-items: center; }
  .turnover { text-align: center; }
  .turnover .figure-note { margin-inline: auto; max-width: 34ch; }
  .footer-bottom { gap: 6px; }
  .hero-copy, .profile-heading { padding-inline: var(--gutter); }
  main .contact-actions { gap: 16px; }
  main .contact-actions :is(.text-link, .light-text-link) {
    width: 100%; max-width: 18rem; min-height: 48px; margin-top: 0;
    justify-content: center; text-align: center; text-wrap: balance;
  }
  .story-links { flex-direction: column; align-items: center; }
  .js .nav a { justify-content: center; text-align: center; }
}

@media (max-width: 700px) {
  .design-memory > div:last-child > .eyebrow { text-align: center; }
}