:root { --paper:#f3efe5; --ink:#17202a; --muted:#6d6a62; --line:rgba(23,32,42,.22); --red:#bb3e2f; --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next","PingFang SC",sans-serif; }
a { color:inherit; }
.skip { position:fixed; top:1rem; left:1rem; z-index:10; padding:.65rem 1rem; background:var(--ink); color:var(--paper); transform:translateY(-160%); transition:transform 160ms ease; }
.skip:focus { transform:translateY(0); }
header, main, footer { width:min(100% - 4rem, 1240px); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; min-height:7rem; border-bottom:1px solid var(--line); }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; text-decoration:none; }
.brand span:first-child { font-family:"Iowan Old Style","Songti SC",serif; font-size:.95rem; font-weight:700; }
.brand span:last-child { color:var(--muted); font:600 .62rem/1 ui-monospace,monospace; letter-spacing:.06em; }
nav { display:flex; align-items:center; gap:1.8rem; }
nav a { position:relative; padding:.5rem 0; color:var(--muted); font:700 .68rem/1 ui-monospace,monospace; letter-spacing:.1em; text-decoration:none; }
nav a::after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform 220ms var(--ease); }
.hero { min-height:calc(100vh - 7rem); display:flex; flex-direction:column; justify-content:center; padding:6rem 0 4rem; }
.kicker, .section-head > p, .section-label { margin:0; color:var(--red); font:700 .67rem/1.4 ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; }
.hero h1 { margin:2.3rem 0 5rem; max-width:12ch; font-family:"Iowan Old Style","Songti SC",serif; font-size:clamp(3.6rem,8vw,7.8rem); font-weight:400; letter-spacing:-.07em; line-height:.93; }
.hero h1 em { color:var(--muted); font-weight:400; }
.hero-foot { display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:end; margin-left:32%; }
.hero-foot p { max-width:32rem; margin:0; color:var(--muted); font-family:"Songti SC",serif; font-size:1.05rem; line-height:1.9; }
.hero-foot a { padding-bottom:.35rem; border-bottom:1px solid; font-size:.77rem; font-weight:700; letter-spacing:.08em; text-decoration:none; }
.hero-foot a span { margin-left:1.5rem; }
.manifesto { position:relative; width:86%; min-height:clamp(20rem,34vw,27rem); margin:0 0 7rem auto; overflow:hidden; background:#2a3031; color:#fff; }
.manifesto-background { position:absolute; right:0; bottom:0; left:0; width:100%; height:82%; background-repeat:no-repeat; background-size:cover; background-position:center 42%; opacity:.76; filter:saturate(.84) contrast(1.08) brightness(.96); -webkit-mask-image:linear-gradient(to top, #000 0%, #000 78%, rgba(0,0,0,.72) 91%, transparent 100%); mask-image:linear-gradient(to top, #000 0%, #000 78%, rgba(0,0,0,.72) 91%, transparent 100%); }
.manifesto-background--wide { background-image:url('/assets/wechat-background.jpeg'); }
.manifesto-shade { position:absolute; inset:0; background:linear-gradient(100deg,rgba(20,27,28,.58) 0%,rgba(20,27,28,.22) 40%,rgba(20,27,28,.04) 74%),linear-gradient(0deg,rgba(20,27,28,.42),rgba(20,27,28,.08) 64%,transparent 100%); }
.manifesto-content { position:absolute; inset:clamp(1.5rem,4vw,3.5rem); display:flex; flex-direction:column; align-items:flex-start; }
.account-badge { display:flex; align-items:center; gap:1rem; padding:.6rem 1rem .6rem .6rem; border:1px solid rgba(255,255,255,.32); background:rgba(10,15,18,.28); backdrop-filter:blur(12px); }
.account-badge img { width:3.5rem; height:3.5rem; border:2px solid rgba(255,255,255,.75); border-radius:50%; object-fit:cover; }
.account-badge div { display:flex; flex-direction:column; gap:.4rem; }
.account-badge span,.manifesto-content > p { font:700 .58rem/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.account-badge span { color:rgba(255,255,255,.65); }
.account-badge strong { font-family:"Songti SC",serif; font-size:.95rem; }
.manifesto blockquote { align-self:flex-end; width:min(68%,43rem); margin:auto 0 1rem; font-family:"Iowan Old Style","Songti SC",serif; font-size:clamp(2.2rem,4.5vw,4.2rem); font-weight:400; letter-spacing:-.06em; line-height:.98; }
.manifesto-content > p { align-self:flex-end; width:min(68%,43rem); margin:0; color:rgba(255,255,255,.62); }
.work { padding:8rem 0; border-top:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1fr 2fr; margin-bottom:5rem; }
.section-head h2 { margin:0; font-family:"Iowan Old Style","Songti SC",serif; font-size:clamp(1.8rem,3.2vw,3.2rem); font-weight:400; letter-spacing:-.045em; }
.project-list { border-top:1px solid var(--ink); }
.project { display:grid; grid-template-columns:4rem 1.45fr 1fr 2.5rem; gap:2rem; align-items:center; min-height:9.5rem; border-bottom:1px solid var(--line); text-decoration:none; transition:padding 260ms var(--ease),color 180ms ease; }
.number { color:var(--red); font:700 .7rem/1 ui-monospace,monospace; }
.project h3 { margin:0 0 .6rem; font-family:"Songti SC",serif; font-size:clamp(1.15rem,2vw,1.75rem); font-weight:600; letter-spacing:-.03em; }
.project div p { margin:0; color:var(--muted); font:600 .62rem/1.4 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
.description { margin:0; color:var(--muted); font-size:.82rem; line-height:1.8; }
.arrow { font-size:1.4rem; transition:transform 220ms var(--ease); }
.about { display:grid; grid-template-columns:1fr 2fr; padding:8rem 0 10rem; border-top:1px solid var(--line); }
.about h2 { margin:0 0 2.5rem; font-family:"Iowan Old Style","Songti SC",serif; font-size:clamp(2.2rem,4vw,4rem); font-weight:400; letter-spacing:-.055em; line-height:1.08; }
.about div p { width:min(100%,35rem); margin:0; color:var(--muted); font-size:1rem; line-height:2; }
footer { display:flex; justify-content:space-between; align-items:end; min-height:12rem; border-top:1px solid var(--ink); }
footer p { font-family:"Iowan Old Style","Songti SC",serif; font-size:1.2rem; }
footer span { color:var(--muted); font:600 .62rem/1.4 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.footer-contact { display:flex; flex-direction:column; gap:.45rem; }
.footer-contact strong { font-size:1rem; }
footer a { margin-bottom:1.2rem; font-size:.75rem; text-underline-offset:.4em; }
@media (hover:hover) and (pointer:fine) {
  nav a:hover { color:var(--ink); }
  nav a:hover::after { transform:scaleX(1); transform-origin:left; }
  .project:hover { padding-inline:1rem; color:var(--red); }
  .project:hover .arrow { transform:translate(.3rem,-.3rem); }
}
@media (max-width:760px) {
  header, main, footer { width:min(100% - 1.5rem,1240px); }
  header { min-height:5rem; }
  .hero { min-height:auto; padding:6rem 0; }
  .hero h1 { margin:2rem 0 3rem; }
  .hero-foot, .section-head, .about { grid-template-columns:1fr; margin-left:0; gap:2rem; }
  .manifesto { width:100%; min-height:27rem; margin-bottom:5rem; }
  .manifesto-background { height:76%; background-position:58% 42%; opacity:.72; }
  .manifesto blockquote,.manifesto-content > p { align-self:flex-start; width:100%; }
  .manifesto blockquote { margin:auto 0 1rem; }
  .account-badge img { width:3.6rem; height:3.6rem; }
  .work, .about { padding:5rem 0; }
  .section-head { margin-bottom:3rem; }
  .project { grid-template-columns:2.4rem 1fr 2rem; gap:1rem; padding:1.5rem 0; }
  .project .description { grid-column:2 / -1; }
  footer { min-height:10rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:1ms!important; } }