@import url('https://fonts.googleapis.com/css2?family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Zhi+Mang+Xing&display=swap');

:root{--calligraphy:"Ma Shan Zheng","STKaiti","KaiTi",serif;--inscription:"ZCOOL XiaoWei","Noto Serif SC",serif}
body{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand b{text-wrap:balance}
[data-lang="zh"] body{font-family:"Noto Serif SC","PingFang SC","Microsoft YaHei",serif;letter-spacing:.015em}
[data-lang="zh"] h1,[data-lang="zh"] h2{font-family:var(--inscription);font-weight:400;letter-spacing:.025em}
[data-lang="zh"] p{line-height:1.92}

/* Logo: treat the supplied white canvas as an intentional porcelain medallion. */
.brand{isolation:isolate}
.brand img{width:62px;height:62px;padding:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(166,75,53,.22),0 5px 18px rgba(16,47,41,.09);object-fit:cover;transform:scale(.88)}
.brand:before{content:"";position:absolute;width:54px;height:54px;margin-left:4px;border-radius:50%;box-shadow:0 0 0 5px rgba(197,161,96,.08);z-index:-1}
.brand small{font-family:var(--inscription);letter-spacing:.28em}

/* Calligraphic accents: brushwork is reserved for cultural anchors, never body copy. */
.vertical,.tao span,.values b,.programmes article>i,.bridge-art>span,.foundation aside span,footer>div>span{font-family:var(--calligraphy)!important;font-weight:400!important}
[data-lang="zh"] .hero h1 strong{font-family:var(--calligraphy);font-size:1.08em;letter-spacing:.075em}
[data-lang="zh"] .taihe h2{font-family:var(--calligraphy);font-weight:400;letter-spacing:.13em;transform:rotate(-1.2deg);transform-origin:left center}
.tao span{transform:rotate(-3deg);text-shadow:1px 3px 0 rgba(197,161,96,.14)}
.vertical{font-size:1.15rem;line-height:1.3}

/* Fine punctuation and inscription details. */
[data-lang="zh"] .hero-copy{position:relative}
[data-lang="zh"] .hero-copy:before{content:"“";position:absolute;left:-.48em;top:-.62em;font:7rem/1 var(--calligraphy);color:rgba(197,161,96,.13);pointer-events:none}
[data-lang="zh"] .manifesto h2:after,[data-lang="zh"] .dao-title h2:after,[data-lang="zh"] .section-head h2:after{content:"。";color:var(--red);font-family:var(--calligraphy);font-size:.72em;margin-left:.08em}
.kicker{font-size:.75rem;line-height:1.4;letter-spacing:.2em}
[data-lang="zh"] .kicker{font-family:var(--inscription);letter-spacing:.28em}
.source,.legal,.coordinates{font-size:.75rem}
nav{font-size:.78rem}
.language button{font-size:.72rem;min-height:26px;min-width:28px}

/* More disciplined rhythm and responsive type. */
.hero h1{max-width:12ch}
[data-lang="zh"] .hero h1{max-width:10ch;line-height:1.18}
.lead{font-size:clamp(1rem,1.15vw,1.18rem);max-width:38rem}
.two-copy,.bridge-copy>p:not(.kicker,.caution),.foundation-copy>p:not(.kicker,.legal){font-size:clamp(1rem,1.05vw,1.08rem)}
.dao-grid p,.section-head>p{font-size:.95rem}
.programmes p{font-size:.875rem;line-height:1.75}
.programmes h3{font-size:1.2rem}
.values span,.plan div{font-size:.875rem}
.button{font-size:.78rem;letter-spacing:.09em;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.14)}
.manifesto,.dao,.work,.taihe{overflow:hidden}
.dao-grid article,.programmes article{transition:background-color .25s ease,transform .25s ease}.dao-grid article:hover{background:rgba(238,240,231,.62)}.programmes article:hover{background:rgba(255,255,255,.045)}

@media(max-width:1050px){header{grid-template-columns:minmax(0,1fr) auto auto}.brand b{font-size:.82rem}.brand img{width:56px;height:56px}nav{font-size:.88rem}.language button{font-size:.75rem}.hero h1{max-width:13ch}}
@media(max-width:700px){
  header{padding-inline:14px}.brand{gap:8px}.brand img{width:48px;height:48px;padding:4px}.brand:before{width:42px;height:42px}.brand b{font-size:.76rem;white-space:nowrap}.language{gap:5px;padding:4px 7px}.language button{min-width:24px}.menu{font-size:1.25rem;margin-right:7px}
  .hero-inner{padding-top:clamp(54px,12vw,76px);padding-bottom:54px}.hero h1{font-size:clamp(2.9rem,14vw,4.1rem);max-width:10ch;line-height:1.08}.hero h1 strong{display:inline-block}.lead{font-size:1rem;line-height:1.75}.coordinates{padding-inline:24px}.coordinates span:first-child{display:none}
  h2{font-size:clamp(2.25rem,10vw,3.45rem);line-height:1.22}.manifesto,.dao,.work,.taihe{padding-block:76px}.manifesto aside span{font-size:2.75rem}.two-copy{gap:12px;margin-top:35px}.two-copy p{font-size:1rem}.values div{padding:22px 0}.values b{font-size:2rem}
  .dao-grid{margin-top:48px}.dao-grid article{min-height:auto;padding:30px 24px}.dao-grid h3{margin:34px 0 12px}.source{font-size:.78rem;line-height:1.6}
  .programmes{margin-top:48px}.programmes article{min-height:auto;padding:27px 24px 30px}.programmes article>i{margin-top:27px;font-size:2.5rem}.programmes p{font-size:.92rem}
  .bridge-copy{padding-block:72px}.bridge-copy>p:not(.kicker,.caution){font-size:1rem}.caution{font-size:.8rem;line-height:1.75}
  .taihe h2{font-size:clamp(4.5rem,23vw,7rem);white-space:nowrap}.taihe-copy>p{font-size:1rem}.plan div{grid-template-columns:40px 1fr}
  .foundation aside p{font-size:.72rem}.foundation-copy{padding-block:72px}.roles b{font-size:.95rem}.legal{font-size:.75rem!important;line-height:1.8}
  .closing h2{font-size:clamp(2.55rem,12vw,4rem)}footer{font-size:.75rem;line-height:1.6}
}
@media(max-width:380px){.brand b{max-width:128px;overflow:hidden;text-overflow:ellipsis}.language{border:0;padding-inline:2px}.hero h1{font-size:2.7rem}.values span{font-size:.78rem}.coordinates{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}