@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root{color-scheme:only light;--paper:#fff;--ink:#202020;--muted:#62625c;--surface:#f6f5f0;--media-surface:#f5f5f5;--line:#d8d8d1;--brand:#f2c534;--focus:#202020;--edge:clamp(1.25rem,4.8vw,5rem);--gap:clamp(1.25rem,2.8vw,3rem);--ease:cubic-bezier(.22,.68,.2,1);--fast:160ms;--normal:240ms;--header-height:6.5rem}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 1.5rem)}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;font-size:1rem;line-height:1.6;-webkit-text-size-adjust:100%}a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{color:inherit}img{display:block;max-width:100%;height:auto}a,button,select{touch-action:manipulation}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:5px}::selection{background:var(--brand);color:#202020}[hidden]{display:none!important}.wrap{width:min(100%,1600px);margin-inline:auto;padding-inline:var(--edge)}.skip-link{position:fixed;top:1rem;left:1rem;z-index:100;padding:.75rem 1rem;background:var(--brand);color:#202020;transform:translateY(-200%)}.skip-link:focus{transform:none}.eyebrow{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}.muted{color:var(--muted)}
.header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid transparent;transition:transform var(--normal) var(--ease),border-color var(--fast);padding-block:1.65rem}.header.scrolled{border-color:var(--line)}.header.is-hidden:not(:focus-within){transform:translateY(-101%)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}.name{font-size:clamp(1.25rem,1.65vw,1.625rem);font-weight:500;letter-spacing:-.045em;line-height:1.2;text-decoration:none;white-space:nowrap;min-height:44px;display:flex;align-items:center}.name span{font-weight:400;color:var(--muted);margin-left:.32em}.header-tools{display:flex;align-items:center;gap:clamp(1rem,3vw,3rem)}.nav{display:flex;gap:clamp(.5rem,2.2vw,2rem)}.nav a{min-height:44px;display:flex;align-items:center;padding:.4rem .3rem;text-decoration:none;font-size:.875rem;position:relative}.nav a[aria-current=page]:after{content:'';position:absolute;bottom:3px;left:.3rem;right:.3rem;height:3px;background:var(--brand)}
.work-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-top:clamp(2.5rem,6vw,6rem);padding-bottom:clamp(2rem,4vw,4rem)}.work-heading h1{font-size:clamp(2.25rem,5vw,4.75rem);font-weight:400;line-height:1.08;letter-spacing:-.055em;margin:0}.work-heading .eyebrow{margin:0 0 .25rem}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.5rem,4vw,4.5rem) var(--gap);padding-bottom:clamp(5rem,9vw,9rem)}.card{display:block;min-width:0;text-decoration:none}.image{position:relative;isolation:isolate;aspect-ratio:4/3;background:var(--surface);overflow:hidden}.image img{width:100%;height:100%;object-fit:cover;transition:transform var(--normal) var(--ease)}.image.photo{background:var(--media-surface)}.card-mark{position:absolute;right:1rem;bottom:1rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;background:var(--brand);color:#202020;border-radius:50%;opacity:0;transform:translateY(5px);transition:opacity var(--fast),transform var(--normal) var(--ease)}.label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;padding-top:1rem}.label h2{margin:0;font-weight:500;font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.35;letter-spacing:-.03em}.label time,.label p{font-size:.8125rem;color:var(--muted);margin:0}.label time{align-self:center;font-variant-numeric:tabular-nums}.label p{grid-column:1/-1}.card:focus-visible .card-mark{opacity:1;transform:none}
.site-footer{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,5rem) 1.5rem}.footer-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end}.footer-contact{font-size:clamp(1.35rem,3.6vw,3.5rem);font-weight:400;letter-spacing:-.045em;line-height:1.25;overflow-wrap:anywhere;text-decoration:none}.footer-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}.footer-nav a{min-height:44px;display:flex;align-items:center;text-decoration:none;font-size:.875rem}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(2rem,5vw,5rem);padding-top:0;color:var(--muted);font-size:.8125rem}.footer-bottom p{margin:0}.footer-note{max-width:30rem}
.project-main{padding-top:clamp(2rem,4vw,4rem)}.project-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start;margin-bottom:clamp(2rem,4vw,4rem)}.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;text-decoration:none;color:var(--muted);gap:.6rem;margin-bottom:1.25rem}.project-heading h1,.page-title{font-weight:400;font-size:clamp(2.25rem,5vw,4.5rem);letter-spacing:-.05em;line-height:1.1;margin:0;overflow-wrap:anywhere}.project-heading .intro{margin:0;max-width:58ch;font-size:1.0625rem;line-height:1.75;color:var(--muted);text-wrap:pretty}.project-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding-block:1.5rem 2rem;border-top:1px solid var(--line);margin:0}.project-meta dt{font-size:.8125rem;color:var(--muted);margin-bottom:.4rem}.project-meta dd{font-size:1rem;font-weight:500;margin:0;overflow-wrap:anywhere}.project-image{margin:0 0 var(--gap);background:var(--surface)}.project-image.photo{background:#f6f5f0}.project-image img{width:100%;height:auto}.project-image a{display:block;cursor:zoom-in}.project-image figcaption{background:var(--paper);font-size:.8125rem;color:var(--muted);padding:.6rem 0}.project-subheading,.project-copy,.project-list{max-width:52rem;margin-inline:auto}.project-subheading{font-size:clamp(1.5rem,3vw,2.75rem);font-weight:400;letter-spacing:-.04em;line-height:1.2;margin-block:clamp(3rem,7vw,7rem) 1.25rem}.project-copy,.project-list{font-size:1.0625rem;margin-block:0 clamp(2rem,5vw,5rem)}.project-list{padding-left:1.25rem}.next-project{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,6rem);padding-block:2rem clamp(3rem,6vw,6rem);text-decoration:none}.next-project small{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:.5rem}.next-project strong{font-size:clamp(1.5rem,3vw,2.75rem);font-weight:400;letter-spacing:-.04em}.next-project>span:last-child{width:3rem;height:3rem;background:var(--brand);color:#202020;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.text-main{padding-top:clamp(3rem,7vw,7rem);padding-bottom:clamp(5rem,10vw,10rem);min-height:60svh}.text-main .page-title{max-width:24ch;margin-bottom:clamp(3rem,6vw,6rem)}.text-main .about-title{max-width:64rem;font-size:clamp(2rem,4.5vw,4rem);line-height:1.22;letter-spacing:-.035em;text-wrap:pretty}.details{border-top:1px solid var(--line);padding-top:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;max-width:64rem}.details h2{font-size:.875rem;font-weight:400;color:var(--muted);margin:0 0 1rem}.details p{margin:0;max-width:38ch;font-size:1.0625rem;overflow-wrap:anywhere}.details a{text-decoration-color:currentColor}.updates{max-width:64rem}.update{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:2rem;padding-block:1.75rem}.update+.update{border-top:1px solid var(--line)}.update p{margin:0;font-size:1.0625rem}.date{font-size:.875rem;color:var(--muted)}.error-copy{max-width:42ch;margin-block:1.5rem 2rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.1rem;border:1px solid var(--ink);text-decoration:none;background:var(--ink);color:var(--paper)}
.viewer{padding:0;border:1px solid var(--line);max-width:none;max-height:none;width:calc(100% - 2rem);height:calc(100% - 2rem);background:var(--paper);color:var(--ink);overflow:hidden}.viewer::backdrop{background:#000c}.viewer-toolbar{height:auto;min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}.viewer-toolbar p{margin:0;font-size:.875rem}.viewer-close{min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:1.25rem}.viewer-stage{height:calc(100% - 4.5rem);overflow:auto;overscroll-behavior:contain;display:grid;align-items:start;justify-items:center}.viewer-stage img{width:100%;max-width:1600px;height:auto;background:var(--surface)}.image-error{padding:2rem;min-height:12rem;display:grid;place-items:center;text-align:center;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.nav a:not([aria-current=page]):hover,.footer-nav a:hover,.back-link:hover{color:var(--ink);text-decoration:underline}.card:hover .image img{transform:scale(1.025)}.card:hover .card-mark{opacity:1;transform:none}.footer-contact:hover{text-decoration:underline;text-decoration-color:currentColor}.next-project:hover strong{text-decoration:underline}.button:hover{background:var(--brand);border-color:var(--brand);color:#202020}}
a:active,button:active{opacity:.8}
@media(max-width:1100px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{gap:1rem}.header-tools{gap:1rem}.footer-top{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){:root{--header-height:9.5rem}.header{padding-block:.75rem}.header-inner{flex-wrap:wrap;gap:.35rem}.name{font-size:1.25rem}.header-tools{width:100%;justify-content:space-between;gap:.5rem}.nav{gap:.75rem}.work-heading{align-items:flex-start;flex-direction:column;gap:.75rem}.work-heading .eyebrow{order:-1}.project-heading{grid-template-columns:1fr;gap:1.25rem}.project-meta{grid-template-columns:1fr;gap:1rem}.project-meta>div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;align-items:baseline}.project-meta dt{margin:0}.details{grid-template-columns:1fr;gap:2rem}.update{grid-template-columns:1fr;gap:.5rem}.footer-bottom{flex-direction:column;gap:.5rem}.viewer{width:100%;height:100%;border:0}.viewer-toolbar{padding-top:max(.75rem,env(safe-area-inset-top))}.site-footer{padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}}
@media(max-width:540px){.gallery{grid-template-columns:1fr}.project-heading h1{font-size:2.25rem}.footer-contact{font-size:clamp(1.2rem,6vw,2rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.card:hover .image img{transform:none}}
@media(forced-colors:active){.nav a[aria-current=page]{text-decoration:underline}.card-mark,.next-project>span:last-child{border:1px solid ButtonText}a:focus-visible,button:focus-visible,select:focus-visible{outline-color:Highlight}}
@media print{.header,.site-footer,.back-link,.next-project,.viewer,.skip-link{display:none!important}body{background:#fff;color:#000}.wrap{max-width:none;padding:0}.gallery{grid-template-columns:1fr 1fr}.card,.project-image{break-inside:avoid}.project-image img{max-height:90vh;object-fit:contain}.text-main,.project-main{padding:0}}

/* Homepage covers fill the 16:9 frame with the original image; overflow is cropped. */
.image{aspect-ratio:16/9}.header-tools,.nav{flex-wrap:wrap}.name{white-space:normal}.viewer-actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.viewer-zoom{min-height:44px;padding:.5rem .75rem;border:1px solid var(--line);background:var(--paper);cursor:pointer}.viewer-stage.is-zoomed{display:block}.viewer-stage.is-zoomed img{width:auto;height:auto;max-width:none;max-height:none}.viewer-toolbar{flex-wrap:wrap}.viewer{display:none;flex-direction:column}.viewer[open]{display:flex}.viewer-stage{height:auto;min-height:0;flex:1}.viewer-toolbar p{flex:1;min-width:10rem}.viewer-stage img{align-self:center}.viewer-close{flex-shrink:0}

/* Transparent product renders sit on a crisp, achromatic product field. */
.image.transparent,.project-image.transparent,.viewer-stage{background:var(--media-surface)}.project-heading--solo{grid-template-columns:1fr}.project-image.transparent img{background:transparent}.viewer-stage img{background:transparent}
@media(forced-colors:active){.image.transparent,.project-image.transparent,.viewer-stage{background:Canvas;border:1px solid CanvasText}}
@media(max-height:500px){.header{position:relative}.header.is-hidden:not(:focus-within){transform:none}}

/* Product-type headings are sourced from each project Markdown introduction. */
.project-product-title{margin:0 0 1rem;font-size:clamp(1.375rem,2vw,2rem);font-weight:500;line-height:1.3;letter-spacing:-.035em;text-wrap:pretty}

.project-main .project-back{margin-bottom:clamp(1.5rem,3vw,3rem)}
.project-summary{min-width:0}

/* Shared hierarchy and interaction rules. */
.nav a[aria-current=page],.footer-nav a[aria-current=page]{font-weight:600}
.project-heading>div{min-width:0}.project-heading .eyebrow{margin-bottom:.75rem}
.card-mark,.next-project>span:last-child{width:2.25rem;height:2.25rem;font-size:1.25rem}
.next-project>span:first-child{min-width:0;overflow-wrap:anywhere}
.footer-contact{display:inline-block;padding-block:.25rem;text-decoration-line:none;text-decoration-color:currentColor;text-decoration-thickness:1px}
.footer-contact:focus-visible{text-decoration-line:underline}
a,button{scroll-margin-block:calc(var(--header-height) + 1rem) 1rem}
.viewer-stage{position:relative;align-items:center;grid-template-rows:minmax(0,1fr)}
.viewer-stage img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.viewer-status{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;text-align:center;color:var(--muted);margin:0;pointer-events:none}
.viewer-stage[aria-busy=true] img{visibility:hidden}
.viewer-zoom[aria-pressed=true]{background:var(--brand);border-color:var(--ink)}
@media(max-width:960px){.project-heading{grid-template-columns:1fr;gap:1.5rem}.project-heading .intro{max-width:65ch}}
@media(hover:none),(pointer:coarse){.card-mark{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.viewer-zoom:hover,.viewer-close:hover{background:var(--surface);border-color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.header{transition:none}.header.is-hidden:not(:focus-within){transform:none}}