/* RUI MEDIA / VI convergence layer Align the rendered site with the approved SSOT palette and type roles. The earlier styles remain in place as a reversible source layer. */ :root{ --rui-ink:#041528; --rui-paper:#FFFFFF; --rui-slate:#546477; --rui-gold:#C4A86A; --rui-silver:#BDBCBC; --rui-taupe:#AC9D92; --rui-editorial:"RUI Editorial","RUI Modern Serif CN","Songti SC","Source Han Serif SC","Noto Serif CJK SC",serif; --rui-text:"RUI Text","RUI Modern Serif CN","PingFang SC","Source Han Sans SC","Noto Sans CJK SC","Helvetica Neue",sans-serif; --rui-city:"RUI City","SFMono-Regular",ui-monospace,monospace; --ink:var(--rui-ink); --navy:var(--rui-ink); --paper:var(--rui-paper); --muted:var(--rui-slate); --gold:var(--rui-gold); --line:rgba(4,21,40,.16); --serif:var(--rui-editorial); --sans:var(--rui-text); --v6-paper:var(--rui-paper); --v6-ink:var(--rui-ink); --v6-hair:rgba(4,21,40,.2); } .site-header .menu-toggle{min-width:44px} .journal-back button.project-consult{appearance:none;min-height:44px;background:transparent;border:0;border-bottom:1px solid currentColor;font-weight:400;text-align:left;cursor:pointer} .journal-back button.project-consult:focus-visible{outline:2px solid var(--rui-gold);outline-offset:6px} body{background:var(--rui-paper);color:var(--rui-ink);font-family:var(--rui-text)} main h1,main h2,main h3,main h4,.brand-text,.lightbox-brand{font-family:var(--rui-editorial)} .eyebrow,.hero-label,.hero-caption span,.work-meta,.image-caption,.photo-result,.footer-bottom,.footer-filing{font-family:var(--rui-city),var(--rui-text)} .v7-wall,.home-v2 .hero-v2,.v2-ai,.page-ai .page-head,.ai-project-hero,.pilot,.image-chapter,.collection-hero,.market-method,.partnership-core,.team-principle{background:var(--rui-ink)} .v7-wall{color:var(--rui-paper)} .v6-lightbox,.v6-lightbox::backdrop,.photo-dialog,.photo-dialog::backdrop{background:var(--rui-ink)} .v6-lightbox{color:var(--rui-paper)} .v2-capabilities,.service-section,.footer,.contact-band,.journal-feature-image,.article-cover.portrait-cover img,.collection-full img{background:var(--rui-paper)} .v2-ai,.pilot,.ai-project-hero,.image-chapter,.collection-hero,.market-method,.partnership-core,.team-principle{color:var(--rui-paper)} .v2-ai-copy>p,.ai-project-hero .ai-definition,.pilot-steps p,.scope-note p,.market-method p,.partnership-core p,.team-principle p{color:var(--rui-silver)} .client-wall strong,.partnership-map article>span,.team-roles article>span,.project-number,.market-method b{font-family:var(--rui-editorial)} .hero h1,.hero h2,.hero-v2 h1,.hero-aside h2,.section-title,.work-card h3,.service-intro h2,.feature-copy h2,.image-interlude h2,.home-journal h2,.home-journal h3,.portfolio-heading h1,.journal-heading h1,.journal-feature h2,.journal-story h2,.article-head h1,.article-prose h2,.ai-project-title h3,.deliverable-scene h2,.deliverable-scene h3{font-family:var(--rui-editorial)} /* Resolve the remaining runtime traces of the earlier green/beige concept. Neutral surfaces are derived from the SSOT slate and white rather than introducing another fixed colour. The source layers stay reversible. */ ::selection{background:var(--rui-gold);color:var(--rui-ink)} .home-v2 .site-header,.hero-v2,.image-chapter,.photo-dialog,.v6-lightbox{color:var(--rui-paper)} .hero-v2,.image-chapter,.page-ai .page-head,.photo-dialog,.photo-dialog::backdrop,.v6-lightbox,.v6-lightbox::backdrop{background-color:var(--rui-ink)} .home-v2 .site-header,.hero-v2-content,.hero-controls{text-shadow:0 1px 14px rgba(4,21,40,.55)} .v2-capabilities,.service-section,.case-quote,.scenario-section,.demo-panel,.raw-brief,.brief-note,.situation-tabs,.case-card-image,.case-cover,.case-figure button{ background-color:color-mix(in srgb,var(--rui-slate) 8%,var(--rui-paper)); } .v2-ai,.ai-section,.ai-visual,.ai-paper,.demo-panel article,.contact-band,.footer{border-color:var(--line)} .v2-intro p,.editorial-opening figcaption,.mosaic-label,.work-card p,.service-intro p,.service-detail,.page-head p,.photography-head p,.gallery-filters button,.gallery-count,.image-caption,.lightbox-caption,.footer-contact,.footer-bottom,.case-story p,.case-source,.scenario-grid p,.demo-panel p,.principles p,.journal-row p,.journal-row time,.modal p,.demo-note,.count-note,.market-pain,.market-evidence-head p{ color:var(--rui-slate); } .hero-aside p,.hero-label small,.v2-ai-copy>p,.v2-flow,.page-ai .page-head p,.page-ai .status-tag,.market-method p{color:var(--rui-silver)} .client-wall strong,.media-stat,.team-roles article>span,.partnership-map article>span,.market-tabs span,.market-work>span,.market-method b,.social-form legend span{ font-family:var(--rui-editorial); font-weight:400; } .media-stat span{font-family:var(--rui-text);font-weight:400} .arrow,.case-arrow,.fold-photo i{font-family:var(--rui-text)} /* At phone width, four editorial criteria need a reading column rather than two narrow text columns. Tablet and desktop grids remain unchanged. */ @media(max-width:480px){ /* The generic mobile hero joins the two lines for Chinese. English needs the authored break, otherwise "Every brand.A world" loses its space. */ .locale-en .hero-v2[data-curated-hero] .hero-aside h2 br{display:block} /* The hotel list intentionally scrolls horizontally. A restrained fade makes the continuation legible instead of leaving a hard-cut label. */ .photo-collection-filters, .case-filters{ padding-right:34px; -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%); } /* Keep short Chinese place names together in editorial headlines. The browser may still break at punctuation, but not inside "杭州". */ :lang(zh-CN) :is(.article-head h1,.case-title h1){word-break:keep-all;overflow-wrap:normal} .output-pack{grid-template-columns:1fr;gap:30px} .output-pack article{padding-top:18px} .output-pack h3{font-size:20px;margin:15px 0 10px} .output-pack p{font-size:13px;line-height:1.9} } /* English headings: prevent a single short word stranded on the last line. Measured across all 40 English pages / 416 headings at 390px: 28 orphans before, 3 after, no heading grew or lost a line, and no already-balanced heading was disturbed (text-wrap:balance was rejected because it split "Design &" and "Editorial," onto lines of their own). Scoped to lang="en" on purpose: Chinese line breaks here are authored punctuation breaks and must not be re-flowed. */ html[lang="en"] main h1, html[lang="en"] main h2, html[lang="en"] main h3{text-wrap:pretty} /* Chinese headings: a Chinese line must not break inside a word, and the lines of a heading should be evenly weighted. Why these two properties together, measured across all 81 pages / 1722 heading renderings at 390px and 1440px: word-break:keep-all - a Chinese line may not break between two characters. Chinese breaks are then only possible at authored punctuation, which is where a designer would put them, and the browser's own rules keep "。" and "，" off the start of a line. text-wrap:balance - once a break is allowed, the lines are spread evenly, so the last line is not left short. Result, against the previous no-rule state: 390px Chinese orphan headings 51 -> 0 1440px Chinese orphan headings 8 -> 0 line-start punctuation errors 0 -> 0 (a "。" alone on its own line was the failure mode of the keep-all + overflow-wrap:anywhere combination) horizontal overflow pages 0 -> 0 English headings unchanged (the lang="en" rule above still governs them) Rejected alternatives, all measured on the same 81 pages: text-wrap:balance alone 6 orphans left, but it cuts words apart ("是我" / "们的工作底色。", "这些分" / "工如何接在一起。"). text-wrap:pretty alone 46 orphans left; it works on words and Chinese has no spaces. keep-all + overflow-wrap:anywhere 13 orphans and 7 headings where a "。" or "，" started a line, because the emergency break ignores the punctuation rules. Note for future edits: a Chinese heading with no punctuation inside it has no legal break point under keep-all and would widen its column. Eleven such headings were given an authored break (about, journal, markets, ruiditor x4, services, solutions x3). New headings must do the same, and the heading-fit check in qa/ must stay green. */ :lang(zh-CN) main h1, :lang(zh-CN) main h2, :lang(zh-CN) main h3{word-break:keep-all;text-wrap:balance} /* Some Chinese headings are running sentences rather than display lines. The social-brief intro is the clearest case: "把已经确定的、尚未确定的， 以及…" has no break point inside its longest clause, so under keep-all that clause sets the column width and pushes the whole page sideways on a phone (measured 99px of overflow at 390px). This one heading opts out of keep-all and wraps as normal Chinese, which keeps the punctuation rules. Every other heading on the site keeps keep-all. */ .page-social-brief .brief-intro h2{word-break:normal} /* An authored Chinese break that the English must not inherit. A Chinese heading may need its break point in a place where the English sentence breaks badly. The span carries the
for the Chinese page and is removed on the English page, so the English line wrapping stays exactly as it was. The space that follows the span belongs to the English translation, not to the Chinese one. */ .locale-en .zh-only-break{display:none} /* Narrow phones (below 380px): the type sizes here are fixed, not fluid, so an authored break point can leave a line wider than the column. Below that width the Chinese headings fall back to normal Chinese line breaking, which keeps the browser's punctuation rules and never pushes the page sideways. Measured at 375px / 360px / 320px: zero overflowing headings caused by this rule, zero punctuation at the start of a line. Above 380px nothing changes. */ @media (max-width:379px){ :lang(zh-CN) main h1, :lang(zh-CN) main h2, :lang(zh-CN) main h3, :lang(zh-CN) :is(.article-head h1,.case-title h1){word-break:normal} } /* Narrow screens: the display headings of the journal, home and collection pages are fixed sizes below 800px (67px, and clamp(60px…) on the collection hero). A long English word cannot break, so at 320–390px "perspective.", "presence." and "remember." became wider than their column and pushed the whole page sideways. The size is fluid below 800px now and only shrinks where the column is narrow: 320px → 41.6px, 360px → 46.8px, 390px → 50.7px, 430px → 55.9px, 480px and above → unchanged (67px / the previous clamp). The Chinese headings shrink with them, so both languages keep the same scale on the same device. */ @media (max-width:800px){ .journal-heading h1{font-size:clamp(40px,13vw,67px)} .home-work-heading h2{font-size:clamp(40px,13vw,67px)} .collection-hero h1{font-size:clamp(44px,15vw,90px)} } /* The project filter is a native