/* 化成社首页样式 · 2026-10-24 晚重排
   原则：一张连续的宣纸，不用分格线；需要分隔处用手撕纸片；印章作为纸上固有的一方印；最小字号 14px。 */
:root{--paper:#f3eee7;--ink:#292f2a;--red:#d21100;--muted:#5f635b;--sheet:#e9e1d2;
--serif:Georgia,'Times New Roman',serif;--display:'Bodoni 72','Bodoni Moda','Didot',Georgia,serif;
--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
html[lang='zh-CN']{--serif:'Songti SC','STSong','Noto Serif CJK SC',serif;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate;min-height:100vh}
/* 宣纸：载入时位置、镜像与深浅轻微变化（paper.js），阅读时静止；正文区域略作淡化。 */
body:before,body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1}
body:before{background-image:url('assets/paper.webp');background-size:cover;background-repeat:no-repeat;background-position:var(--paper-x,50%) var(--paper-y,50%);opacity:var(--paper-opacity,.74);transform:scale(var(--paper-flip-x,1),var(--paper-flip-y,1))}
body:after{background:linear-gradient(90deg,rgb(243 238 231 / 8%),rgb(243 238 231 / 40%) 28%,rgb(243 238 231 / 40%) 72%,rgb(243 238 231 / 8%))}
a{color:inherit;text-decoration:none}a:hover{color:var(--red)}
button,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:6px}
img{max-width:100%;height:auto}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1,h2,h3{font-weight:400;hyphens:manual;text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:min(1200px,calc(100% - 112px));margin-inline:auto}
.skip{position:absolute;top:-100px;background:var(--paper);padding:12px;z-index:100}.skip:focus{top:10px}

/* 页头：字标 + 口号，无分隔线 */
.header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding-block:34px 10px}
.brand{display:flex;align-items:center;gap:26px}
.brand img{display:block;width:150px}
.slogan{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:.01em;color:var(--ink);white-space:nowrap;padding-top:4px}
.slogan .c{color:var(--red);font-style:italic}
.header nav{display:flex;justify-content:flex-end;gap:30px;font:15px var(--sans)}
.language-switch{display:flex;gap:16px;font:14px var(--sans)}
.language-switch a{padding:6px 0;color:var(--muted)}
.language-switch a[aria-current]{color:var(--red);border-bottom:1px solid currentColor}

/* 首屏：文字在左，印章作纸上固有的一方印 */
.hero{position:relative;min-height:min(820px,calc(100svh - 120px));display:flex;align-items:center;padding-block:40px 80px}
.hero-seal{position:absolute;right:-20px;top:50%;transform:translateY(-52%);height:min(560px,68vh);width:auto;opacity:.34;mix-blend-mode:multiply;pointer-events:none;z-index:0;user-select:none}
.hero-copy{position:relative;z-index:1;max-width:760px}
.eyebrow,.small-label{font:14px/1.5 var(--sans);letter-spacing:.06em;color:var(--muted)}
.red-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:12px;vertical-align:1px}
.hero h1{font-size:clamp(54px,6vw,88px);line-height:1.1;letter-spacing:-.04em;margin:30px 0}
.hero h1 em{font-style:normal;color:var(--red)}
html[lang='zh-CN'] .hero h1{font-size:clamp(44px,4.9vw,72px);line-height:1.4;letter-spacing:.03em}
.hero-lead{max-width:560px;font-size:19px;line-height:1.8;margin-bottom:34px}
.text-link{display:inline-flex;align-items:center;gap:16px;font:15px/1.6 var(--sans);border-bottom:1px solid var(--red);padding-bottom:5px}
.text-link span{color:var(--red)}

/* 版块：靠留白分段，不画线 */
.section{padding-block:120px 110px}
.section-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:60px;margin:26px 0 70px}
h2{font-size:clamp(36px,3.9vw,56px);line-height:1.22;letter-spacing:-.03em}
html[lang='zh-CN'] h2{letter-spacing:.04em;line-height:1.45}
.service-intro,.how-intro{font-size:18px;line-height:1.8;max-width:440px;color:var(--muted);padding-bottom:10px}

