/* Public appearance defaults mirror the portfolio: thin, extended typography on black. */
:root{--paper:#101010;--ink:#eee;--muted:#a0a0a0;--accent:#fff;--line:#373737;--image-background:#171717;--sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--body-weight:100;--heading-weight:100;--text-scale:1.25;--body-size:16px;--heading-size:96px;--body-line-height:1.9;--body-tracking:1.2px;--page-width:1440px;--page-margin:5%;--grid-columns:2;--grid-gap:28px;--card-ratio:16/9;--hero-ratio:4/3;--image-fit:contain;--frame-radius:0px;--frame-border:1px;--frame-padding:0px;--gallery-width:1320px;--gallery-gap:36px}
body:not(.admin-body){font-family:var(--sans);font-weight:var(--body-weight);font-size:var(--body-size);background:var(--paper);color:var(--ink)}
body:not(.admin-body) ::selection{background:var(--ink);color:var(--paper)}
body:not(.admin-body) .wrap,body:not(.admin-body) .site-header,body:not(.admin-body) .site-footer{width:calc(100% - var(--page-margin) * 2);max-width:var(--page-width);margin-left:auto;margin-right:auto}
body:not(.admin-body) .site-header{border-color:var(--line)}
body:not(.admin-body) .wordmark{font-family:var(--sans);font-weight:var(--heading-weight);letter-spacing:.13em;font-size:25px}
body:not(.admin-body) .wordmark-cn{font-weight:var(--body-weight);letter-spacing:.16em;font-size:12px}
body:not(.admin-body) .site-header nav a{font-weight:var(--body-weight);letter-spacing:.1em}
body:not(.admin-body) .eyebrow,body:not(.admin-body) .site-header nav span,body:not(.admin-body) .header-note,body:not(.admin-body) .feature-label,body:not(.admin-body) .hero-feature figcaption span:last-child,body:not(.admin-body) .card-english,body:not(.admin-body) .detail-english{font-family:var(--sans);font-weight:var(--body-weight);letter-spacing:.16em}
body:not(.admin-body) .hero-meta{margin-bottom:44px}
body:not(.admin-body) .hero h1{font-weight:var(--heading-weight);font-size:var(--heading-size);line-height:1.3;letter-spacing:.015em;word-break:normal;overflow-wrap:anywhere}
body:not(.admin-body) .hero-intro{font-size:var(--body-size);line-height:var(--body-line-height);letter-spacing:var(--body-tracking);color:var(--muted);max-width:400px}
body:not(.admin-body) .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
body:not(.admin-body) .hero-image-wrap{aspect-ratio:var(--hero-ratio);background:var(--image-background);border:var(--frame-border) solid var(--line);border-radius:var(--frame-radius);padding:var(--frame-padding)}
body:not(.admin-body) .hero-feature img{object-fit:var(--image-fit)}
body:not(.admin-body) .feature-label{background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:9px}
body:not(.admin-body) .text-link{font-weight:var(--body-weight);letter-spacing:.12em;border-color:var(--line)}
body:not(.admin-body) .hero-feature figcaption{font-weight:var(--body-weight);letter-spacing:.08em}
body:not(.admin-body) .work-index{border-color:var(--line)}
body:not(.admin-body) .section-heading h2{font-weight:var(--heading-weight);font-size:calc(var(--heading-size) * .43);letter-spacing:.08em;flex:1;min-width:0}
body:not(.admin-body) .section-heading h2 sup{font-size:10px;font-weight:var(--body-weight)}
body:not(.admin-body) .filters{gap:26px}
body:not(.admin-body) .filters button{font-family:var(--sans);font-weight:var(--body-weight);letter-spacing:.14em;border-bottom-width:1px}
body:not(.admin-body) .category-heading{align-items:center}
body:not(.admin-body) .category-heading h3{font-weight:var(--heading-weight);letter-spacing:.1em;flex:0 1 285px;min-width:0;font-size:calc(var(--body-size) * 1.5)}
body:not(.admin-body) .category-heading h3 .type-wide:before{content:'[ ';color:var(--muted)}
body:not(.admin-body) .category-heading h3 .type-wide:after{content:' ]';color:var(--muted)}
body:not(.admin-body) .category-heading .eyebrow{max-width:35%;overflow-wrap:anywhere}
body:not(.admin-body) .category-count{white-space:nowrap}
body:not(.admin-body) .project-grid{grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:calc(var(--grid-gap) + 12px) var(--grid-gap)}
body:not(.admin-body) .card-image,body:not(.admin-body) .category-block[data-category=photography] .card-image{aspect-ratio:var(--card-ratio);background:var(--image-background);border:var(--frame-border) solid var(--line);border-radius:var(--frame-radius);padding:var(--frame-padding)}
body:not(.admin-body) .card-image img{object-fit:var(--image-fit);width:100%;height:100%;border-radius:max(0px,calc(var(--frame-radius) - var(--frame-padding)))}
body:not(.admin-body) .card-image:after{background:var(--ink);color:var(--paper)}
body:not(.admin-body) .project-card:hover .card-image img,body:not(.admin-body) .hero-feature a:hover img{transform:none}
body:not(.admin-body) .project-card:hover .card-image{border-color:var(--muted)}
body:not(.admin-body) .card-caption h4{font-weight:var(--heading-weight);font-size:calc(var(--body-size) * 1.125);letter-spacing:.06em;line-height:1.8;flex:1;min-width:0}
body:not(.admin-body) .card-english{font-size:10px;line-height:1.8;overflow-wrap:anywhere}
body:not(.admin-body) .about{border-color:var(--line)}
body:not(.admin-body) .about-heading h2{font-weight:var(--heading-weight);font-size:calc(var(--heading-size) * .38);letter-spacing:.035em;line-height:1.6;word-break:normal}
body:not(.admin-body) .about-body p{font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-line-height);letter-spacing:var(--body-tracking)}
body:not(.admin-body) .portrait{filter:none;border-radius:var(--frame-radius)}
body:not(.admin-body) .site-footer{border-color:var(--line)}
body:not(.admin-body) .detail-hero h1{font-weight:var(--heading-weight);font-size:calc(var(--heading-size) * .8);letter-spacing:.025em;line-height:1.4}
body:not(.admin-body) .detail-intro .summary{font-weight:var(--body-weight);font-size:calc(var(--body-size) * 1.2);line-height:var(--body-line-height);letter-spacing:var(--body-tracking)}
body:not(.admin-body) .thinking p{font-weight:var(--body-weight);font-size:var(--body-size);line-height:var(--body-line-height);letter-spacing:var(--body-tracking)}
body:not(.admin-body) .detail-facts dd{font-weight:var(--body-weight);font-size:calc(var(--body-size) * .8);letter-spacing:var(--body-tracking);line-height:var(--body-line-height)}
body:not(.admin-body) .gallery{width:100%;max-width:var(--gallery-width)}
body:not(.admin-body) .gallery figure{margin-bottom:var(--gallery-gap)}
body:not(.admin-body) .gallery button{border:var(--frame-border) solid var(--line);border-radius:var(--frame-radius);padding:var(--frame-padding);overflow:hidden;background:var(--image-background)}
body:not(.admin-body) .gallery img{border-radius:max(0px,calc(var(--frame-radius) - var(--frame-padding)))}
body:not(.admin-body) .gallery figcaption{font-weight:var(--body-weight);line-height:var(--body-line-height)}
body:not(.admin-body) .project-nav{border-color:var(--line)}
body:not(.admin-body) .project-nav strong{font-weight:var(--heading-weight);letter-spacing:.05em}
body:not(.admin-body) #previewBanner:not([hidden]){background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);font-size:12px;font-weight:300}
body:not(.admin-body) #lightbox{background:var(--paper);color:var(--ink)}
.type-frame>.type-wide{display:block;box-sizing:border-box;width:calc(100% / var(--text-scale));transform:scaleX(var(--text-scale));transform-origin:left top;overflow-wrap:anywhere}
/* The editor keeps a legible, independent palette. Public settings affect its live preview only. */
body.admin-body{--paper:#f4f4f0;--ink:#20221f;--muted:#70736b;--line:#d4d5ce;--accent:#5d684b;--sans:'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-family:var(--sans);font-weight:400}
@media(max-width:1000px){body:not(.admin-body) .hero h1{font-size:calc(var(--heading-size) * .8)}body:not(.admin-body) .hero-intro{max-width:100%}body:not(.admin-body) .category-heading h3{flex-basis:235px}body:not(.admin-body) .category-heading .eyebrow{max-width:28%}}
@media(max-width:650px){body:not(.admin-body) .wrap,body:not(.admin-body) .site-header,body:not(.admin-body) .site-footer{width:calc(100% - var(--page-margin) * 2)}body:not(.admin-body) .hero-grid{grid-template-columns:minmax(0,1fr)}body:not(.admin-body) .hero-meta{margin-bottom:28px}body:not(.admin-body) .hero h1{font-size:clamp(36px,12vw,calc(var(--heading-size) * .7));line-height:1.4}body:not(.admin-body) .hero-intro{font-size:var(--body-size)}body:not(.admin-body) .hero-image-wrap{aspect-ratio:var(--hero-ratio)}body:not(.admin-body) .wordmark{font-size:20px;letter-spacing:.1em}body:not(.admin-body) .section-heading h2{font-size:calc(var(--heading-size) * .31)}body:not(.admin-body) .category-heading h3{font-size:calc(var(--body-size) * 1.35);flex:1}body:not(.admin-body) .project-grid{grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}body:not(.admin-body) .card-caption h4{font-size:var(--body-size)}body:not(.admin-body) .about-heading h2{font-size:calc(var(--heading-size) * .3)}body:not(.admin-body) .about{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}body:not(.admin-body) .about-body p{font-size:var(--body-size)}body:not(.admin-body) .detail-hero h1{font-size:clamp(28px,8.5vw,calc(var(--heading-size) * .5))}body:not(.admin-body) .detail-intro .summary{font-size:calc(var(--body-size) * 1.1)}body:not(.admin-body) .thinking p{font-size:var(--body-size)}body:not(.admin-body) .gallery{width:100%;margin-left:0;margin-right:0}body:not(.admin-body) .category-block[data-category=photography] .card-image{aspect-ratio:var(--card-ratio)}body:not(.admin-body) .hero-feature figcaption{line-height:1.7}body:not(.admin-body) .hero-feature figcaption span:last-child{font-size:8px;max-width:45%;text-align:right}}

body:not(.admin-body) .about-heading{container-type:inline-size}
@supports (font-size:1cqi){body:not(.admin-body) .about-heading h2{font-size:min(calc(var(--heading-size) * .38),13cqi)}}
body:not(.admin-body) .gallery figcaption>span:first-child:not(:last-child){flex:1;min-width:0}
/* Native image and editable-text sections imported from the InDesign document. */
.source-section{margin-bottom:calc(var(--gallery-gap) * 1.8)}
.source-copy{max-width:900px;margin:0 auto 32px;padding-top:20px}
.source-copy h2{font-weight:var(--heading-weight);font-size:calc(var(--body-size) * 1.6);line-height:1.7;letter-spacing:var(--body-tracking);margin:0 0 22px}
.source-copy p{font-weight:var(--body-weight);font-size:var(--body-size);line-height:var(--body-line-height);letter-spacing:var(--body-tracking);white-space:pre-line;margin:0}
.source-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);align-items:center}
.source-image-grid.single-image{grid-template-columns:minmax(0,1fr)}
body:not(.admin-body) .source-image-grid figure{margin:0;min-width:0;align-self:center}
body:not(.admin-body) .source-image-grid button{display:flex;align-items:center;justify-content:center;min-width:0}
body:not(.admin-body) .source-image-grid img{width:100%;height:auto;max-height:85vh;object-fit:contain;min-width:0}
body:not(.admin-body) .source-image-grid .narrow-image img{max-height:600px;width:auto;max-width:100%}
body:not(.admin-body) .source-image-grid .wide-image{grid-column:1/-1}
.detail-intro.no-copy{display:block;padding-bottom:35px}
.detail-intro.no-copy>div{display:none}
.detail-intro.no-copy .detail-facts{display:flex;gap:35px;flex-wrap:wrap}
.detail-intro.no-copy .detail-facts>div{min-width:140px}
.resume-entry{margin-top:25px}
.resume-heading{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:65px 0;border-bottom:1px solid var(--line)}
.resume-heading>div{flex:1;min-width:0}
.resume-heading h1{font-size:clamp(40px,6vw,80px);font-weight:var(--heading-weight);letter-spacing:.06em;line-height:1.5;margin:15px 0 30px}
.resume-name{font-size:calc(var(--body-size) * 1.2);letter-spacing:.12em}
.resume-portrait{width:180px;aspect-ratio:3/4;object-fit:cover;border-radius:var(--frame-radius)}
.resume-intro{padding:45px 0;display:grid;grid-template-columns:1fr 3fr;gap:40px;border-bottom:1px solid var(--line)}
.resume-intro p,.resume-block p{white-space:pre-line;font-size:var(--body-size);font-weight:var(--body-weight);letter-spacing:var(--body-tracking);line-height:var(--body-line-height);margin:0}
.resume-layout{display:grid;grid-template-columns:1fr 3fr;gap:40px;padding-top:55px}
.resume-index{display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:30px}
.resume-index a{font-size:12px;line-height:1.8;display:flex;gap:12px}
.resume-index a span{font:10px var(--mono);color:var(--muted);padding-top:5px}
.resume-block{padding:0 0 45px;margin-bottom:45px;border-bottom:1px solid var(--line);scroll-margin-top:30px}

