:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#272833;background:#f7f8fa;font-synthesis:none;--muted:#858692;--line:#e7e8ed;--accent:#7960c4}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #a997db;outline-offset:5px}
::selection{background:#e3daf7}
button{color:inherit}
.site-header,main,footer{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:650;letter-spacing:1.4px}
.brand-mark{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:#2d2d39;color:#d1c1ff;font-size:24px;line-height:1}
.brand-light{font-weight:400;color:#85858f;letter-spacing:1px;margin-left:6px}
.nav-link{font-size:12px;color:#686875;display:flex;gap:20px;align-items:center}
.nav-link:hover{color:var(--accent)}
.nav-link span{font-size:18px}
.hero{position:relative;padding:77px 0 69px;overflow:hidden}
.eyebrow{display:flex;align-items:center;gap:9px;color:#83818f;font-size:10px;letter-spacing:2.3px;font-weight:600}
.status-dot{width:6px;height:6px;background:#9482be;border-radius:50%;box-shadow:0 0 0 4px #9482be10}
h1{position:relative;z-index:1;margin:23px 0 20px;font-size:clamp(29px,3.9vw,49px);font-weight:650;letter-spacing:-1.8px;line-height:1.3}
h1 span{color:var(--accent)}
.hero>p{color:#82828e;font-size:14px;line-height:1.95;margin:0;position:relative;z-index:1}
.hero-note{display:flex;align-items:center;gap:8px;font-size:11px;color:#94939e;margin-top:27px}
.hero-note>span{font-size:17px;color:#a496c1}
.orbit{position:absolute;right:54px;top:74px;width:193px;height:193px;border:1px solid #dfd9ed;border-radius:50%;transform:rotate(-25deg);background:radial-gradient(ellipse,#ede6fb85,transparent 68%)}
.orbit:before,.orbit:after{content:"";position:absolute;inset:27px -22px;border:1px solid #e2dced;border-radius:50%;transform:rotate(55deg)}
.orbit:after{inset:-17px 33px;transform:rotate(50deg)}
.orbit>span{position:absolute;inset:0;display:grid;place-items:center;font-size:97px;font-weight:300;color:#b6a3d8;transform:rotate(10deg);text-shadow:0 8px 25px #bcaae43b}
.orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:#b4a3d1;left:2px;top:49px;box-shadow:0 0 0 5px #f7f8fa}
.section-heading{margin-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-title{display:flex;gap:11px;align-items:center}
h2{font-size:18px;font-weight:600;letter-spacing:.3px;margin:0}
.count{font-size:11px;font-variant-numeric:tabular-nums;color:#878391;background:#edeaf2;border-radius:6px;padding:3px 8px;min-width:27px;text-align:center}
.section-caption{font-size:11px;color:#9796a0}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.project-card{display:flex;flex-direction:column;min-width:0;border:1px solid #e5e5eb;border-radius:13px;overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.project-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px #39304c0b;border-color:#d6cce5}
.cover{position:relative;height:218px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e8e9f1;color:#77788b}
.cover:before{content:"";position:absolute;inset:15px;border:1px solid currentColor;opacity:.12;z-index:-1}
.cover-number{position:absolute;left:24px;top:22px;font-family:monospace;font-size:10px;letter-spacing:2px;opacity:.55}
.cover-title{font-family:"Kaiti SC",KaiTi,STKaiti,"Noto Serif CJK SC",serif;font-size:55px;font-weight:400;letter-spacing:12px;margin-left:12px}
.cover-subtitle{font-family:serif;font-size:10px;letter-spacing:3px;margin-top:14px;opacity:.6;text-align:center;padding:0 20px}
.cover-gold{background:radial-gradient(ellipse at 50% 100%,#46432d 0,transparent 70%),#1e251f;color:#ccb77f}
.cover-gold .cover-title{text-shadow:0 3px 25px #c8b78422}
.cover-gold:after{content:"";position:absolute;width:210px;height:210px;border:1px solid #c7b3771c;transform:rotate(45deg);z-index:-1}
.cover-paper{background:radial-gradient(ellipse at 25% 0,#f5efdf,transparent 65%),#eae2cf;color:#46473e}
.cover-paper .cover-title{transform:rotate(-5deg);font-size:52px;letter-spacing:8px}
.cover-paper:after{content:"酒";position:absolute;right:25px;bottom:24px;color:#a66b5c;border:1px solid #a66b5c;font-family:serif;font-size:12px;padding:3px;opacity:.7}
.cover-sage{background:#dfe5dc;color:#506650}
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s}
.project-card:hover .cover-image{transform:scale(1.035)}
.card-body{padding:24px 23px 20px;display:flex;flex-direction:column;flex:1}
.card-category{color:#9b92ab;font-size:10px;letter-spacing:1px;margin:0 0 10px}
.card-title{font-size:17px;font-weight:600;letter-spacing:.2px;margin:0;line-height:1.5}
.card-description{font-size:12px;line-height:1.95;color:#91909b;margin:12px 0 19px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 23px;padding:0;list-style:none}
.tag{font-size:10px;color:#8d8995;padding:4px 7px;background:#f5f4f7;border-radius:4px}
.card-bottom{border-top:1px solid #f0eef3;padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#71647f}
.card-bottom>span:last-child{font-size:18px;color:#9d92ac;transition:transform .2s}
.project-card:hover .card-bottom>span:last-child{transform:translate(2px,-2px)}
.message{text-align:center;font-size:13px;color:var(--muted);padding:50px 20px;line-height:1.9}
.message[hidden]{display:none}
.retry{display:block;margin:15px auto 0;border:1px solid #d6cce5;background:white;border-radius:6px;padding:8px 18px;color:var(--accent)}
.collection-end{display:flex;justify-content:center;align-items:center;gap:19px;margin:47px 0 66px}
.collection-end>span{width:49px;height:1px;background:#e4e1e9}
.collection-end p{font-size:11px;color:#a4a0ad;letter-spacing:.5px;margin:0}
.collection-end p span{font-size:18px;margin-left:6px;vertical-align:-1px}
footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;padding:25px 0 30px;font-size:10px;color:#a09da9;letter-spacing:.3px}
.footer-star{color:#b2a2cc;margin:0 8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1500px){.hero{padding-top:90px;padding-bottom:82px}
.cover{height:235px}
}

@media(max-width:1000px){.site-header,main,footer{width:calc(100% - 56px)}
.orbit{right:15px;opacity:.6;width:150px;height:150px;top:95px}
.project-grid{gap:17px}
.card-body{padding:20px 17px}
.cover{height:190px}
.card-title{font-size:15px}
.cover-title{font-size:46px}
.cover-subtitle{letter-spacing:1px}
}

@media(max-width:780px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.orbit{right:-80px;opacity:.3}
.hero{padding:55px 0}
.section-caption{display:none}
.cover{height:215px}
}

@media(max-width:520px){.site-header,main,footer{width:calc(100% - 40px)}
.site-header{height:79px}
.brand{font-size:11px;gap:9px}
.brand-light{margin-left:2px}
.nav-link{font-size:11px;gap:9px}
.hero{padding:44px 0 43px}
h1{font-size:29px;letter-spacing:-1px;margin-top:21px}
.hero>p{font-size:12px}
.eyebrow{font-size:9px}
.orbit{display:none}
.hero-note{margin-top:20px;font-size:10px}
.project-grid{grid-template-columns:1fr;gap:22px}
.cover{height:215px}
.card-body{padding:22px}
.card-title{font-size:17px}
.card-description{margin-bottom:17px}
.collection-end{margin:34px 0 40px;gap:12px}
.collection-end>span{width:22px}
.collection-end p{font-size:10px}
footer{flex-direction:column;gap:12px;padding:22px 0}
.section-title h2{font-size:17px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important}
}