:root { --paper:#f6f6f0; --ink:#23352f; --muted:#6e7b70; --line:#dce3d7; --lime:#c9e8a1; }
body { font-family:'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif; }
.wrap { max-width:1240px; width:calc(100% - 112px); }
.header { max-width:1352px; padding:28px 56px; }
.brandmark { background:#293f34; color:#edf3df; border-radius:12px; width:47px; height:47px; display:flex; align-items:center; justify-content:center; font-size:21px; letter-spacing:-1px; }
.brandmark span { color:#bddb91; }.brand-sub { color:#7e8978; letter-spacing:1.2px; font-size:8px; }
.header nav { gap:31px; font-size:12px; }.nav-contact { border-color:#d1dbc8; background:#eef2e7; border-radius:30px; padding:11px 19px; }
.hero { padding:64px 0 58px; grid-template-columns:1.08fr 1fr; gap:56px; }
.hero .eyebrow { color:#728167; font-size:10px; letter-spacing:1px; }
h1 { font-size:clamp(38px,3.65vw,52px); line-height:1.42; letter-spacing:-1.8px; font-weight:600; margin:25px 0 21px; }
.hero-description { font-size:14px; line-height:2; color:#71806e; }.hero-actions { margin:29px 0 26px; }.button { border-radius:8px; font-size:12px; padding:15px 23px; }.hero-note { font-size:10px; }
.hero-showcase { background:#e9eddf; padding:19px; border:1px solid #d9e1d0; border-radius:18px; box-shadow:0 15px 40px #283e2707; }
.showcase-top,.showcase-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#78886d; font:8px var(--mono); letter-spacing:1px; padding:3px 2px 16px; }.showcase-top i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#819d64; margin-right:6px; }
.showcase-primary { padding:0; width:100%; border:1px solid #d7dfd0; border-radius:11px; overflow:hidden; display:block; background:#fdfefa; text-align:left; }
.showcase-primary>img { display:block; width:100%; height:255px; object-fit:cover; object-position:top; border-bottom:1px solid #e3e9dc; transition:transform .3s; }.showcase-primary:hover>img { transform:scale(1.02); }
.showcase-label { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; font-size:12px; }.showcase-label small { display:block; margin-top:6px; color:#8a9581; font-size:10px; }.showcase-label b { font-size:22px; font-weight:400; color:#7a965d; }
.showcase-secondary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:13px; }.showcase-secondary button { text-align:left; border:1px solid #d7dfd0; background:#fafcf5; border-radius:8px; padding:0; overflow:hidden; }.showcase-secondary img { width:100%; height:108px; object-fit:cover; object-position:top; display:block; }.showcase-secondary span { display:block; font-size:9px; color:#718365; padding:9px 12px; }
.showcase-bottom { font-size:7px; letter-spacing:.4px; padding:16px 2px 1px; }
.facts { padding:25px 0; }.facts strong { font-size:34px; color:#355039; }.facts p { font-size:10px; color:#819078; }.facts .fact-text strong { font-size:24px; }
.section { padding:70px 0; }.section-top h2 { font-size:32px; font-weight:500; }.section-top>p { color:#7b8a75; font-size:12px; }.section-top .eyebrow { font-size:9px; color:#819476; letter-spacing:1.6px; }
.filter-row { margin-bottom:28px; gap:10px; }.filter { font-size:11px; padding:10px 18px; }.filter.active { background:#314839; border-color:#314839; }
.project-grid { gap:30px; }.project { border-radius:15px; border:1px solid #dce3d7; background:#fcfdf9; box-shadow:0 5px 17px #28402102; }.project:hover { box-shadow:0 12px 28px #243d2910; transform:translateY(-4px); }
.project:last-child { display:block; grid-column:auto; }.project:last-child .project-body { align-self:auto; }
.project-preview { width:100%; padding:0; text-align:left; display:block; border:0; background:#eaf0e3; }
.preview-bar { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:11px 17px; border-bottom:1px solid #dce4d5; color:#87977b; font:8px var(--mono); background:#edf2e7; }.preview-bar>span:nth-child(2) { margin-left:auto; }.window-dots { font-size:8px; letter-spacing:3px; opacity:.65; }.preview-zoom { font-size:17px; color:#73925b; margin-left:9px; }
.preview-image { display:block; padding:17px 19px 12px; height:325px; overflow:hidden; }.preview-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:7px; border:1px solid #d7dfd0; box-shadow:0 8px 18px #1c362716; transition:transform .3s; }.project-preview:hover .preview-image img { transform:translateY(-2px); }
.preview-caption { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:2px 19px 14px; font-size:8px; color:#7c8d71; }.preview-caption>span { white-space:nowrap; font:8px var(--mono); }
.project-body { padding:25px 28px 23px; }.project-meta { font-size:9px; color:#8b9782; }.project h3 { font-size:21px; font-weight:600; letter-spacing:-.3px; margin:17px 0 11px; }.project-body>.project-date { color:#929f87; font-size:9px; margin-bottom:14px; }.project-body>p { font-size:12px; line-height:1.95; color:#73816d; min-height:71px; }.status { border-radius:30px; padding:6px 10px; font-size:9px; }
.tags { gap:7px; margin:18px 0 20px; }.tags span { border-radius:5px; padding:5px 8px; font-size:9px; color:#7a886e; background:#f2f5ec; border-color:#e7edde; }.case-link { font-size:11px; font-weight:500; color:#4d6846; border-color:#e3e9da; padding-top:17px; }.case-link span { font-size:20px; }
.archive-note { margin-top:30px; display:flex; align-items:center; gap:11px; border-top:1px solid #dce3d7; padding:23px 0 0; }.archive-note p { font-size:10px; line-height:1.9; color:#85937c; margin:0; }.archive-count { margin-left:auto; white-space:nowrap; font:8px var(--mono); color:#8a987e; letter-spacing:1px; }
.approach { background:#263d33; padding:65px 0; }.approach .section-top h2 { font-weight:500; }.steps h3 { font-weight:500; }.steps p { font-size:12px; color:#b0c1ad; }.step-number { color:#c3df9d; }
.experience-left h2 { font-size:34px; font-weight:500; }.timeline h3,.toolkit>h3,.education h3 { font-weight:500; }.timeline p { font-size:12px; color:#7b8875; }.skill-row p { font-size:11px; }.contact { border-radius:18px; background:#e7eedc; padding:45px; }.contact h2 { font-weight:500; }.footer { padding-top:34px; font-size:9px; color:#8d9a84; }
#case-dialog { width:min(980px,calc(100% - 40px)); max-height:91vh; background:#f9faf4; border-radius:17px; }.dialog-top { background:#f9faf4; padding:20px 30px; }.dialog-top .eyebrow { color:#8b997e; }#case-content { padding:27px 38px 32px; }#case-content h2 { font-size:29px; font-weight:500; }#case-content .lead { font-size:13px; line-height:2; color:#798771; }#case-content h3 { font-size:15px; font-weight:500; }#case-content li { font-size:12px; color:#76856c; }.dialog-footer { padding:21px 38px; background:#edf2e4; }.boundary { background:#edf2e5; border-radius:0 9px 9px 0; }
.case-gallery { margin:28px 0; padding-bottom:24px; border-bottom:1px solid #dfe7d7; }.gallery-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.gallery-heading h3 { margin:0!important; }.gallery-heading>span { font:9px var(--mono); color:#8c9d7c; }.gallery-primary { display:block; padding:0; width:100%; overflow:hidden; border:1px solid #d3deca; background:#e8efdf; border-radius:11px; }.gallery-primary img { display:block; width:100%; height:auto; max-height:510px; object-fit:contain; background:#e8efdf; }.gallery-primary>span { display:flex; justify-content:space-between; gap:15px; padding:13px 17px; font-size:10px; background:#f4f7ed; color:#728764; }.gallery-note { font-size:10px!important; color:#8d9e7c!important; margin:12px 0; }.gallery-thumbs { display:flex; gap:10px; overflow-x:auto; padding:3px 0 5px; }.gallery-thumbs button { flex:0 0 124px; border:1px solid #dce5d1; background:#f3f7ec; padding:3px; border-radius:7px; overflow:hidden; }.gallery-thumbs button.active { border-color:#759854; box-shadow:0 0 0 1px #759854; }.gallery-thumbs img { width:100%; height:76px; object-fit:cover; object-position:top; display:block; border-radius:4px; }.gallery-thumbs span { display:block; font-size:8px; padding:7px 2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#image-dialog { width:min(1320px,calc(100% - 32px)); max-height:94vh; background:#18261e; color:#eef3e7; border:1px solid #43563a; border-radius:13px; overflow:hidden; }.image-dialog-top { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 22px; border-bottom:1px solid #364833; }.image-dialog-top>div { min-width:0; }.image-dialog-top span { display:block; font-size:13px; }.image-dialog-top small { display:block; margin-top:6px; font-size:9px; color:#9bb38c; }.image-dialog-top button { background:#2e402a; border:1px solid #4a623f; border-radius:50%; width:32px; height:32px; color:#e5efd8; font-size:22px; }.image-stage { padding:15px; display:flex; justify-content:center; background:#111c15; }.image-stage img { display:block; max-width:100%; width:auto; max-height:calc(94vh - 160px); object-fit:contain; }.image-navigation { display:flex; justify-content:space-between; align-items:center; padding:13px 22px; gap:16px; color:#b8cf9c; font-size:11px; }.image-navigation button { border:0; background:transparent; color:#c4d9b1; font-size:11px; padding:8px 5px; }.image-navigation button:disabled { opacity:.35; cursor:default; }
@media(min-width:1450px) { .hero { gap:70px; }.showcase-primary>img { height:265px; }.preview-image { height:343px; } }
@media(max-width:1050px) { .hero { gap:30px; }.hero-description { font-size:13px; }h1 { font-size:38px; }.showcase-primary>img { height:220px; }.showcase-secondary img { height:85px; }.preview-image { height:280px; }.archive-count { display:none; }.project-body { padding:22px; }.project-meta { flex-wrap:wrap; } }
@media(max-width:720px) { .wrap { width:calc(100% - 40px); }.header { padding:19px 20px; }.brandmark { width:39px; height:39px; font-size:18px; }.header nav { gap:16px; }.hero { grid-template-columns:1fr; gap:31px; padding:39px 0; }h1 { font-size:38px; letter-spacing:-1px; margin:23px 0 18px; }.hero .eyebrow { font-size:9px; }.hero-description { font-size:13px; }.hero-actions { gap:20px; }.hero-showcase { padding:15px; border-radius:14px; }.showcase-primary>img { height:auto; aspect-ratio:1.5; object-fit:cover; }.showcase-secondary img { height:90px; }.showcase-top { font-size:7px; }.facts { grid-template-columns:1fr .75fr 1.4fr; }.facts strong { font-size:29px; }.facts .fact-text strong { font-size:19px; }.facts p { font-size:9px; }.section { padding:45px 0; }.section-top h2 { font-size:27px; }.filter-row { gap:7px; }.filter { padding:9px 12px; font-size:10px; }.project-grid { grid-template-columns:1fr; gap:23px; }.preview-image { height:249px; padding:13px 15px 10px; }.preview-caption { font-size:7px; padding:1px 15px 13px; gap:6px; }.preview-caption>span { font-size:7px; }.project-body { padding:22px; }.project h3 { font-size:20px; }.project-body>p { min-height:0; font-size:12px; }.project-meta { font-size:9px; }.archive-note { align-items:flex-start; }.archive-note .dot { margin-top:7px; }.archive-note p { font-size:9px; }.steps p { font-size:11px; }.experience { gap:33px; }.experience-left h2 { font-size:29px; }.contact { padding:28px 24px; border-radius:13px; }.contact h2 { font-size:26px; }#case-dialog { width:calc(100% - 24px); border-radius:13px; }.dialog-top { padding:16px 20px; }#case-content { padding:23px 22px; }#case-content h2 { font-size:23px; }.dialog-footer { padding:19px 22px; }.gallery-primary img { max-height:330px; }.gallery-primary>span { font-size:9px; padding:11px 13px; }.gallery-thumbs button { flex-basis:100px; }.gallery-thumbs img { height:65px; }#image-dialog { width:calc(100% - 14px); }.image-dialog-top { padding:14px; }.image-dialog-top span { font-size:11px; }.image-dialog-top small { font-size:8px; }.image-stage { padding:6px; }.image-navigation { padding:12px 14px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
@media print { .hero-showcase,.project-preview,.archive-note,.case-gallery,#image-dialog { display:none!important; }.project { display:block!important; break-inside:avoid; box-shadow:none; }.hero { display:block; }.project-body>p { min-height:0; }.project-grid { grid-template-columns:1fr 1fr; }.project h3 { font-size:16px; }.project-body { padding:15px; }.section { padding:22px 0; }.contact { padding:20px; } }

.gallery-filters { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0; }
.gallery-filters button { padding:8px 12px; font-size:10px; border:1px solid #d5dfcc; border-radius:20px; color:#69815d; background:#f3f6ed; }
.gallery-filters button.active { background:#36543d; color:#eff6e8; border-color:#36543d; }
.gallery-position { font:10px var(--mono); color:#809674; margin:18px 0 12px; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; overflow:visible; }
.gallery-thumbs button { min-width:0; padding:5px; text-align:left; }
.gallery-thumbs img { height:94px; }
.gallery-thumbs small { display:block; color:#739164; font-size:8px; padding:8px 4px 0; }
.gallery-thumbs span { white-space:normal; line-height:1.65; padding:5px 4px 6px; min-height:36px; color:#5b7152; }
.gallery-filters button:focus-visible,.gallery-thumbs button:focus-visible { outline:2px solid #739d5a; outline-offset:3px; }
@media(max-width:720px) { .gallery-heading { align-items:flex-start; gap:12px; }.gallery-heading>span { font-size:8px; text-align:right; line-height:1.7; }.gallery-filters { gap:6px; }.gallery-filters button { font-size:9px; padding:7px 10px; }.gallery-thumbs { grid-template-columns:repeat(2,minmax(0,1fr)); }.gallery-thumbs img { height:82px; }.gallery-position { font-size:8px; line-height:1.8; }.preview-caption { flex-wrap:wrap; } }