/* COLERE type & layout system v2 (2026-10-29). Loaded last; supersedes earlier patches. */
:root{
  --fs-xs:13px; --fs-s:15px; --fs-b:18px; --fs-l:22px; --fs-h3:30px; --fs-h2:44px;
  --lh-b:1.7; --lh-h:1.18; --ls-b:0; --ls-h:-.01em;
  --sp-label:20px; --sp-head:36px; --sp-para:1.1em; --sp-sec:168px;
  --ink2:#3a403b;
}
html[lang^="zh"]{--lh-b:1.85; --lh-h:1.4; --ls-b:.03em; --ls-h:.02em; --sp-para:1em}
@media(max-width:900px){:root{--fs-h2:36px;--fs-h3:26px;--sp-sec:120px}}
@media(max-width:650px){:root{--fs-xs:12px;--fs-s:14px;--fs-b:17px;--fs-l:19px;--fs-h3:24px;--fs-h2:30px;--sp-head:24px;--sp-sec:88px}}

html body{font-size:var(--fs-b);line-height:var(--lh-b);letter-spacing:var(--ls-b);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[lang^="zh"] body{line-break:strict;font-feature-settings:"palt" 0}
body p,body li{text-wrap:pretty}
body h2,body h3{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
html[lang^="zh"] body h2,html[lang^="zh"] body h3{word-break:normal}

/* labels: one style everywhere */
body .eyebrow,body .small-label,body .word-number{font:500 var(--fs-xs)/1.4 var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--red)!important;margin:0 0 var(--sp-label)!important}
body .belief .eyebrow{color:#ffe3d6!important}

/* headings */
body h2,body .belief h2,body .about h2,body .contact h2,body .principles-title{font-size:var(--fs-h2)!important;line-height:var(--lh-h)!important;letter-spacing:var(--ls-h)!important;font-weight:400;margin:0 0 var(--sp-head)!important;max-width:15em}
body h3,body .commission h3,body .commission>h3,body .word-entry h3,body .partners h3{font-size:var(--fs-h3)!important;line-height:1.3!important;letter-spacing:var(--ls-h)!important;font-weight:400;margin:0 0 16px!important;max-width:none}
body .partners h3{font-size:var(--fs-l)!important}

/* body copy */
body .about-body,body .about-body p,body .belief p:not(.eyebrow),body .commission>p:not(.small-label),body .service-intro,body .contact-sheet>p:not(.eyebrow),body .partners ul{font-size:var(--fs-b)!important;line-height:var(--lh-b)!important;font-family:var(--sans)!important;color:var(--ink2);max-width:34em!important;min-height:0!important}
html[lang^="zh"] body .about-body p,html[lang^="zh"] body .belief p:not(.eyebrow),html[lang^="zh"] body .commission>p:not(.small-label){max-width:30em!important}
body .belief p:not(.eyebrow){color:inherit}
body .about-body p+p,body .belief-inner p+p{margin-top:var(--sp-para)!important}
body .credit,body .service-note,body .notes-line,body .word-line,body .scope ul,body .footer small,body .opening-kind{font-size:var(--fs-s)!important;line-height:1.7!important;color:var(--muted)!important}
body .credit{margin-top:40px!important;padding-top:20px;border-top:1px solid #20262222;max-width:34em}
body .motto{margin-top:40px!important;font-size:var(--fs-l)!important;line-height:1.5!important;font-weight:500}
body .text-link,body .commission summary{font-size:var(--fs-s)!important}

/* sections: generous rhythm */
body .section{padding-block:var(--sp-sec)!important}
body .about+.about{padding-top:0!important}

/* editorial two-column on desktop: heading left, text right */
@media(min-width:1000px){
  body .about{display:grid!important;grid-template-columns:1fr 1fr;column-gap:96px;align-items:start}
  body .about>.eyebrow{grid-column:1/-1;margin:0 0 28px!important}
  body .about>.about-head{grid-column:1;grid-row:2;position:sticky;top:120px}
  body .about>.about-head h2{margin:0!important;max-width:none!important;text-wrap:wrap}
  body .about>.about-body{grid-column:2;grid-row:2;margin:0!important}
  html[lang^="zh"] body .about h2,html[lang^="zh"] body .section-heading h2{font-size:clamp(34px,2.9vw,42px)!important}
  body .section-heading{display:grid!important;grid-template-columns:1fr 1fr;column-gap:96px;align-items:start!important;margin:0 0 88px!important}
  body .section-heading .eyebrow{grid-column:1/-1;margin:0 0 28px!important}
  body .section-heading h2{grid-column:1;margin:0!important}
  body .section-heading .service-intro{grid-column:2;margin:0!important;padding-top:4px}
  body .commission-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;border-top:1px solid #20262226}
  body .commission{display:flex!important;flex-direction:column;padding:48px 0 0!important;border-top:0!important;grid-row:auto!important}
  body .commission>.small-label{margin:0 0 16px!important}
  body .commission>h3{margin:0 0 16px!important}
  body .commission>p:not(.small-label){margin:0 0 24px!important;font-size:17px!important;line-height:1.85}
  body .commission details{margin:0 0 24px!important}
  body .commission>.text-link{margin-top:auto;align-self:flex-start}
  body .partners{display:grid!important;grid-template-columns:1fr 1fr;column-gap:96px;margin-top:112px!important;max-width:none!important;padding-top:48px;border-top:1px solid #20262226;align-items:start}
  body .partners h3{margin:0!important}
  body .partners-content ul{margin:0;font:17px/1.85 var(--sans);padding-left:1.1em}
  body .partners-content .service-note{margin:36px 0 0!important;font:15px/1.8 var(--sans);color:var(--muted)}
}
@media(max-width:999px){
  body .about{display:flex!important;flex-direction:column}
  body .about>.eyebrow{margin:0 0 14px!important}
  body .about>.about-head h2{margin:0 0 24px!important}
  body .about>.about-body{margin-top:0!important}
  body .commission{padding:40px 0!important}
  body .section-heading{margin-bottom:48px!important}
  body .service-intro{margin-top:0!important}
  body .partners{margin-top:64px!important;padding-top:32px}
  body .partners-content .service-note{margin-top:24px!important}
}

body .contact-sheet .small-label{text-transform:none!important;letter-spacing:.02em!important;color:var(--muted)!important;font-size:var(--fs-s)!important;margin:8px 0 0!important}
/* seven words */
body .principles-title{margin-bottom:56px!important}
body .word-entry summary{padding:32px 0!important;align-items:baseline!important}
body .word-line{color:var(--ink2)!important;font-size:var(--fs-b)!important}
body .word-entry h3{margin:0!important}

/* belief band */
body .belief-inner{padding-block:144px!important}
body .belief h2{margin:48px 0 0!important;font-size:var(--fs-h2)!important}

/* hero copy scaled to the title */
body .opening-lead{font-size:var(--fs-l)!important;line-height:1.5!important;margin-top:40px!important}
body .opening-aux{font-size:var(--fs-s)!important}

/* contact */
body .contact .notes-line{margin-bottom:96px!important;padding-bottom:40px;border-bottom:1px solid #20262222}
body .email-link{font-size:var(--fs-h2)!important;line-height:1.2!important;margin-top:24px}

/* flowing light behind the opening, rice-paper palette */
.opening{position:relative;isolation:isolate}
.opening::before{content:"";position:absolute;z-index:-1;top:-140px;bottom:-60px;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 30%,rgba(210,17,0,.13),transparent 70%),
    radial-gradient(42% 50% at 82% 24%,rgba(206,160,82,.24),transparent 70%),
    radial-gradient(46% 52% at 62% 82%,rgba(54,92,86,.15),transparent 72%),
    radial-gradient(34% 40% at 30% 88%,rgba(232,196,150,.30),transparent 70%);
  background-size:160% 160%;background-position:0% 0%;filter:blur(40px);
  animation:colere-flow 36s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
@keyframes colere-flow{
  0%{background-position:0% 0%}
  33%{background-position:60% 30%}
  66%{background-position:30% 80%}
  100%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.opening::before{animation:none}}

/* principles v1 2026-10-29 */
.principle{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:32px 0;border-top:1px solid #20262220;align-items:start}
.principle:last-child{border-bottom:1px solid #20262220}
body .principle .word-number{margin:0!important;line-height:1.3!important;padding-top:4px}
.principle .principle-head h3{margin:0!important}
.principle-en{margin:6px 0 0;font-size:14px;letter-spacing:.04em;color:var(--muted)}
.principle-body{margin:0;font-size:17px;line-height:1.8;max-width:34em;padding-top:2px}
@media(max-width:650px){.principle{grid-template-columns:28px 1fr;gap:10px 12px;padding:26px 0}.principle-body{grid-column:2;font-size:16px}}
