/* Catherine D. Gemstones — Simplified Chinese typography (2026-10-23).
   Loaded on zh/ pages after the shared stylesheets and zh-font.css.
   Rules follow W3C clreq and the Chinese typography notes in the qiaomu-design and cjk-layout skills:
   the serif webfont (Noto Serif SC, subset and embedded) is used only for display text; reading text uses
   the system Chinese sans; Chinese is never set in italic or with negative tracking; leading is looser.
   Heading sizes are about 0.72 of the Portuguese ones: Chinese characters fill the em box, Cormorant's
   letters are small for their size, so the same number reads much larger in Chinese. */

/* Latin keeps Cormorant and Jost; Chinese falls through to Noto Serif SC (subset) or the system sans */
:root{
  --serif:Cormorant,'CDG Song','Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}
html[lang^="zh"] body{line-height:1.8;letter-spacing:0;line-break:strict}
html[lang^="zh"] p{text-wrap:pretty}

/* Chinese has no italic design: everything stands upright; lines that are italic in Portuguese are set apart by colour */
html[lang^="zh"] *{font-style:normal}
html[lang^="zh"] :is(h1,h2) em{color:#766b46}
html[lang^="zh"] :is(.hero,.world,.on-dark) :is(h1,h2) em{color:#c0b286}

/* headings: lighter, open tracking, looser leading */
html[lang^="zh"] :is(h1,h2,h3){font-weight:300;letter-spacing:.06em;line-height:1.3}
html[lang^="zh"] h3{font-weight:400;letter-spacing:.04em}
html[lang^="zh"] summary{letter-spacing:.04em}

/* the original Portuguese name of each piece, kept as a quiet Latin line under the Chinese one */
.slide-original,.piece-original{font:italic 22px/1.2 Cormorant,Georgia,serif;letter-spacing:.01em}
html[lang^="zh"] :is(.slide-original,.piece-original){font-style:italic}
.slide-original{color:#c0b286;margin-top:10px}
.piece-original{color:#766b46;margin-top:8px}
.on-dark .piece-original{color:#c0b286}

/* ------------------------------ shared pieces ------------------------------ */
html[lang^="zh"] dialog h2{font-size:34px;line-height:1.35}
html[lang^="zh"] .piece-information h2{font-size:32px}
html[lang^="zh"] .piece-information>p{font-size:14px;line-height:1.9}
html[lang^="zh"] .inquiry-result h3{font-size:22px}
html[lang^="zh"] :is(.product-kind,.slide-kind,.modal-label,.creation-caption p){letter-spacing:.08em}
html[lang^="zh"] :is(.text-link,.quiet-link,.product-cta,.header-contact,.desktop-nav a,.footer nav a,.credits-button){letter-spacing:.06em}
html[lang^="zh"] .mobile-nav :is(a,button){font-size:24px;font-weight:300;letter-spacing:.08em}
html[lang^="zh"] .closing h2{font-size:clamp(36px,3.8vw,56px);line-height:1.4}
html[lang^="zh"] :is(.collection-head p,.closing p){font-size:16px;line-height:1.9}
html[lang^="zh"] .eyebrow{font-size:17px;letter-spacing:.1em}

/* header button: "咨询" on phones, the full "聊聊你的珠宝" on larger screens */
.header-contact .hc-zh-short{display:none;margin-left:0}
/* language switch: the target language, written in itself */
.desktop-nav .lang-switch{letter-spacing:.14em;opacity:.85}
.desktop-nav .lang-switch:hover{opacity:1}

/* ------------------------------ home ------------------------------ */
@media(min-width:1151px){html[lang^="zh"] .hero h1{font-size:min(clamp(55px,5.8vw,89px),9.2svh)}}
@media(min-width:1600px){html[lang^="zh"] .hero h1{font-size:min(clamp(55px,5.8vw,89px),8.9svh)}}
@media(max-width:1150px) and (min-width:701px){html[lang^="zh"] .hero h1{font-size:min(64px,7.5svh)}}
html[lang^="zh"] .hero-heading>p{letter-spacing:.08em}
html[lang^="zh"] .world h2{font-size:clamp(40px,3.9vw,60px)}
html[lang^="zh"] .section-heading h2{font-size:62px}
html[lang^="zh"] .creation h3{font-size:26px}
html[lang^="zh"] .creation-rings h3{font-size:25px}
html[lang^="zh"] .process h3{font-size:23px}
html[lang^="zh"] .detail h2{font-size:60px}
html[lang^="zh"] .contact h2{font-size:64px}
html[lang^="zh"] :is(.world-copy p,.section-heading>p,.process li p,.detail-copy>p,.contact>p){line-height:1.9}

/* ------------------------------ carousel and catalogue (Criações) ------------------------------ */
html[lang^="zh"] .slide-text h2{font-size:clamp(40px,3.9vw,60px)}
html[lang^="zh"] .slide-line{font-size:21px;font-weight:400;line-height:1.7;letter-spacing:.04em;margin-top:18px}
html[lang^="zh"] .slide-desc{font-size:16px;line-height:1.9;max-width:26em}
html[lang^="zh"] .carousel-tab{font-size:17px;font-weight:400;letter-spacing:.08em}
html[lang^="zh"] .collection-head h2{font-size:clamp(34px,3.4vw,48px)}
html[lang^="zh"] .collection-head p{max-width:36em}
html[lang^="zh"] .collection-filter button{font-size:17px;font-weight:400;letter-spacing:.08em}
html[lang^="zh"] .product-card h3{font-size:19px;line-height:1.45}

/* ------------------------------ stories (Histórias) ------------------------------ */
html[lang^="zh"] .cr-hero h1{font-size:clamp(46px,5vw,75px)}
html[lang^="zh"] .plate-index .t{font-size:19px;letter-spacing:.06em}
html[lang^="zh"] .plate-no{font-size:17px;letter-spacing:.1em}
html[lang^="zh"] .plate h2{font-size:clamp(38px,3.6vw,53px)}
html[lang^="zh"] .emotion{font-size:21px;line-height:1.7;letter-spacing:.04em}
html[lang^="zh"] .aside-line{font-size:18px;line-height:1.7;letter-spacing:.04em}
html[lang^="zh"] .herbarium dd{font-size:16px;line-height:1.6;letter-spacing:.04em}
html[lang^="zh"] .herbarium dt{letter-spacing:.1em}
html[lang^="zh"] .voices b{font-size:18px;letter-spacing:.04em}
html[lang^="zh"] .closer-head h2{font-size:clamp(38px,3.6vw,53px)}
html[lang^="zh"] .d figcaption b{font-size:16px;letter-spacing:.04em}
html[lang^="zh"] :is(.plate p.desc,.closer-head p,.d figcaption,.lede){line-height:1.9}

/* ------------------------------ bespoke (Sob medida) ------------------------------ */
html[lang^="zh"] .sm-hero h1{font-size:clamp(45px,4.6vw,72px)}
html[lang^="zh"] .letter h2{font-size:clamp(36px,3.5vw,50px)}
/* a Latin drop cap does not suit a Chinese opening character */
html[lang^="zh"] .letter .drop::first-letter{float:none;font:inherit;color:inherit;margin:0}
html[lang^="zh"] .letter p{line-height:2}
html[lang^="zh"] :is(.stories-head h2,.sm-process-head h2){font-size:clamp(39px,3.9vw,58px)}
html[lang^="zh"] .story h3{font-size:25px}
html[lang^="zh"] .step-row h3{font-size:30px}
html[lang^="zh"] .note-card li{font-size:17px;line-height:1.6}
html[lang^="zh"] .step-row .note-title{font-size:17px;letter-spacing:.06em}
html[lang^="zh"] :is(.note-foot,.study-more,.color-study figcaption,.b-tag){font-size:15px!important;letter-spacing:.04em}
html[lang^="zh"] .birth h2{font-size:clamp(39px,3.75vw,56px)}
html[lang^="zh"] .faq h2{font-size:clamp(36px,3.6vw,52px)}
html[lang^="zh"] .faq summary{font-size:21px;line-height:1.5}
html[lang^="zh"] :is(.story p,.step-row p,.birth p,.faq details p,.stories-head p,.sm-process-head p){line-height:1.9}

/* ------------------------------ tablet ------------------------------ */
@media(max-width:1150px) and (min-width:701px){
  html[lang^="zh"] .section-heading h2{font-size:50px}
  html[lang^="zh"] :is(.creation h3,.creation-rings h3){font-size:22px}
  html[lang^="zh"] .process h3{font-size:21px}
  html[lang^="zh"] .detail h2{font-size:50px}
  html[lang^="zh"] .contact h2{font-size:55px}
}

/* ------------------------------ phone ------------------------------ */
@media(max-width:700px){
  .header-contact .hc-zh-short{display:inline}
  /* the two-character "咨询" still gets a 44px target */
  .header-contact{min-width:44px;justify-content:center}
  html[lang^="zh"] .hero h1{font-size:min(38px,4.5svh)}
  html[lang^="zh"] .hero-heading>p{font-size:14px}
  html[lang^="zh"] .world h2{font-size:34px}
  html[lang^="zh"] .section-heading h2{font-size:42px}
  html[lang^="zh"] :is(.creation h3,.creation-rings h3){font-size:23px}
  html[lang^="zh"] .process h3{font-size:21px}
  html[lang^="zh"] .detail h2{font-size:46px}
  html[lang^="zh"] .contact h2{font-size:34px}
  html[lang^="zh"] .slide-text h2{font-size:34px}
  .slide-original,.piece-original{font-size:19px}
  html[lang^="zh"] .slide-line{font-size:18px;margin-top:12px}
  html[lang^="zh"] .collection-head h2{font-size:30px}
  html[lang^="zh"] .collection-filter button{font-size:16px}
  html[lang^="zh"] .product-card h3{font-size:16px}
  html[lang^="zh"] .closing h2{font-size:30px}
  html[lang^="zh"] dialog h2{font-size:28px}
  html[lang^="zh"] .piece-information h2{font-size:26px}
  html[lang^="zh"] .inquiry-result h3{font-size:20px}
  html[lang^="zh"] .mobile-nav :is(a,button){font-size:22px}
  html[lang^="zh"] .eyebrow{font-size:16px}
  html[lang^="zh"] .cr-hero h1{font-size:40px}
  html[lang^="zh"] .plate-index .t{font-size:17px}
  html[lang^="zh"] :is(.plate h2,.closer-head h2){font-size:33px}
  html[lang^="zh"] .emotion{font-size:18px}
  html[lang^="zh"] .aside-line{font-size:17px}
  html[lang^="zh"] .herbarium dd{font-size:15px}
  html[lang^="zh"] .voices b{font-size:16px}
  html[lang^="zh"] .sm-hero h1{font-size:37px}
  html[lang^="zh"] .letter h2{font-size:30px}
  html[lang^="zh"] :is(.stories-head h2,.sm-process-head h2){font-size:33px}
  html[lang^="zh"] .story h3{font-size:22px}
  html[lang^="zh"] .step-row h3{font-size:25px}
  html[lang^="zh"] .birth h2{font-size:32px}
  html[lang^="zh"] .faq h2{font-size:32px}
  html[lang^="zh"] .faq summary{font-size:18px}
}

/* headings break at punctuation (CLReq phrase boundaries) instead of inside a phrase;
   if a phrase is wider than the screen it may still break anywhere, so nothing overflows */
html[lang^="zh"] :is(h1,h2,h3,summary){word-break:keep-all;overflow-wrap:anywhere}

/* ------------------------------ catalogue P1 and the ring-size guide (2026-10-23) ------------------------------ */
html[lang^="zh"] .collection-colors button{font-size:14px;letter-spacing:.08em}
html[lang^="zh"] .piece-specs div{font-size:14px;letter-spacing:.04em}
html[lang^="zh"] .piece-related h3{font-size:19px}
html[lang^="zh"] .related-piece span{font-size:15px;letter-spacing:.04em}
html[lang^="zh"] .md-head h1{font-size:clamp(43px,4.6vw,69px)}
html[lang^="zh"] .md-method h2{font-size:27px}
html[lang^="zh"] :is(.md-table h2,.md-tips h2){font-size:clamp(33px,3.3vw,48px)}
html[lang^="zh"] :is(.md-method p,.md-table-intro p,.md-tips li){line-height:1.9}

@media(max-width:700px){
  html[lang^="zh"] .md-head h1{font-size:36px}
  html[lang^="zh"] .md-method h2{font-size:23px}
  html[lang^="zh"] :is(.md-table h2,.md-tips h2){font-size:30px}
}

/* compact showcase (2026-10-23) */
html[lang^="zh"] .slide-text h2{font-size:clamp(34px,3vw,46px)}
html[lang^="zh"] .slide-line{font-size:19px;line-height:1.6;margin-top:12px}
@media(max-width:700px){
  html[lang^="zh"] .slide-text h2{font-size:26px}
  html[lang^="zh"] .slide-line{font-size:15px;line-height:1.6;margin-top:8px}
  html[lang^="zh"] .collection-head h2{font-size:26px}
  html[lang^="zh"] .collection-head p{font-size:14px;line-height:1.8}
}

/* homepage bespoke heading on one line beside the cases (2026-10-24) */
@media(min-width:1151px){html[lang^="zh"] .atelier-teaser .section-heading h2{font-size:clamp(32px,2.7vw,44px)}}
/* 2026-10-27: the hero link follows the headline size (final.css); the Chinese headline has its own size */
@media(min-width:1151px){html[lang^="zh"] .hero{--hero-fs:min(clamp(55px,5.8vw,89px),9.2svh);--hero-lines:2.64}}
@media(min-width:1600px){html[lang^="zh"] .hero{--hero-fs:min(clamp(55px,5.8vw,89px),8.9svh)}}

/* 2026-10-27: the homepage closing, re-set for Chinese: a lighter, smaller title with the second line in the same pale
   gold as the other dark sections (it was a dark gold, hard to read); the line under it in the Song face like the title;
   the button and the notes quieter, on one even rhythm */
html[lang^="zh"] .contact h2{font-size:clamp(46px,4.2vw,58px);line-height:1.4;letter-spacing:.08em}
html[lang^="zh"] .contact h2 em{color:#c0b286}
html[lang^="zh"] .contact>.contact-lede{margin-top:34px;font:300 19px/1.8 var(--serif);letter-spacing:.14em;color:#efe6d4d9}
html[lang^="zh"] .contact>.text-link{margin-top:42px;font-size:16px;letter-spacing:.16em;gap:26px}
html[lang^="zh"] .contact .instagram{margin-top:34px}
html[lang^="zh"] .contact .contact-note{margin-top:18px;letter-spacing:.1em}
@media(max-width:700px){
  html[lang^="zh"] .contact h2{font-size:34px}
  html[lang^="zh"] .contact>.contact-lede{margin-top:26px;font-size:17px}
  html[lang^="zh"] .contact>.text-link{margin-top:32px;font-size:15px}
}

/* ==== UI review round (2026-10-27): docs/ui-review-2026-10-27.md, with the operator's font brief ====
   Faces: titles and names in 思源宋体 (Noto Serif SC subset, light/regular) with Cormorant for Latin; story asides,
   quotes and the letter in 仿宋 for a hand-written-letter feel; reading text in the system sans (PingFang / YaHei)
   at the light weight, small labels kept at regular so they stay legible. Text is a deep forest green, not black;
   gold marks hovers. Story sections get about 30% more air. */
:root{--story:Cormorant,'STFangsong','FangSong','FangSong_GB2312','Songti SC','Noto Serif SC','Source Han Serif SC','STSong',serif}
html[lang^="zh"]{--ink:#1d2c22}
html[lang^="zh"] main :is(p,li,dd){font-weight:300}
html[lang^="zh"] main :is(.product-kind,.slide-kind,.pd-kind,.filter-count,.section-note,.modal-note,.md-note,.piece-specs div,figcaption){font-weight:400}

/* 3 the story voice: asides, quotes and the letter */
html[lang^="zh"] :is(.slide-line,.emotion,.aside-line,.voices b,.note-card li,.letter p){font-family:var(--story);font-weight:400;letter-spacing:.08em}
html[lang^="zh"] .letter p{font-size:18px;line-height:2}
html[lang^="zh"] :is(.emotion,.slide-line){font-size:22px}

/* 10 heading tracking: open on large screens, closer on the phone */
html[lang^="zh"] :is(h1,h2){letter-spacing:.1em}
html[lang^="zh"] main :is(p,li){letter-spacing:.04em}

/* 4 header and footer words at 14px */
html[lang^="zh"] :is(.desktop-nav a,.header-contact,.header-lang,.footer nav a,.footer-lang){font-size:14px;letter-spacing:.08em}

/* 5 piece names a step above the category */
html[lang^="zh"] .product-card h3{font-size:22px;line-height:1.4}

/* 6 small text: 13–14px and one shade darker on the ivory pages */
html[lang^="zh"] :is(.product-kind,.slide-kind,.pd-kind,.filter-count){font-size:13px}
html[lang^="zh"] :is(.section-note,.modal-note,.md-note){font-size:13px!important;color:#4a5143}
html[lang^="zh"] :is(.case figcaption,.cases figcaption){font-size:14px;color:#4a5143}
html[lang^="zh"] .product-kind{color:#56604c}

/* 8 Chinese reading lines at about 30 characters */
html[lang^="zh"] :is(.letter p,.story p,.step-row p,.birth p,.faq details p,.plate p.desc,.pd-desc,.md-method p){max-width:30em}

/* 16 the Portuguese name as a quiet note under the Chinese one */
.piece-original{font-size:17px;color:#8a7d5c;margin-top:6px}
.slide-original{font-size:18px;opacity:.85}

/* gold for hovers and the emphasis lines */
html[lang^="zh"] :is(.text-link,.quiet-link,.instagram){transition:color .25s,border-color .25s}
html[lang^="zh"] :is(.text-link,.quiet-link):hover{border-bottom-color:#c0b286}
html[lang^="zh"] :is(.on-dark,.hero,.world,.contact) :is(.text-link,.quiet-link):hover{color:#c0b286}

/* about 30% more air around the stories */
html[lang^="zh"] .manifesto{padding-top:166px;padding-bottom:125px}
html[lang^="zh"] .letter{padding-top:94px;padding-bottom:84px}
html[lang^="zh"] .stories{padding-top:160px;padding-bottom:176px}
html[lang^="zh"] .plate{padding-top:94px;padding-bottom:166px}
html[lang^="zh"] .closer{padding-top:176px;padding-bottom:156px}

@media(max-width:700px){
  /* 2 the hero title is the largest line on the page again; the section titles step down */
  html[lang^="zh"] .hero h1{font-size:min(44px,5.2svh)}
  html[lang^="zh"] .hero-jewel{top:min(318px,37.7svh)}
  html[lang^="zh"] .section-heading h2{font-size:36px}
  /* 7 */
  html[lang^="zh"] .hero-heading>p{font-size:16px}
  /* 10 */
  html[lang^="zh"] :is(h1,h2){letter-spacing:.04em}
  html[lang^="zh"] .product-card h3{font-size:18px}
  html[lang^="zh"] :is(.emotion,.slide-line){font-size:19px}
  html[lang^="zh"] .letter p{font-size:17px}
  html[lang^="zh"] .manifesto{padding-top:94px;padding-bottom:78px}
  html[lang^="zh"] .letter{padding-top:60px;padding-bottom:52px}
  html[lang^="zh"] .plate{padding-top:62px;padding-bottom:99px}
  html[lang^="zh"] :is(.desktop-nav a,.header-contact,.footer nav a,.footer-lang){font-size:14px}
}
/* 9 a phrase that must not be split across lines */
.nw{white-space:nowrap}
@media(max-width:700px){
  html[lang^="zh"] .sm-world-copy .lede{text-wrap:balance}
  html[lang^="zh"] .slide-text h2{font-size:30px}
}
@media(min-width:1151px){html[lang^="zh"] .atelier-teaser .section-heading h2{font-size:clamp(38px,3.1vw,50px)}}

/* 2026-10-27: on screens wider than a phone the closing title is one line ("下一件作品，从你开始。"); the phone keeps two */
@media(min-width:701px){
  html[lang^="zh"] .contact h2{font-size:clamp(40px,3.5vw,52px);white-space:nowrap}
  html[lang^="zh"] .contact h2 br{display:none}
}
/* the closing lines end in "。" (and the title in tracking): their ink sat left of the centre line, so the block looked
   slanted against the button and notes below. The empty half of the last full-width mark and the trailing tracking are
   given back on the left. */
@media(min-width:701px){
  html[lang^="zh"] .contact h2{padding-left:.7em}
  html[lang^="zh"] .contact>.contact-lede{padding-left:.7em}
}
@media(max-width:1150px) and (min-width:701px){html[lang^="zh"] .contact h2{padding-left:.55em}}
/* the gap after "，" read as a pause too long on one line: "从你开始。" moves in by about a third of a character */
@media(min-width:701px){html[lang^="zh"] .contact h2 em{margin-left:-.32em}}

/* 2026-10-27: the Chinese hero on large screens. The headline is one line ("当色彩遇见不凡。"); the line under it moves
   into the Song face at the light weight, like the headline and the closing line, with the same open tracking; the link
   keeps the rhythm of the Portuguese hero: subtitle 30px under the headline, link about 52px under the subtitle */
@media(min-width:1151px){
  html[lang^="zh"] .hero{--hero-lines:1.3}
  html[lang^="zh"] .hero h1{white-space:nowrap}
  html[lang^="zh"] .hero h1 br{display:none}
  html[lang^="zh"] .hero-heading>p{margin-top:min(30px,3.1svh);font:300 23px/1.8 var(--serif);letter-spacing:.16em;color:#efe6d4e6}
  html[lang^="zh"] .hero-link{top:calc(var(--hero-top) + 1.3 * var(--hero-fs) + min(30px,3.1svh) + 41px + 52px);font-size:16px;letter-spacing:.16em}
}
/* the one-line headline at about 0.85 of the Portuguese size (it was 0.72, set for two lines), and the line under it
   ends where the headline ends: right-aligned under it, with the empty half of the headline's last "。" and its
   tracking taken off so the two visible ends line up */
@media(min-width:1151px){
  html[lang^="zh"] .hero{--hero-fs:min(clamp(65px,6.8vw,105px),10.9svh)}
  html[lang^="zh"] .hero h1{font-size:var(--hero-fs)}
  html[lang^="zh"] .hero-heading>p{text-align:right;padding-right:calc(.76 * var(--hero-fs) - .66 * 23px)}
}
@media(min-width:1600px){html[lang^="zh"] .hero{--hero-fs:min(clamp(65px,6.8vw,105px),10.45svh)}}
/* the pieces keep clear of the right-aligned line: from 1600px they are placed from the Chinese headline (8 characters
   with their tracking, 8.8 of its size), the chain starting 40px past it; below 1600px they sit 30px lower */
@media(min-width:1151px) and (max-width:1599px){html[lang^="zh"] .hero-jewel{translate:0 clamp(0px,5svh - 18px,30px)}}
@media(min-width:1600px){html[lang^="zh"] .hero-jewel{left:min(calc(6% + 8.8 * min(clamp(65px,6.8vw,105px),10.45svh) + 40px - .16 * min(67.2%,980px,97.9svh)),calc(100% - 64px - .8 * min(67.2%,980px,97.9svh)))}}
/* 2026-10-27, later: the line under the headline goes back to the left, under the headline's first character, and is
   set in 仿宋 like the other story lines (the operator's font brief); with it on the left the pieces need no extra room,
   so below 1600px they return to the Portuguese place */
@media(min-width:1151px){
  html[lang^="zh"] .hero-heading>p{text-align:left;padding-right:0;font:400 26px/1.8 var(--story);letter-spacing:.14em}
  html[lang^="zh"] .hero-link{top:calc(var(--hero-top) + 1.3 * var(--hero-fs) + min(30px,3.1svh) + 47px + 52px)}
}
@media(min-width:1151px) and (max-width:1599px){html[lang^="zh"] .hero-jewel{translate:none}}

/* ==== Chinese type system (2026-10-28, approved by the operator; docs/zh-type-review-2026-10-28.html) ====
   标题 Title  — 思源宋体 (CDG Song) light; both lines of a two-line title at the same weight, the second set apart by
                 colour only. One short scale: inner-page H1 64 / 40, section and closing H2 48 / 32, small titles 26 / 22.
   子标题 Lead — 朱雀仿宋 (CDG Fang, embedded, so phones show it too): the line under a headline, the hero and closing
                 lines, a piece's one-line quote, story asides, the bespoke letter. Single lines open (0.12em); paragraphs
                 close (0) and break into lines of even length.
   正文 Body   — the system sans (苹方 / 思源黑体 / 微软雅黑) light, 17 / 16px, 0.04em, leading 1.9.
   标签 Label  — the same sans at regular weight, 13–14px, wide tracking: small words above titles, plate numbers, notes.
   Centred titles and leads give back the empty half of their last full-width mark (and trailing tracking), so the
   ink sits on the centre line. */
:root{--lead:'CDG Fang','STFangsong','FangSong','FangSong_GB2312',serif;--story:var(--lead)}

/* 标题 */
html[lang^="zh"] :is(h1,h2) em{font-weight:300}
html[lang^="zh"] :is(h1,h2){letter-spacing:.08em}
@media(min-width:1151px){
  html[lang^="zh"] :is(.cr-hero h1,.md-head h1,.pd-info h1){font-size:64px}
  html[lang^="zh"] .sm-world-copy h1{font-size:72px}
  html[lang^="zh"] :is(.section-heading h2,.stories-head h2,.sm-process-head h2,.birth h2,.faq h2,.plate h2,.closer-head h2,.letter h2,.collection-head h2,.pd-related h2,.md-table h2,.md-tips h2,.closing h2){font-size:48px}
  html[lang^="zh"] .atelier-teaser .section-heading h2{font-size:44px}
  html[lang^="zh"] .slide-text h2{font-size:44px}
  html[lang^="zh"] :is(.step-row h3,.story h3,.md-method h2){font-size:26px}
}

/* 子标题 */
html[lang^="zh"] :is(.hero-heading>p,.contact>.contact-lede,.section-heading>p,.lede,.collection-head>p,.closer-head>p,.stories-head>p,.sm-process-head>p,.closing>p:not(.wa-note),.slide-line,.emotion,.aside-line,.letter p,.note-card li,.voices b){
  font-family:var(--lead);font-weight:400;letter-spacing:0;text-wrap:balance}
html[lang^="zh"] :is(.hero-heading>p,.contact>.contact-lede,.slide-line){letter-spacing:.12em}
@media(min-width:1151px){
  html[lang^="zh"] :is(.section-heading>p,.lede,.collection-head>p,.closer-head>p,.stories-head>p,.sm-process-head>p,.closing>p:not(.wa-note)){font-size:21px;line-height:1.8}
  html[lang^="zh"] .contact>.contact-lede{font-size:22px}
  html[lang^="zh"] :is(.slide-line,.emotion){font-size:24px;line-height:1.7}
  html[lang^="zh"] .aside-line{font-size:20px}
  html[lang^="zh"] .letter p{font-size:20px;line-height:2}
}
html[lang^="zh"] .sm-world-copy .lede{max-width:26em;margin-inline:auto}

/* 正文 */
html[lang^="zh"] :is(.plate p.desc,.pd-desc,.slide-desc,.story p,.step-row p,.birth p,.faq details p,.md-method p,.md-table-intro p,.md-tips li,.atelier-teaser p){
  font-weight:300;letter-spacing:.04em;line-height:1.9}
@media(min-width:1151px){html[lang^="zh"] :is(.plate p.desc,.pd-desc,.story p,.step-row p,.birth p,.faq details p,.md-method p,.md-table-intro p,.md-tips li,.atelier-teaser p){font-size:17px}}

/* 标签 */
html[lang^="zh"] :is(.eyebrow,.plate-no,.b-tag,.note-foot,.study-more,.color-study figcaption,.d figcaption b,.herbarium dd){
  font-family:var(--sans);font-weight:400;letter-spacing:.16em;font-size:14px!important}

/* centred titles and leads on the centre line */
html[lang^="zh"] :is(.closing h2,.sm-world-copy h1){padding-left:.58em}
html[lang^="zh"] :is(.closing>p:not(.wa-note),.sm-world-copy .lede){padding-left:.5em}

/* phone */
@media(max-width:700px){
  html[lang^="zh"] :is(h1,h2){letter-spacing:.04em}
  html[lang^="zh"] :is(.cr-hero h1,.md-head h1,.pd-info h1,.sm-world-copy h1){font-size:40px}
  html[lang^="zh"] :is(.stories-head h2,.sm-process-head h2,.birth h2,.faq h2,.plate h2,.closer-head h2,.letter h2,.collection-head h2,.pd-related h2,.md-table h2,.md-tips h2,.closing h2){font-size:32px}
  html[lang^="zh"] :is(.step-row h3,.story h3,.md-method h2){font-size:22px}
  html[lang^="zh"] :is(.section-heading>p,.lede,.collection-head>p,.closer-head>p,.stories-head>p,.sm-process-head>p,.closing>p:not(.wa-note),.contact>.contact-lede){font-size:17px;line-height:1.8}
  html[lang^="zh"] :is(.slide-line,.emotion){font-size:19px;line-height:1.7}
  html[lang^="zh"] :is(.aside-line,.letter p){font-size:17px}
  html[lang^="zh"] :is(.plate p.desc,.pd-desc,.slide-desc,.story p,.step-row p,.birth p,.faq details p,.md-method p,.md-table-intro p,.md-tips li,.atelier-teaser p){font-size:16px}
  html[lang^="zh"] :is(.eyebrow,.plate-no,.b-tag,.note-foot,.study-more,.color-study figcaption,.d figcaption b,.herbarium dd){font-size:13px!important}
}

/* ==== Chinese line breaks (2026-10-28) ====
   A sentence is not cut where the browser happens to run out of room. Copy is grouped in the HTML instead of broken
   with <br>:
   .ln  a designed line: always starts a line of its own (the hero title's two lines, the three lines of a lead).
   .ph  a phrase, usually up to a "，" or "。": it stays whole on one line when it fits; a line only breaks between
        phrases. When a phrase is wider than its column (a narrow phone) it may still wrap inside, so nothing overflows.
   Titles break only after punctuation (keep-all, above) and balance their lines; leads balance; body text keeps
   text-wrap:pretty and strict line-breaking, so no line starts with "。" or "，" and no line ends on one character;
   buttons and piece names never break. */
html[lang^="zh"] .ln{display:block}
html[lang^="zh"] .ph{display:inline-block;max-width:100%}
html[lang^="zh"] :is(h1,h2,h3){text-wrap:balance}
html[lang^="zh"] :is(.text-link,.solid-button,.product-cta,.product-card h3,.product-kind){white-space:nowrap}

/* the hero title is two lines on every screen, at the size the one-line title had, so the second line ("都有自己的故事。",
   8 characters) is as long as the old one and the pieces keep their place; the line under it and the link follow it down */
@media(min-width:1151px){
  html[lang^="zh"] .hero{--hero-lines:2.64}
  html[lang^="zh"] .hero h1{white-space:normal;line-height:1.32}
  html[lang^="zh"] .hero-link{top:calc(var(--hero-top) + var(--hero-lines) * var(--hero-fs) + min(30px,3.1svh) + 47px + 52px)}
}
/* phones: the title's longest line (8 characters) always fits the column */
@media(max-width:700px){html[lang^="zh"] .hero h1{font-size:min(44px,5.2svh,calc((100vw - var(--hero-x) - 16px) / 8.5))}}

/* the bespoke lead is three lines; its column fits the longest ("让你的想法，成为值得珍藏的作品。", 16 characters) */
html[lang^="zh"] .atelier-teaser .section-heading>p{max-width:none}
/* between 1151 and 1599px the pieces sit closer to the text. The title stays above the top of the chain (or, where the
   pieces are far enough right, left of it), and the line under it is set as its two phrases, so it ends before the
   star; the link moves down by that second line */
@media(min-width:1151px) and (max-width:1599px){
  html[lang^="zh"] .hero{--hero-fs:min(clamp(65px,6.8vw,105px),10.9svh,max(calc((min(130px,13.5svh) + .265 * min(67.2vw,980px,100.8svh) - 8px - min(165px,17.2svh)) / 2.45),calc((99vw - .85 * min(67.2vw,980px,100.8svh) - var(--hero-x) - 16px) / 8.64)))}
  html[lang^="zh"] .hero-heading>p .ph{display:block}
  html[lang^="zh"] .hero-link{top:calc(var(--hero-top) + var(--hero-lines) * var(--hero-fs) + min(30px,3.1svh) + 94px + 52px)}
}
/* tablets: the bespoke column is narrow (256px at 701), so the title is sized to it and "下一件作品，" stays one line */
@media(max-width:1150px) and (min-width:701px){
  html[lang^="zh"] .atelier-teaser{container-type:inline-size}
  html[lang^="zh"] .atelier-teaser .section-heading h2{font-size:min(50px,15cqi)}
}

/* 2026-10-28: the Chinese catalogue header. The colours and the categories share one row (colours left, categories
   right), so the cards start one row higher; on phones they stay two scrolling rows. */
@media(min-width:701px){
  html[lang^="zh"] .collection-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 48px}
  html[lang^="zh"] .collection-tools .collection-colors{margin:0}
  html[lang^="zh"] .collection-tools .collection-filter{margin:0}
  /* the cards move up: less room above and below the row */
  html[lang^="zh"] .collection-head{margin-bottom:8px}
  html[lang^="zh"] .collection .product-grid{margin-top:8px}
}

/* 2026-10-28: the Chinese bespoke page. Its copy is set in lines (.ln) and phrases (.ph), like the homepage; on phones
   the titles are sized to their column, so a title breaks only between its phrases, never before its last "。" */
@media(max-width:700px){
  html[lang^="zh"] .page-sob-medida .sm-world-copy h1{font-size:min(40px,calc((100vw - 72px) / 7.4))}
  html[lang^="zh"] .page-sob-medida .letter h2{font-size:min(32px,calc((100vw - 88px) / 8.4))}
  html[lang^="zh"] .page-sob-medida .closing h2{font-size:min(32px,max(26px,calc((100vw - 68px) / 11.6)))}
}
/* a clause too long for a narrow column splits at a natural point inside it (.sp); when the column is wide enough the
   clause stays whole, so the split never shows on desktop */
html[lang^="zh"] .ph>.sp{display:inline-block;max-width:100%}

/* privacy note (2026-11-03) */
html[lang^="zh"] .privacy-text p{line-height:1.9;letter-spacing:.04em;max-width:30em;font-weight:300}
html[lang^="zh"] .pd-price{font-size:13px;font-weight:400;letter-spacing:.04em;color:#4a5143}