:root { --paper:#f4f1e9; --ink:#121313; --muted:#686962; --line:rgba(18,19,19,.18); color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Newsreader",Georgia,serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
header { background:var(--ink); color:var(--paper); }
.header-inner { max-width:1280px; padding:22px 40px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.wordmark { font-family:"Libre Caslon Display",Georgia,serif; font-size:34px; line-height:1; display:flex; align-items:center; gap:18px; }
.wordmark span { font-family:"Barlow Semi Condensed",sans-serif; font-size:13px; border-left:1px solid #676862; padding-left:18px; }
nav { display:flex; gap:28px; align-items:center; font:500 15px/1.5 "Barlow Semi Condensed",sans-serif; }
nav a { min-height:44px; display:flex; align-items:center; }
.languages { gap:16px; }
.languages a[aria-current] { text-decoration:underline; text-underline-offset:6px; }
.languages a[lang="zh-CN"] { font-family:system-ui,sans-serif; font-size:12px; }
.hero { max-width:1280px; margin:auto; text-align:center; padding:66px 40px 50px; }
.kicker { font:600 12px/1.5 "Barlow Condensed",sans-serif; letter-spacing:.17em; margin:0; }
.hero h1 { font:400 clamp(64px,7.5vw,108px)/.98 "Libre Caslon Display",Georgia,serif; letter-spacing:-.025em; margin:32px 0 26px; }
.intro { font:400 24px/1.45 "Newsreader",Georgia,serif; color:#555850; margin:0; }
.actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:30px; margin-top:28px; font:500 17px/1.3 "Barlow Semi Condensed",sans-serif; }
.contact { display:inline-flex; align-items:center; justify-content:center; gap:25px; border-radius:99px; background:var(--ink); color:var(--paper); padding:17px 28px; min-height:54px; }
.contact:hover { background:#343530; }
.work-link { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; border-bottom:1px solid var(--line); }
.note { font:400 15px/1.5 "Barlow Semi Condensed",sans-serif; color:var(--muted); margin:18px 0 0; }
.selected-work { max-width:1200px; padding:0 40px; margin:0 auto; scroll-margin-top:30px; }
.project-label { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid var(--line); }
.project-label a { font:500 14px/1.5 "Barlow Semi Condensed",sans-serif; }
.website-image { display:block; background:#e9e6de; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.website-image img { display:block; width:100%; height:auto; }
.project-note { font:400 13px/1.6 "Barlow Semi Condensed",sans-serif; color:var(--muted); margin:12px 0; }
@media(max-width:850px) { .header-inner { flex-wrap:wrap; gap:8px 20px; } .sections { order:3; width:100%; justify-content:center; font-size:14px; gap:24px; } .hero { padding-top:48px; } .hero h1 { font-size:76px; } }
@media(max-width:550px) {
 .header-inner { padding:14px 20px 8px; gap:10px; }
 .wordmark { font-size:32px; gap:10px; } .wordmark span { font-size:11px; padding-left:10px; max-width:96px; line-height:1.4; }
 nav { font-size:13px; gap:16px; } .languages { gap:12px; }
 .sections { justify-content:flex-start; gap:22px; font-size:13px; }
 .hero { padding:40px 20px 34px; }
 .hero .kicker { font-size:10px; letter-spacing:.15em; }
 .hero h1 { font-size:58px; line-height:.99; margin:24px 0 22px; }
 .intro { font-size:20px; line-height:1.4; } .intro br { display:none; }
 .actions { gap:10px 22px; margin-top:22px; font-size:16px; }
 .contact { min-height:50px; padding:15px 24px; gap:20px; } .work-link { min-height:44px; }
 .note { margin-top:14px; font-size:14px; }
 .selected-work { padding:0 20px; } .project-label { padding:13px 0; gap:10px; }
 .project-label .kicker { font-size:10px; letter-spacing:.1em; } .project-label a { font-size:12px; }
 .website-image { border-radius:7px; }
}
@media(max-width:350px) { .hero h1 { font-size:49px; } .wordmark span { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.project-description { display:grid; grid-template-columns:1fr 1.15fr; gap:14px 60px; align-items:start; padding:28px 0 60px; }
.case-index { display:none; }
.project-description h2 { font:400 42px/1.1 "Libre Caslon Display",Georgia,serif; margin:0; letter-spacing:-.015em; }
.project-description > p:not(.service-note) { grid-column:2; grid-row:1 / span 2; font-size:22px; line-height:1.5; margin:0; color:var(--muted); }
.project-description .work-link { justify-self:start; font:500 16px/1.4 "Barlow Semi Condensed",sans-serif; }
.service-note { grid-column:2; font:400 14px/1.5 "Barlow Semi Condensed",sans-serif; color:var(--muted); margin:0; }
.service-section { max-width:1120px; margin:0 auto; border-top:1px solid var(--line); padding:64px 0 68px; scroll-margin-top:30px; }
.eyebrow { font:600 12px/1.5 "Barlow Condensed",sans-serif; letter-spacing:.17em; margin:0 0 28px; }
.service-section h2 { font:400 64px/1.05 "Libre Caslon Display",Georgia,serif; letter-spacing:-.02em; margin:0 0 32px; }
.service-split { display:grid; grid-template-columns:1fr 1.15fr; gap:60px; }
.section-copy { font-size:23px; line-height:1.5; color:var(--muted); margin:0; }
.section-copy p { margin:0 0 22px; }
.section-copy p:last-child { margin-bottom:0; }
.service-steps { list-style:none; margin:42px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.service-steps li { border-top:1px solid var(--line); padding-top:22px; }
.step-number { font:500 14px/1.5 "Barlow Semi Condensed",sans-serif; }
.service-steps h3 { font:500 27px/1.25 "Newsreader",Georgia,serif; margin:24px 0 14px; }
.service-steps p { font-size:20px; line-height:1.5; color:var(--muted); margin:0; }
.service-includes { list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.service-includes li { display:flex; gap:20px; border-top:1px solid var(--line); padding:24px 0; }
.service-includes li > span { font:400 20px/1.5 "Barlow Semi Condensed",sans-serif; }
.service-includes h3 { font:500 25px/1.2 "Newsreader",Georgia,serif; margin:0 0 10px; }
.service-includes p { font-size:19px; line-height:1.5; color:var(--muted); margin:0; }
.service-contact { background:var(--ink); color:var(--paper); }
.contact-inner { max-width:1200px; padding:76px 40px 80px; margin:0 auto; }
.service-contact h2 { font:400 clamp(68px,7vw,100px)/1.02 "Libre Caslon Display",Georgia,serif; letter-spacing:-.025em; margin:0 0 30px; }
.contact-inner > p:not(.eyebrow) { max-width:560px; font-size:24px; line-height:1.45; color:#cecdc5; margin:0 0 30px; }
.service-contact .contact { background:var(--paper); color:var(--ink); font:500 17px/1.4 "Barlow Semi Condensed",sans-serif; }
.service-contact .contact:hover { background:#e4e1d9; }
.contact-number { display:block; width:fit-content; font:400 16px/1.5 "Barlow Semi Condensed",sans-serif; margin-top:22px; color:#cecdc5; text-decoration:underline; text-underline-offset:5px; }
.service-footer { background:var(--ink); color:var(--paper); padding:26px max(40px, calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #565750; font:400 15px/1.5 "Barlow Semi Condensed",sans-serif; }
.service-footer p { margin:0; }
.service-footer .languages { font-size:14px; }
@media(max-width:1200px) { .service-section { margin-left:40px; margin-right:40px; } }
@media(max-width:850px) { .service-split,.project-description { gap:30px; } .service-section h2 { font-size:52px; } .service-steps { gap:24px; } .service-steps h3 { font-size:24px; } .service-includes { gap:0 36px; } }
@media(max-width:550px) {
 .project-description { display:block; padding:22px 0 38px; }
 .project-description h2 { font-size:38px; margin-bottom:18px; }
 .project-description > p:not(.service-note) { font-size:20px; margin-bottom:18px; }
 .project-description .work-link { margin-bottom:16px; }
 .service-section { margin-left:20px; margin-right:20px; padding:38px 0 42px; }
 .eyebrow { font-size:10px; letter-spacing:.15em; margin-bottom:22px; }
 .service-section h2 { font-size:44px; margin-bottom:24px; }
 .service-split { grid-template-columns:1fr; gap:4px; }
 .section-copy { font-size:21px; line-height:1.45; }
 .service-steps { grid-template-columns:1fr; gap:26px; margin-top:30px; }
 .service-steps h3 { font-size:25px; margin:14px 0 12px; }
 .service-steps p { font-size:20px; }
 .service-includes { grid-template-columns:1fr; gap:0; margin-top:28px; }
 .service-includes li { padding:20px 0; gap:16px; }
 .service-includes h3 { font-size:24px; }
 .service-includes p { font-size:19px; }
 .contact-inner { padding:44px 20px 48px; }
 .service-contact h2 { font-size:66px; margin-bottom:26px; }
 .contact-inner > p:not(.eyebrow) { font-size:22px; }
 .service-contact .contact { font-size:16px; }
 .service-footer { padding:24px 20px; flex-wrap:wrap; gap:12px; font-size:14px; }
}