:root{--paper:#f5f1e8;--paper2:#fbf8f1;--ink:#292822;--muted:#777269;--gold:#c8942f;--blue:#6b7e92;--line:rgba(41,40,34,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.01em}a{color:inherit;text-decoration:none}.progress{position:fixed;z-index:99;top:0;left:0;width:0;height:3px;background:var(--gold)}
.topbar{position:fixed;z-index:50;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;background:linear-gradient(var(--paper),rgba(245,241,232,.82),transparent);font-size:12px;letter-spacing:.16em}.wordmark{font-weight:600}.topbar nav{display:flex;gap:30px}.topbar nav a{position:relative}.topbar nav a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:.3s}.topbar nav a:hover:after{width:100%}
.hero{position:relative;min-height:100svh;padding:20vh 6vw 8vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--gold);margin:0 0 3vh}.hero h1{position:relative;z-index:2;margin:0;font-size:clamp(58px,11.2vw,170px);line-height:.74;letter-spacing:-.065em;font-weight:500}.hero h1 span{display:block}.hero h1 span:nth-child(2){margin-left:22vw;color:var(--blue)}.serif{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-style:normal}.hero-foot{margin:8vh 0 0 22vw;display:flex;justify-content:space-between;align-items:flex-end;max-width:68%;font-size:clamp(12px,1.15vw,16px);line-height:1.7;color:var(--muted)}.base{text-align:right;font-size:10px;letter-spacing:.18em}.base strong{color:var(--ink);font-size:11px}.scroll{position:absolute;left:6vw;bottom:5vh;font-size:10px;letter-spacing:.18em}.scroll span{color:var(--gold);font-size:18px;margin-left:10px}.hero-orbit{position:absolute;width:38vw;height:38vw;right:-7vw;top:9vh;border:1px solid rgba(200,148,47,.35);border-radius:50%;animation:spin 28s linear infinite}.hero-orbit i{position:absolute;border-radius:50%;background:var(--gold)}.hero-orbit i:nth-child(1){width:12px;height:12px;left:12%;top:19%}.hero-orbit i:nth-child(2){width:7px;height:7px;right:13%;bottom:27%;background:var(--blue)}.hero-orbit i:nth-child(3){width:3px;height:3px;left:43%;bottom:0}@keyframes spin{to{transform:rotate(360deg)}}
.works,.about{padding:10vw 4vw}.section-head{display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:end;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:7vw}.section-head span,.section-head p{font-size:10px;letter-spacing:.18em;color:var(--muted);margin:0}.section-head h2{font-size:clamp(24px,4vw,58px);letter-spacing:-.04em;font-weight:500;line-height:.8;margin:0}.project{display:block;margin-bottom:8vw}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:3vw}.project figure{position:relative;margin:0;background:var(--paper2);border:1px solid rgba(41,40,34,.08);overflow:hidden;box-shadow:0 14px 45px rgba(57,48,34,.06)}.project figure:after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.35s}.project img{display:block;width:100%;height:auto;aspect-ratio:1200/750;object-fit:contain;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s}.project:hover img{transform:scale(1.012);filter:saturate(1.04)}.project:hover figure:after{border-color:rgba(200,148,47,.6)}.project-meta{display:grid;grid-template-columns:140px 1fr auto;gap:28px;align-items:start;padding-top:22px}.project-meta span,.project-meta b{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:500}.project-meta b{color:var(--gold);text-align:right}.project-meta h3{font-size:clamp(20px,2.1vw,36px);line-height:1.08;margin:0;font-weight:500;letter-spacing:-.03em}.project-meta em{font-size:.5em;font-style:normal;font-weight:400;letter-spacing:.03em;color:var(--muted)}.project-grid .project-meta{grid-template-columns:1fr auto;gap:12px}.project-grid .project-meta span{grid-column:1/-1}.project-grid .project-meta h3{font-size:clamp(20px,2.2vw,34px)}
.about{padding-top:6vw}.about-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:8vw}.about-lead{font-size:clamp(35px,5.6vw,80px);line-height:1.02;letter-spacing:-.05em;margin:0}.about-lead span{color:var(--gold)}.about-copy{font-size:14px;line-height:1.85;color:var(--muted);max-width:620px}.services{margin-top:50px;display:flex;flex-wrap:wrap;gap:8px}.services span{border:1px solid var(--line);border-radius:99px;padding:9px 13px;font-size:9px;letter-spacing:.12em;color:var(--ink)}
.about-link{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding-bottom:8px;border-bottom:1px solid var(--gold);font-size:11px;letter-spacing:.16em;color:var(--ink)}.about-link span{font-size:17px;color:var(--gold);transition:transform .25s}.about-link:hover span{transform:translate(3px,-3px)}
footer{margin-top:5vw;padding:11vw 4vw 3vw;background:#e9e2d4}footer>p{font-size:clamp(44px,9.3vw,140px);line-height:.82;letter-spacing:-.065em;margin:0 0 9vw}footer>p span{color:var(--blue)}footer>a{display:inline-block;font-size:clamp(18px,2vw,30px);border-bottom:1px solid var(--gold);padding-bottom:8px}.footer-bottom{border-top:1px solid var(--line);margin-top:11vw;padding-top:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){.topbar{padding:18px 20px}.topbar nav{gap:14px}.topbar nav a:nth-child(2){display:none}.hero{padding:18vh 20px 9vh}.hero h1{font-size:15.5vw;line-height:.8}.hero h1 span:nth-child(2){margin-left:8vw}.hero-foot{margin:7vh 0 0 8vw;max-width:90%;display:block}.base{text-align:left;margin-top:30px}.scroll{left:20px}.hero-orbit{width:70vw;height:70vw;right:-30vw}.works,.about{padding:90px 20px}.section-head{grid-template-columns:40px 1fr}.section-head p{display:none}.project-grid{grid-template-columns:1fr;gap:0}.project{margin-bottom:80px}.project-meta,.project-grid .project-meta{grid-template-columns:1fr auto;gap:10px;padding-top:15px}.project-meta span{grid-column:1/-1}.project-meta h3{font-size:24px}.project-meta b{font-size:8px}.about-grid{grid-template-columns:1fr;gap:45px}footer{padding:110px 20px 28px}footer>p{font-size:14vw}.footer-bottom{margin-top:100px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Stronger project affordance: the whole visual reacts and reveals a click cue. */
@media(hover:hover) and (pointer:fine){
  .project figure{cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
  .project figure:before{content:"VIEW PROJECT ↗";position:absolute;z-index:8;right:18px;bottom:18px;padding:11px 14px;background:rgba(245,241,232,.94);border:1px solid rgba(200,148,47,.55);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.14em;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;backdrop-filter:blur(8px)}
  .project:hover figure{transform:translateY(-7px);box-shadow:0 28px 70px rgba(57,48,34,.16)}
  .project:hover figure:before{opacity:1;transform:translateY(0)}
  .project:hover img{transform:scale(1.055);filter:saturate(1.08) contrast(1.02)}
  .project:hover figure:after{border-width:2px;border-color:rgba(200,148,47,.8)}
}

/* 2026 portfolio typography refinement */
.hero h1{font-family:"Playfair Display",Georgia,serif}
.plain-amp{font-family:Manrope,"PingFang SC",sans-serif;font-weight:500;font-size:.82em;letter-spacing:-.08em}
.project-meta b{font-size:12px;line-height:1.35}
@media(max-width:800px){.project-meta b{font-size:10px}}