/* 我们做什么：三栏，无边框 */
.commission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;align-items:start}
.commission{display:grid;gap:0}
.commission h3{font-size:clamp(28px,2.4vw,34px);line-height:1.3;margin:22px 0 18px}
.commission>p:not(.small-label){font-size:18px;line-height:1.75;max-width:420px}
.commission details{margin:28px 0 26px}
.commission summary{display:inline-flex;align-items:center;gap:14px;cursor:pointer;list-style:none;font:15px/1.6 var(--sans);color:var(--muted)}
summary::-webkit-details-marker{display:none}
.commission summary span{color:var(--red);font-size:22px;line-height:1;transition:transform .2s}
.commission details[open] summary span{transform:rotate(45deg)}
.commission summary:hover{color:var(--red)}
.scope{margin-top:22px}
.scope .small-label{color:var(--red);margin:14px 0 8px}
.scope ul{padding-left:18px;font-size:16px;line-height:1.85}
.service-note{font:15px/1.8 var(--sans);color:var(--muted);margin-top:60px;max-width:700px}
@supports(grid-template-rows:subgrid){@media(min-width:1001px){.commission{grid-template-rows:subgrid;grid-row:span 5;align-content:start}.commission details{align-self:start}}}

/* 我们怎么做：七个词流动排开 */
.word-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:54px 44px;margin-bottom:64px}
.word-grid li:nth-child(n+5){grid-column:span 1}
.word-grid h3{font-size:30px;line-height:1.25;letter-spacing:.06em;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
html:not([lang='zh-CN']) .word-grid h3{letter-spacing:-.02em}
.word-grid h3 small{font:15px 'Songti SC','STSong','Noto Serif CJK SC',serif;letter-spacing:.2em;color:var(--red)}
.word-grid p{margin-top:12px;font-size:16px;line-height:1.75;color:var(--muted);max-width:260px}

/* 立场：一片手撕的朱砂纸 */
.belief{padding-block:40px 20px;color:var(--paper);overflow:hidden}
.belief-sheet{position:relative;margin-inline:-5vw;background:var(--red);-webkit-mask:url('assets/torn-mask-contact.png') center/100% 100% no-repeat;mask:url('assets/torn-mask-contact.png') center/100% 100% no-repeat}
.belief-sheet:before{content:'';position:absolute;inset:0;background:url('assets/paper.webp') center/cover;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.belief-inner{position:relative;padding-block:150px 160px;max-width:900px;margin-inline:auto}
.belief .eyebrow{color:#f0dfd3}
.belief h2{font-size:clamp(38px,4.6vw,66px);margin:30px 0 24px;max-width:820px}
.belief p:not(.eyebrow){font-size:20px;line-height:1.7;max-width:620px}
.belief .text-link{margin-top:44px;border-bottom-color:#f3eee7}
.belief .text-link span,.belief a:hover{color:#fff}

/* 关于 */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:center}
.about h2{margin-top:26px;font-size:clamp(34px,3.3vw,46px)}
.about>p{font-size:19px;line-height:1.85;max-width:520px}

/* 联络：一张手撕的素纸 */
.contact{padding-block:30px 90px}
.contact-sheet{position:relative;max-width:820px;padding:96px clamp(56px,9%,110px) 104px;background:var(--sheet);-webkit-mask:url('assets/torn-mask-a.png') center/100% 100% no-repeat;mask:url('assets/torn-mask-a.png') center/100% 100% no-repeat}
.contact-sheet:before{content:'';position:absolute;inset:0;background:url('assets/paper.webp') center/cover;opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.contact-sheet>*{position:relative}
.contact h2{margin:22px 0 16px;font-size:clamp(34px,3.6vw,50px)}
.contact-sheet>p:not(.eyebrow){font-size:18px;max-width:520px}
.email-link{display:inline-block;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.03em;line-height:1.4;margin-top:36px;border-bottom:1px solid var(--ink)}
.email-link span{font-size:.6em;margin-left:18px;color:var(--red)}

/* 页脚 */
.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px 44px;font:14px/1.7 var(--sans);color:var(--muted)}
.footer small{font-size:14px;max-width:420px}

/* 停驻洇墨 */
.ink-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.ink-drop{position:absolute;width:var(--ink-size,48px);height:var(--ink-size,48px);transform:translate(-50%,-50%) rotate(var(--ink-turn,0deg));border-radius:44% 56% 48% 52%;background:radial-gradient(ellipse at 48% 48%,rgb(31 36 33 / 23%) 0%,rgb(31 36 33 / 14%) 12%,rgb(31 36 33 / 7%) 35%,rgb(31 36 33 / 3%) 57%,transparent 73%);opacity:1;transition:opacity 10s ease;pointer-events:none}
.ink-drop.is-fading{opacity:0}

@media(min-width:1500px){.hero{min-height:860px}}
@media(max-width:1100px){.header{grid-template-columns:1fr auto;gap:18px 30px}.header nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:24px}.language-switch{grid-column:2;grid-row:1}.slogan{font-size:17px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero-seal{height:min(440px,52vh);opacity:.26}.section-heading{grid-template-columns:1fr;gap:26px;align-items:start}.service-intro,.how-intro{max-width:620px}.commission-grid{grid-template-columns:1fr;gap:48px}.commission>p:not(.small-label){max-width:620px}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.about{grid-template-columns:1fr;gap:30px}.belief-sheet{margin-inline:-10vw}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.header{padding-block:22px 6px;gap:14px}.brand{flex-direction:column;align-items:flex-start;gap:10px}.brand img{width:120px}.slogan{font-size:16px;white-space:normal;padding-top:0}.header nav{flex-wrap:wrap;gap:8px 20px;font-size:14px}.language-switch{font-size:14px}
.hero{min-height:0;padding-block:40px 60px;display:block}.hero-seal{right:-6px;top:-10px;transform:none;height:220px;opacity:.22}.hero h1{font-size:clamp(40px,10.5vw,58px);margin:26px 0 22px;line-height:1.12}html[lang='zh-CN'] .hero h1{font-size:clamp(34px,8.6vw,48px);letter-spacing:.01em}.hero-lead{font-size:17px;line-height:1.8}
.section{padding-block:72px 64px}.section-heading{margin:18px 0 40px}h2{font-size:clamp(32px,8vw,40px)}.service-intro,.how-intro{font-size:17px}.commission h3{font-size:30px}.commission>p:not(.small-label){font-size:17px}
.word-grid{grid-template-columns:1fr;gap:30px;margin-bottom:44px}.word-grid h3{font-size:28px}.word-grid p{max-width:none}
.belief{padding-block:20px 10px}.belief-sheet{margin-inline:-14vw}.belief-inner{padding:110px 14vw 120px;width:100%}.belief h2{font-size:clamp(32px,8vw,40px)}.belief p:not(.eyebrow){font-size:17px}
.about h2{font-size:32px}.about>p{font-size:17px}
.contact{padding-block:20px 60px}.contact-sheet{padding:74px 12% 84px}.contact h2{font-size:32px}.contact-sheet>p:not(.eyebrow){font-size:17px}.email-link{font-size:clamp(22px,6.4vw,32px);letter-spacing:-.03em}.email-link span{margin-left:8px}
.footer{align-items:flex-start;flex-wrap:wrap;gap:10px}.footer small{order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.ink-layer{display:none}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.ink-layer{display:none}}

/* Typographic opening: movement resolves into a legible, stable composition. */
:root{--paper:#f6f5f0;--ink:#202622;--red:#d21100}
body:before,body:after{display:none}
.header{grid-template-columns:1fr auto;padding-block:28px 0;gap:20px}
.header .brand{width:140px}.header .brand img{width:140px}
.header .language-switch{grid-column:2;grid-row:1;align-self:center}
.opening{min-height:calc(100svh - 100px);display:flex;flex-direction:column;justify-content:center;padding-block:45px 30px;position:relative}
.opening-title{font-family:Arial,Helvetica,sans-serif;font-weight:500;font-size:clamp(64px,11.2vw,168px);line-height:.97;letter-spacing:-.075em;width:100%;padding-block:10px 55px;text-wrap:nowrap}
.opening-line{display:block;will-change:transform;animation:assemble 1.5s cubic-bezier(.2,.7,.2,1) both}
.line-one{--from:-5%;animation-delay:.05s}
.line-two{color:var(--red);padding-left:18%;--from:8%;animation-delay:.15s}
.line-three{padding-left:7%;--from:-3%;animation-delay:.25s}
.line-three i{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}
.period{color:var(--red)}
.opening-enter{display:flex;align-items:center;justify-content:space-between;width:155px;font:13px/1.6 var(--sans);padding-block:14px;border-bottom:1px solid var(--ink);margin-top:30px}
.opening-enter span:last-child{font-size:25px;color:var(--red)}
@keyframes assemble{from{transform:translateX(var(--from));opacity:.15}to{transform:translateX(0);opacity:1}}
.service-intro,.commission p,.commission ul,.service-note,.about>p{font-family:var(--sans)}
.belief-sheet,.contact-sheet{clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;background-image:none!important;transform:none!important}
.belief-sheet:before,.belief-sheet:after,.contact-sheet:before,.contact-sheet:after{display:none!important}
@media(max-width:650px){.header{padding-top:22px;grid-template-columns:1fr auto}.header .brand,.header .brand img{width:110px}.opening{min-height:calc(100svh - 85px);padding-top:35px}.opening-title{font-size:clamp(46px,11.8vw,78px);line-height:1.1;letter-spacing:-.075em;padding-bottom:35px}.line-two{padding-left:13%}.line-three{padding-left:2%}.opening-enter{margin-top:35px;width:135px}}
@media(prefers-reduced-motion:reduce){.opening-line{animation:none;transform:none;opacity:1;will-change:auto}}

/* Red initials, a quiet seal, and continuously drifting lines. */
:root{--red:#d21100}
.opening-title{font-size:clamp(64px,11.8vw,178px);letter-spacing:-.06em;line-height:1.12;position:relative}
.initial{font-weight:inherit;color:var(--red)}
.line-two,.period{color:var(--ink)}
.opening-line{animation:drift 12s ease-in-out infinite alternate;opacity:1}
.line-one{--drift:2.5%;animation-delay:-4s}
.line-two{--drift:-3%;animation-delay:-8s;padding-left:14%}
.line-three{--drift:2%;animation-delay:-2s;padding-left:3%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(var(--drift))}}
.opening-title:hover .opening-line{animation-play-state:paused}
.opening-stamp{position:absolute;right:0;top:13%;width:58px;aspect-ratio:819/2048;background:var(--red);mask:url('assets/seal.png') center/contain no-repeat;-webkit-mask:url('assets/seal.png') center/contain no-repeat;transform:rotate(3deg)}
.opening-enter{border:0;gap:24px;justify-content:flex-start;width:auto}
.commission-grid{grid-template-columns:1fr;gap:0}
.commission{display:grid;grid-template-columns:1fr 1.4fr;column-gap:100px;padding:70px 0;border-top:1px solid #20262226}
.commission>.small-label,.commission>h3{grid-column:1}.commission>h3{font-size:clamp(34px,4vw,54px);margin:18px 0 28px}
.commission>p:not(.small-label){grid-column:2;grid-row:1/span 2;max-width:580px;align-self:center;font-size:19px;line-height:1.9}
.commission details{grid-column:2;margin:10px 0 30px}.commission>.text-link{grid-column:2;justify-self:start}
@media(max-width:650px){.opening-title{font-size:clamp(43px,11.2vw,76px);line-height:1.25;letter-spacing:-.065em}.opening-stamp{width:30px;top:7%;right:5px}.commission{grid-template-columns:1fr;padding:48px 0;gap:0}.commission>p:not(.small-label),.commission details,.commission>.text-link{grid-column:1;grid-row:auto}.commission>p:not(.small-label){font-size:17px}.opening-line{--drift:1.5%}}
@media(prefers-reduced-motion:reduce){.opening-line{animation:none;transform:none}}

/* Shared alignment and open, vertical reading rhythm. */
.opening-stamp{transform:rotate(0)}
.line-one{--drift:5%}.line-two{--drift:-6%}.line-three{--drift:4%}
.commission{grid-template-rows:auto;grid-row:auto}
.principles-title{margin:22px 0 66px}
.principles-list{width:100%}
.word-entry{border-top:1px solid #20262220;padding:0}
.word-entry:last-child{border-bottom:1px solid #20262220}
.word-entry summary{display:grid;grid-template-columns:48px 230px 1fr 24px;align-items:center;gap:24px;padding:42px 0;cursor:pointer;list-style:none}
.word-number{font:12px var(--sans);color:var(--muted)}
.word-entry h3{font-size:34px;letter-spacing:.03em;line-height:1.4}
.word-line{font:17px/1.8 var(--sans);color:var(--muted)}
.word-entry .toggle:after{content:'+';font:24px var(--sans);color:var(--red)}
.word-entry[open] .toggle:after{content:'−'}
.word-body{margin-left:326px;max-width:650px;padding:0 0 42px;font:17px/1.95 var(--sans)}
.word-body p+p{margin-top:18px}
.belief-sheet{margin:0}.belief-inner{width:min(1200px,calc(100% - 112px));max-width:none;padding:110px 0;margin-inline:auto}.belief h2{font-size:clamp(34px,4vw,56px);line-height:1.5}.belief p:not(.eyebrow){font:18px/1.9 var(--sans);max-width:680px}
.about{display:block}.about h2{font-size:clamp(34px,4vw,56px);line-height:1.5}.about>p{margin-top:34px;max-width:680px;font:18px/1.9 var(--sans)}
.contact-sheet{background:transparent;padding:50px 0 80px;max-width:none}
@media(max-width:1000px){.belief-inner{width:calc(100% - 64px)}.word-entry summary{grid-template-columns:32px 170px 1fr 24px;gap:16px}.word-body{margin-left:218px}}
@media(max-width:650px){.line-one{--drift:3%}.line-two{--drift:-3%}.line-three{--drift:2%}.word-entry summary{grid-template-columns:24px 1fr 24px;gap:12px;padding:30px 0}.word-entry h3{font-size:30px}.word-line{grid-column:2;grid-row:2;font-size:15px}.word-entry .toggle{grid-column:3;grid-row:1}.word-body{margin-left:36px;padding-bottom:32px;font-size:16px}.belief-inner{width:calc(100% - 40px);padding:70px 0}.belief h2{font-size:32px}.belief p:not(.eyebrow),.about>p{font-size:16px}.principles-title{margin-bottom:40px}}

/* Service copy follows its heading in every language. */
.practice .section-heading{display:block;margin:24px 0 64px}
.practice .service-intro{margin-top:28px;max-width:700px}
.commission{display:block;padding:60px 0;grid-row:auto}
.commission h3{margin:18px 0 26px;max-width:900px;line-height:1.35}
.commission>p:not(.small-label){max-width:700px;min-height:0;font-size:18px;line-height:1.85}
.commission details{max-width:700px;margin:30px 0 24px}
.commission>.text-link{margin-top:4px}
@media(max-width:650px){.practice .section-heading{margin-bottom:44px}.commission{padding:44px 0}.commission h3{font-size:32px}.commission>p:not(.small-label){font-size:17px}}

/* Slightly livelier drift, with smaller travel on narrow screens. */
.opening-line{animation-duration:8s}
.line-one{--drift:6%}.line-two{--drift:-7%}.line-three{--drift:5%}
@media(max-width:650px){.line-one{--drift:3.5%}.line-two{--drift:-3.5%}.line-three{--drift:2.5%}}

html[lang='zh-CN']{--serif:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
html[lang='zh-CN'] body{font-family:var(--sans)}
html[lang='zh-CN'] h2,html[lang='zh-CN'] h3{font-weight:500;letter-spacing:.015em}

/* Keep the seal beside the lettering, rather than detached near the mobile header. */
@media(max-width:650px){.opening-stamp{top:calc(50% - 180px);right:2px;width:26px}}

.header-actions{display:flex;align-items:center;gap:24px;justify-self:end}.header-contact{font:14px var(--sans);border-bottom:1px solid var(--red);padding-bottom:3px}.opening-lead{font:18px/1.8 var(--sans);max-width:560px;margin:26px 0 0}.opening-enter{border-bottom:0}@media(max-width:650px){.header-actions{gap:16px}.header-contact{font-size:13px}.opening-lead{font-size:16px;max-width:90%}}
/* v2.0 additions */
.opening-kind{font:15px/1.6 var(--sans);letter-spacing:.08em;color:var(--muted);margin-top:10px}
.opening-aux{font:15px/1.6 var(--sans);color:var(--red);margin-top:6px;animation:v2fade 1.2s ease 1.5s both}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.opening-aux{animation:none}}
.belief-inner p+p{margin-top:18px}
.about-body{font-family:var(--sans);font-size:18px;line-height:1.85;max-width:560px}
.about-body p+p{margin-top:16px}
.about-body .credit{font-size:15px;color:var(--muted);margin-top:26px}
.about-body .motto{margin-top:26px;font-weight:600}
.partners{margin-top:60px;max-width:760px}
.partners h3{font-size:clamp(24px,2.2vw,30px);margin:0 0 18px}
.partners ul{font:17px/1.85 var(--sans);padding-left:1.1em}
.partners li+li{margin-top:8px}
.notes-line{font:16px/1.8 var(--sans);color:var(--muted);margin:0 0 34px}
.contact-sheet .notes-line b{color:var(--ink)}
@media(max-width:1000px){.about{grid-template-columns:1fr;gap:30px}}