:root{--bg:#fff;--fg:#0a0a0a;--muted:#666;--card:#f5f5f5;--border:rgba(0,0,0,.08);--link:#0ea5e9}
@media (prefers-color-scheme: dark){
:root{--bg:#0b0b0b;--fg:#f2f2f2;--muted:#a3a3a3;--card:#141414;--border:rgba(255,255,255,.08);--link:#38bdf8}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;line-height:1.65}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.header .container{max-width:none;margin:0;padding:0 20px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;margin-left:2cm}
.brand .title{font-weight:700;font-size:18px;line-height:1.2}
.brand .subtitle{font-size:12px;color:var(--muted);line-height:1.2}
.header-left,.header-right{display:flex;gap:10px;align-items:center}
.header-right{margin-right:2cm}
.btn{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer}
.btn:hover{background:var(--fg);color:var(--bg)}
.icon-circle{width:38px;height:38px;border-radius:999px;border:2px solid var(--border);display:grid;place-items:center;cursor:pointer}
.icon-burger{width:38px;height:38px;border-radius:8px;border:2px solid var(--border);display:grid;place-items:center;cursor:pointer;position:relative}
.icon-burger div,.icon-burger::before,.icon-burger::after{content:"";width:18px;height:2px;background:var(--fg);border-radius:1px}
.icon-burger::before{position:absolute;top:10px;left:10px}
.icon-burger::after{position:absolute;bottom:10px;left:10px}
.drawer{position:fixed;inset:64px 0 0 auto;right:-100%;width:min(420px,90vw);background:var(--bg);border-left:1px solid var(--border);transition:right .25s ease;z-index:60;overflow:auto}
.drawer.open{right:0}
.menu{list-style:none;margin:0;padding:14px}
.menu a{display:block;padding:10px 8px;border-radius:8px;color:var(--fg);font-size:15px;line-height:1.35}
.menu a:hover{background:var(--card)}
.menu li{margin:0 0 4px}
.menu .submenu-toggle{display:block;width:100%;padding:10px 8px;font-size:15px;line-height:1.35}
.menu .submenu{list-style:none;margin:6px 0 0 14px;padding:0 0 0 14px;border-left:1px solid var(--border);display:none}
.menu .submenu.open{display:block}
.menu .submenu li{margin:0}
.menu .submenu a{font-size:13px;padding:6px 2px;color:var(--muted);line-height:1.3}
.menu .submenu a:hover{background:transparent;color:var(--fg)}
.lang-zh .en-only{display:none!important}.lang-en .zh-only{display:none!important}
.hero{padding:12vh 0 10vh;border-bottom:1px solid var(--border)}
.hero .container{width:100%}
.hero-title{font-weight:800;letter-spacing:.02em;margin:0 0 10px}
.hero-sub{margin:0;color:var(--muted);text-align:left}
.hero-title.zh{
	font-size:clamp(32px,6vw,72px);
	max-width:900px;
	margin:0 0 10px 0;
	white-space:normal;
	word-break:break-word;
	text-align:left;
}
.hero-title.en{
  font-size:clamp(26px,6vw,72px);
  max-width:900px;
  margin:0 0 10px 0;
  white-space:normal;
  word-break:break-word;
  text-align:left;
}
.hero-sub, .hero-title.zh, .hero-title.en{margin-left:0}

.hero-home{padding:22vh 0 20vh;min-height:calc(100vh - 100px);display:flex;align-items:center}
.hero-home .container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hero-home .hero-title,
.hero-home .hero-sub{margin-left:0;margin-right:0;text-align:center}
.hero-home .hero-title.zh{white-space:nowrap}
@media(max-width:768px){
	.hero-title.zh{white-space:normal}
	.hero-home{padding:18vh 0 16vh;min-height:calc(100vh - 100px)}
	.hero-home .container{align-items:center}
	.hero-home .hero-title.zh{text-align:center}
	.header{position:relative;top:auto}
	.brand{margin-left:20px}
	.header-right{margin-right:20px}
}
.section{padding:56px 0;border-bottom:1px solid var(--border)}
.section h2{font-size:24px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;color:var(--fg)}
.design-detail .card p{font-size:15px;line-height:1.55;margin-top:0;margin-bottom:10px}
.design-detail .card p.meta-lead{font-size:16px;font-weight:600;line-height:1.45;margin-bottom:10px}
.design-detail .card .book-meta-line{font-size:15px;line-height:1.55;margin:0}
.design-detail .card .book-meta-line+.book-meta-line{margin-top:2px}
.design-detail .card .book-meta-line.break-after{margin-bottom:16px}
.design-detail .card p.section-break{margin-top:16px}
.card .meta-lead{margin:0 0 8px;font-weight:600}
.card .book-meta-line{margin:0;line-height:1.45}
.card .book-meta-line+.book-meta-line{margin-top:4px}
a.card,a.card:visited{color:var(--fg)}
a.card:hover{color:var(--fg);text-decoration:none;background:var(--card)}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:840px){.grid{grid-template-columns:1fr 1fr}}
.featured-section .featured-head{margin-bottom:18px}
.featured-section .featured-head h2{margin:0 0 8px;font-size:24px}
.featured-section .featured-head p{margin:0;color:var(--muted)}
.featured-groups{display:grid;gap:28px}
.featured-group{border:1px solid var(--border);border-radius:20px;padding:22px;background:var(--card)}
.featured-group-header{display:flex;gap:8px;margin-bottom:16px}
.featured-tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:15px;font-weight:600;color:var(--fg);text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.featured-tag:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.featured-tag.en-only{font-size:13px;font-weight:500}
.featured-cards{display:grid;gap:16px}
@media(min-width:768px){.featured-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.featured-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 12px 30px rgba(15,15,15,.05);transition:transform .18s ease,box-shadow .18s ease}
.featured-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,15,15,.08)}
.featured-card img{width:100%;height:180px;object-fit:cover}
.featured-card-body{padding:16px}
.featured-card-body strong{display:block;font-size:16px;margin-bottom:6px}
.featured-card-body .meta{font-size:13px;color:var(--muted);line-height:1.5}
.about-info-grid{gap:22px;grid-template-columns:1fr}
.about-info-grid .card{border-radius:32px;background:var(--card);border:1px solid var(--border);box-shadow:0 20px 45px rgba(15,15,15,.06);padding:32px 38px;max-width:980px;margin:0 auto}
.about-info-grid .card h2{margin-top:0}
.about-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:36px;align-items:center}
.about-photo-card{padding:0;border:none;background:transparent;box-shadow:none}
.about-photo-card img{width:100%;display:block;border-radius:26px;border:1px solid var(--border)}
.about-bio-card{padding:26px 30px;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:0 12px 40px rgba(15,15,15,.06);font-size:15px;line-height:1.78;letter-spacing:-0.01em;max-width:720px}
.about-bio-card p{margin:0 0 18px;text-align:justify}
.about-bio-card p:last-child{margin-bottom:0}
.zh-only.about-bio-card p{text-indent:2em}
.en-only.about-bio-card{font-size:14.5px;line-height:1.72;letter-spacing:-0.005em}
.en-only.about-bio-card p{text-align:left;text-indent:0}
.footer{padding:36px 0;color:var(--muted)}
.cards-vertical{display:grid;grid-template-columns:1fr;gap:16px}
.work-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--border);padding:14px;border-radius:12px;color:var(--fg)}
.work-card a,.work-card a:visited{color:var(--fg);text-decoration:none}
.work-card a:hover{color:var(--fg);text-decoration:none}
.work-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);flex-shrink:0;display:block}
.card-meta{font-weight:400;font-size:14px;color:var(--muted)}
.card-meta.small{font-size:13px}
.article-img{display:block;width:100%;max-width:min(640px,100%);height:auto;border-radius:14px;border:1px solid var(--border);background:var(--card);margin:20px auto;padding:clamp(12px,2.5vw,18px);cursor:zoom-in;box-sizing:border-box}
.longform .article-img{width:min(520px,100%);margin-left:0;margin-right:auto}
.card .article-img{margin-left:0;margin-right:0}
.work-card .work-meta{font-weight:400;font-size:14px;margin-left:8px;color:var(--muted);white-space:nowrap}
.work-card .zh-only,
.work-card .en-only{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.work-card .zh-only strong,
.work-card .en-only strong{flex:0 1 auto}
.work-card .zh-only .work-meta,
.work-card .en-only .work-meta{margin-left:0}
.gallery{display:grid;grid-template-columns:1fr;gap:28px;--gallery-wide-max:min(960px,100%);--gallery-portrait-max:min(540px,92vw);--gallery-padding:clamp(12px,2.5vw,22px)}
.gallery img{display:block;width:100%;max-width:var(--gallery-wide-max);height:auto;border-radius:14px;background:#000;border:1px solid var(--border);padding:var(--gallery-padding);box-sizing:border-box;cursor:zoom-in;margin:0 auto}
.gallery img.is-portrait{max-width:var(--gallery-portrait-max);margin-left:auto;margin-right:auto}
.gallery img.is-small{max-width:min(640px,94vw);margin:0 auto}
.gallery img.full-width{max-width:100%!important}
.gallery figure{margin:0}
.gallery figure img{margin-bottom:8px}
.gallery figure figcaption{text-align:center;font-size:13px;color:var(--muted)}
.design-gallery img{background:var(--card)}
.design-gallery img.is-portrait{max-width:min(480px,90vw)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:80}
.lightbox.open{display:flex}.lightbox img{max-width:92vw;max-height:90vh;border-radius:8px}
.footer a{color:var(--muted)}
.back-btn{position:fixed;bottom:calc(2rem + 2cm);left:9.5rem;width:40px;height:40px;border:1px solid rgba(0,0,0,.15);border-radius:999px;background:rgba(255,255,255,.82);color:#000;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:90;box-shadow:0 10px 24px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.5);backdrop-filter:blur(8px);transition:transform .2s ease,box-shadow .2s ease;touch-action:manipulation}
.back-btn svg{width:22px;height:22px}
.back-btn svg path{stroke:currentColor}
.back-btn:hover{transform:scale(1.05)}
.back-btn:active{transform:scale(.94)}
.back-btn:focus-visible{outline:2px solid rgba(0,0,0,.6);outline-offset:3px}
.back-btn.is-hidden{opacity:0;pointer-events:none;transform:scale(.92)}
@media(max-width:900px){
.about-layout{grid-template-columns:1fr}
.about-bio-card{max-width:none;padding:24px 26px}
.zh-only.about-bio-card p{text-indent:1.6em}
.about-info-grid .card{padding:28px;max-width:100%}
.gallery{gap:20px}
.article-img{max-width:100%}
}
@media(max-width:768px){
.back-btn{display:none!important}
}
@media(max-width:600px){
.about-bio-card{padding:20px 18px;line-height:1.8}
.zh-only.about-bio-card p{text-indent:1.4em}
.about-photo-card img{border-radius:20px}
.about-info-grid .card{padding:22px 18px;border-radius:26px}
.back-btn{bottom:calc(1.25rem + 2cm);left:.75rem;width:48px;height:48px}
.back-btn svg{width:24px;height:24px}
.gallery img{padding:14px}
.gallery img.is-portrait{max-width:100%}
.article-img{padding:12px;margin:16px 0}
}
@media(prefers-color-scheme: dark){
.back-btn{background:rgba(0,0,0,.7);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25)}
.back-btn:focus-visible{outline:2px solid rgba(255,255,255,.7)}
}