.resume-subtitle{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:25px;white-space:pre-line}
.resume-ending{display:flex;justify-content:flex-end;margin-bottom:60px}
@media(max-width:650px){.source-image-grid{grid-template-columns:minmax(0,1fr)}.source-copy{margin-bottom:25px;padding-top:0}.source-copy h2{font-size:calc(var(--body-size) * 1.35)}.resume-heading{padding:35px 0;gap:25px;align-items:start}.resume-heading h1{font-size:34px;margin-top:12px}.resume-portrait{width:95px}.resume-name{font-size:13px}.resume-intro{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 0}.resume-layout{grid-template-columns:minmax(0,1fr);padding-top:25px;gap:35px}.resume-index{position:static;flex-direction:row;overflow:auto;padding-bottom:15px;gap:20px}.resume-index a{min-width:130px;font-size:11px}.resume-block{margin-bottom:30px;padding-bottom:30px}.detail-intro.no-copy .detail-facts{gap:15px}}
/* Complete PDF pages retain overlap, cropping, lettering and page aspect ratio. */
body:not(.admin-body) .pdf-layout-gallery .pdf-layout-page{margin:0 0 var(--gallery-gap)}
body:not(.admin-body) .pdf-layout-page button{padding:0;border:0;border-radius:0;background:transparent;display:block;width:100%}
body:not(.admin-body) .pdf-layout-page img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0}
body:not(.admin-body) .pdf-layout-page figcaption{padding-top:10px}
.site-brand{display:flex;align-items:center;flex:0 1 auto;max-width:45%;min-width:0;line-height:0}
.site-logo{display:block;width:var(--logo-width,180px);height:auto;max-width:100%;object-fit:contain;object-position:left center}
.resume-group{scroll-margin-top:30px;margin-bottom:35px}
.resume-group-title{border-bottom:1px solid var(--line);padding:0 0 26px;margin-bottom:38px}
.resume-group-title h2{font-size:calc(var(--body-size) * 1.9);font-weight:var(--heading-weight);line-height:1.7;letter-spacing:.06em;margin:12px 0 0}
.resume-block h3{font-size:calc(var(--body-size) * 1.6);font-weight:var(--heading-weight);line-height:1.7;letter-spacing:.06em;margin:10px 0 15px}
.resume-index-group{display:flex;flex-direction:column;gap:17px}
.resume-index a.resume-index-heading{font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
@media(max-width:650px){.site-logo{width:var(--logo-mobile-width,140px);height:auto}.resume-group-title h2{font-size:25px}.resume-block h3{font-size:21px}.resume-index-group{min-width:165px}.resume-group-title{margin-bottom:25px}}

/* Full-width opening preserves the cover composition and collapses empty copy. */
body:not(.admin-body) .site-header{height:auto;min-height:93px;padding-top:20px;padding-bottom:20px}
body:not(.admin-body) .hero.hero-opening{padding:0}
.hero-cover{margin:0;width:100%;background:var(--image-background)}
.hero-cover img{display:block;width:100%;height:auto;border:0;border-radius:0}
body:not(.admin-body) .hero-opening .hero-copy{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6%;align-items:start;padding-top:clamp(28px,5vw,80px);padding-bottom:clamp(28px,5vw,80px)}
body:not(.admin-body) .hero-opening .hero-copy.single-copy{grid-template-columns:minmax(0,1fr)}
body:not(.admin-body) .hero-opening h1,body:not(.admin-body) .hero-opening .hero-intro{margin:0;max-width:100%;white-space:pre-line}
@media(max-width:650px){body:not(.admin-body) .site-header{min-height:75px;padding-top:16px;padding-bottom:16px}body:not(.admin-body) .hero-opening .hero-copy{grid-template-columns:minmax(0,1fr);gap:24px}}
.project-media{max-width:var(--gallery-width);margin:0 auto var(--gallery-gap)}
.project-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--image-background)}
.project-media video,.project-media img{display:block;width:100%;height:auto;background:var(--image-background)}
.project-media video{max-height:85vh;object-fit:contain}
.project-media figcaption{font-size:var(--body-size);line-height:var(--body-line-height);font-weight:var(--body-weight);margin-top:12px;white-space:pre-line;color:var(--muted)}
/* In-gallery media span the image grid while retaining the page's normal spacing. */
body:not(.admin-body) .gallery .project-media{grid-column:1/-1;width:100%;max-width:100%;margin:0}
body:not(.admin-body) .source-image-grid .project-media{padding:0}
/* Crossfade snapshots include the destination background without sliding content. */
@keyframes portfolio-out{to{opacity:0}}
@keyframes portfolio-in{from{opacity:0}}
::view-transition-old(root){animation:portfolio-out 240ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:portfolio-in 240ms cubic-bezier(.4,0,.2,1) both}
::view-transition-group(root){animation-duration:240ms}
#main:focus{outline:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root),::view-transition-group(root){animation:none}}

