:root { --ink:#e8e5de; --black:#0b0b0a; --black-soft:#12110f; --muted:#aaa59a; --line:rgba(235,230,220,.19); --accent:#dc7134; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:14px; }
.site-header { position:absolute; z-index:2; top:0; width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 40px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:14px; letter-spacing:.035em; text-decoration:none; }.wordmark span { display:grid; place-items:center; width:27px; height:27px; color:var(--black); background:var(--ink); border-radius:50%; font:700 10px "DM Mono",monospace; }
nav { display:flex; gap:28px; } nav a,.location { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; } nav a:hover { color:var(--accent); }.location { justify-self:end; letter-spacing:.08em; }
.hero { position:relative; isolation:isolate; min-height:760px; height:100vh; padding:clamp(170px,18vw,235px) 6.3vw 58px; overflow:hidden; display:flex; flex-direction:column; }.hero::before { content:""; position:absolute; z-index:-2; inset:0; background:url("assets/2025-11.jpg") center 42% / cover no-repeat; filter:saturate(.6) brightness(.55); }.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(6,6,5,.88) 0%,rgba(6,6,5,.58) 43%,rgba(6,6,5,.16) 100%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%); }
.eyebrow { margin:0 0 24px; color:var(--accent); font:10px/1.3 "DM Mono",monospace; letter-spacing:.2em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"DM Sans",Arial,sans-serif; font-weight:400; letter-spacing:-.065em; } h1 { max-width:800px; font-size:clamp(80px,12.5vw,188px); line-height:.73; } h1 em,h2 em { color:var(--accent); font-style:normal; }.hero-note { margin:48px 0 42px; color:#c0bdb5; font-size:18px; line-height:1.65; }.hero-links { display:flex; gap:27px; }.scroll-cue { padding:0 0 10px; color:var(--accent); border-bottom:1px solid var(--accent); font:10px "DM Mono",monospace; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }.scroll-cue span { margin-left:20px; font-size:15px; }.scroll-cue.secondary { color:var(--ink); border-color:transparent; }
.works { padding:112px 40px 140px; background:var(--black); }.section-intro { display:grid; grid-template-columns:1fr 2fr 1fr; gap:34px; margin-bottom:68px; }.section-intro .eyebrow { margin:8px 0 0; }.section-intro h2 { font-size:clamp(46px,6vw,94px); line-height:.88; }.section-intro > p:last-child { margin:8px 0 0; color:var(--muted); line-height:1.55; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }.artwork { grid-column:span 4; position:relative; overflow:hidden; min-height:300px; padding:0; border:0; background:#25231f; cursor:zoom-in; }.artwork.tall { grid-row:span 2; }.artwork.wide { grid-column:span 8; }.artwork img { display:block; width:100%; height:100%; min-height:300px; object-fit:cover; filter:saturate(.83); transition:transform .65s ease,filter .65s ease; }.artwork:hover img { transform:scale(1.045); filter:saturate(1); }.artwork span { position:absolute; left:16px; bottom:14px; padding:5px 7px; color:#fff; background:#090909a8; font:10px "DM Mono",monospace; letter-spacing:.08em; }
.about { padding:130px 6.3vw; border-top:1px solid var(--line); background:var(--black-soft); display:grid; grid-template-columns:1fr 2fr; gap:40px; }.about .eyebrow { margin-top:12px; }.about h2,.contact h2 { font-size:clamp(48px,6.5vw,98px); line-height:.87; }.about div > p { max-width:560px; margin:42px 0 0; color:#d2cec6; font-size:clamp(18px,2vw,25px); line-height:1.45; }.about .chinese { margin-top:20px; color:var(--muted); font-size:16px; }
.contact { padding:130px 6.3vw; background:#1b1916; }.contact h2 { margin-bottom:55px; }.email { display:inline-block; padding-bottom:10px; color:var(--ink); border-bottom:1px solid var(--accent); font:clamp(19px,3.1vw,46px) "DM Mono",monospace; letter-spacing:-.05em; text-decoration:none; }.email:hover { color:var(--accent); }.email span { margin-left:16px; color:var(--accent); }
footer { display:flex; justify-content:space-between; padding:21px 40px; color:#858078; border-top:1px solid var(--line); background:#1b1916; font:10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.lightbox { max-width:min(92vw,1100px); max-height:92vh; padding:0; border:0; background:#111; color:#eee; }.lightbox::backdrop { background:#000e; }.lightbox img { display:block; max-width:92vw; max-height:82vh; }.lightbox p { margin:13px 18px 17px; color:var(--muted); font:11px "DM Mono",monospace; }.close { position:fixed; top:16px; right:22px; border:0; color:#fff; background:none; font-size:38px; cursor:pointer; }
@media (max-width:720px) { .site-header { grid-template-columns:1fr auto; padding:20px; }.location { display:none; } nav { gap:15px; } nav a { font-size:9px; }.hero { min-height:680px; padding:160px 25px 42px; }.hero::before { background-position:59% center; }.hero-note { margin:42px 0 34px; font-size:15px; }.works { padding:78px 20px; }.section-intro,.about { display:block; }.section-intro .eyebrow { margin-bottom:33px; }.section-intro > p:last-child { margin-top:25px; }.gallery { gap:8px; }.artwork,.artwork.wide { grid-column:span 6; min-height:210px; }.artwork.tall { grid-row:span 1; }.artwork img { min-height:210px; }.about,.contact { padding:82px 25px; }.about .eyebrow { margin-bottom:38px; }.about div > p { margin-top:34px; }.contact h2 { margin-bottom:42px; } footer { padding:19px 20px; font-size:9px; } }

/* Portfolio review: show complete works and retain original colour. */
/* Warm paper cover using A Space. */
.hero{color:#29261f;background:#d6c9ac}
.hero::before{background-image:url("assets/a-space.jpg");background-position:72% 46%;filter:none}
.hero::after{background:linear-gradient(90deg,rgba(237,227,205,.94) 0%,rgba(237,227,205,.82) 30%,rgba(237,227,205,.25) 65%,rgba(237,227,205,.06) 100%)}
.hero .eyebrow,.hero h1 em,.hero .scroll-cue{color:#81421f;border-color:#81421f}
.hero-note{color:#39352c}
.hero .scroll-cue.secondary{color:#29261f;border-color:transparent}
.site-header{border-color:rgba(45,39,28,.22);background:rgba(237,227,205,.85)}
.site-header .wordmark,.site-header nav a,.site-header .location{color:#29261f}
.site-header .wordmark span{background:#29261f;color:#eee3cd}
.site-header nav a:hover{color:#81421f}
@media(max-width:720px){.hero::before{background-position:58% center}.hero::after{background:linear-gradient(90deg,rgba(237,227,205,.91),rgba(237,227,205,.55) 70%,rgba(237,227,205,.25))}}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;align-items:start}
.artwork,.artwork.tall,.artwork.wide{grid-column:auto;grid-row:auto;min-height:0;background:transparent;text-align:left;overflow:visible;color:var(--ink)}
.artwork img{width:100%;height:350px;min-height:0;object-fit:contain;filter:none;background:#171614}
.artwork:hover img{transform:none;filter:none}
.artwork span{position:static;display:block;background:none;padding:16px 0;font:14px/1.6 Arial,sans-serif;letter-spacing:0;color:var(--ink)}
.artwork small{display:block;color:var(--muted);font-size:12px}
.resume{padding:100px 6.3vw;border-top:1px solid var(--line)}
.resume h2{font-size:clamp(40px,5vw,72px)}
.cv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.cv-grid h3{font-size:14px;color:var(--accent);font-weight:400}.cv-grid p{line-height:1.8;color:var(--muted)}.cv-grid b{display:block;color:var(--ink);font-weight:400}
.lightbox{width:min(92vw,1100px)}.lightbox img{width:100%;object-fit:contain}.lightbox p{line-height:1.7}.close{background:#111;border-radius:50%;width:44px;height:44px;line-height:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:720px){.gallery{grid-template-columns:1fr 1fr;gap:20px 12px}.artwork img{height:240px;min-height:0}.cv-grid{grid-template-columns:1fr;gap:20px}.resume{padding:70px 25px}.site-header{padding:20px 15px}nav{gap:10px}}
@media(max-width:420px){.gallery{grid-template-columns:1fr}.artwork img{height:360px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}