body:not(.admin-body) .pdf-layout-gallery .project-media{margin-bottom:var(--gallery-gap)}
body:not(.admin-body) .about{grid-template-columns:minmax(180px,320px) minmax(0,1fr);justify-content:start;align-items:start;text-align:left;gap:6%}
body:not(.admin-body) .about-portrait .eyebrow{margin-bottom:22px}
body:not(.admin-body) .about-body{grid-column:auto;padding-top:0;max-width:680px}
body:not(.admin-body) .about .portrait{margin-left:0}
.site-footer .footer-brand{flex-shrink:0;max-width:45%}
.site-footer #footerText{white-space:pre-line;overflow-wrap:anywhere;line-height:1.8;flex:0 1 360px}
.site-footer #footerText[hidden]{display:none}
.resume-image-module{margin:35px 0 60px;border-top:1px solid var(--line);padding-top:35px}
.resume-masonry{columns:2;column-gap:var(--gallery-gap)}
.resume-masonry figure{display:inline-block;vertical-align:top;break-inside:avoid;width:100%;margin:0 0 var(--gallery-gap)}
.resume-masonry button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.resume-masonry img{display:block;width:100%;height:auto}
.resume-masonry figcaption{font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-line-height);white-space:pre-line;margin-top:12px;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:650px){body:not(.admin-body) .about{grid-template-columns:minmax(0,1fr);gap:28px}body:not(.admin-body) .about-portrait{max-width:260px}.resume-masonry{column-gap:14px}.resume-masonry figure{margin-bottom:14px}.resume-masonry figcaption{font-size:12px}.site-footer #footerText{flex:1 1 40%}}

body:not(.admin-body) .about{grid-template-columns:180px minmax(0,1fr)}
body:not(.admin-body) .about .portrait{width:160px;max-width:100%;height:auto}
body:not(.admin-body) .about .resume-entry{display:flex;width:100%;max-width:420px;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:22px 26px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);text-decoration:none;transition:background-color 150ms ease,color 150ms ease}
.resume-entry-copy{display:flex;flex-direction:column;gap:8px;text-align:left}
.resume-entry-copy strong{font-size:24px;font-weight:400;line-height:1.4;letter-spacing:.12em}
.resume-entry-copy small{font-size:10px;letter-spacing:.16em;line-height:1.5}
.resume-entry-arrow{font-size:32px;font-weight:300;line-height:1}
body:not(.admin-body) .about .resume-entry:hover{background:var(--paper);color:var(--ink)}
body:not(.admin-body) .about .resume-entry:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
body:not(.admin-body) .work-index .works-note{white-space:pre-line;max-width:48%;overflow-wrap:anywhere}
@media(max-width:650px){body:not(.admin-body) .about{grid-template-columns:minmax(0,1fr)}body:not(.admin-body) .about-portrait{max-width:180px}body:not(.admin-body) .about .portrait{width:120px}body:not(.admin-body) .about .resume-entry{max-width:100%;padding:20px 22px}.resume-entry-copy strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){body:not(.admin-body) .about .resume-entry{transition:none}}