/* Only language controls and language copies; artwork geometry is unchanged. */
html[data-site-language='en'] [data-language-copy='zh'],html[data-site-language='zh'] [data-language-copy='en']{display:none!important}
.site-language{order:2}.site-header .menu-toggle,.site-header .menu-button{order:3}
.site-language{display:flex;align-items:center;gap:3px;flex:none;color:inherit;white-space:nowrap;font:13px/1.2 Georgia,'Times New Roman',serif;letter-spacing:.02em}
.site-language button{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;cursor:pointer;min-width:36px;min-height:44px;padding:6px 3px;opacity:.55}
.site-language button[aria-pressed='true']{opacity:1;text-decoration:underline;text-underline-offset:5px}
.site-language button:hover{opacity:1}.site-language button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.site-language span{opacity:.4}
html[data-site-language] .poetry{grid-template-columns:minmax(0,1fr)}
html[lang='zh-Hans'] .work-title-row h1{word-break:normal}
body>.site-language{position:fixed;top:14px;right:18px;z-index:80;color:#35332f;background:#efeee8e8;padding:0 7px;border-radius:2px}
@media print{.site-language{display:none!important}}

/* Small interface-only first-paint guard; independent timer removes it within 1.2s.
   No display/visibility/opacity changes to the page, images, video, canvas or artwork. */
html[data-locale-pending='true'] body :where(h1,h2,h3,p,a,button,label,summary,dt,dd,em,figcaption,output,.eyebrow):not([data-artwork-text],[data-artwork-text] *, .poem,.poem *){color:transparent!important;text-shadow:none!important}
/* Uniform portfolio header: name left, navigation centered, language right. */
html .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px}
html .site-header .wordmark{grid-column:1;grid-row:1;justify-self:start;order:0}
html .site-header nav{grid-column:2;grid-row:1;justify-self:center;order:1;display:flex}
html .site-header nav a:nth-child(n){display:block}
html .site-header .site-language{grid-column:3;grid-row:1;justify-self:end;order:2;margin:0;font-size:12px}
html .site-header .menu-toggle,html .site-header .menu-button{display:none}
@media(max-width:960px){
 html .site-header{grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;row-gap:8px}
 html .site-header .site-language{grid-column:2;grid-row:1;margin:0;font-size:12px}
 html .site-header .site-language button{min-width:30px}
 /* Without working scripting the links remain visible instead of a dead menu. */
 html .site-header nav{display:flex;position:static;grid-column:1/-1;grid-row:2;justify-self:stretch;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:8px 0;border:0;background:transparent}
 html .site-header nav a:nth-child(n){display:block;padding:6px 0;text-align:left}
 html .site-header[data-menu-ready='true'] .menu-toggle,html .site-header[data-menu-ready='true'] .menu-button{display:block;grid-column:3;grid-row:1;margin:0;justify-self:end;order:3}
 html .site-header[data-menu-ready='true'] nav{display:none;position:absolute;top:100%;right:20px;width:min(260px,calc(100vw - 40px));padding:12px 20px;background:#020403f5;border:1px solid #dce3d91f;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;z-index:25}
 html .site-header[data-menu-ready='true'] nav.is-open{display:flex}
 html .site-header[data-menu-ready='true'] nav a:nth-child(n){padding:10px 0}
 html[data-sf-gallery] .site-header{position:relative}
}


/* Selected E: jellyfish blue. Scoped to the active About view. */
@media screen {
 html:has(.site-shell[data-view="about"]){
  --about-paper:#171F36;--about-ink:#DFE3ED;--about-body:#DFE3ED;
  --about-muted:#A3B1D0;--about-water:#B3C8F2;--about-line:#A3B8E638;
  color-scheme:dark;height:auto;min-height:100%;overflow:visible;background:#020303;
 }
 body:has(.site-shell[data-view="about"]){height:auto;min-height:100svh;overflow:visible;color:#E4E1D9;background:#020303}
 html:has(.site-shell[data-view="about"]) .site-shell{height:auto;min-height:100svh;overflow:visible}
 html:has(.site-shell[data-view="about"]) .foreground-stage{height:auto}
 html:has(.site-shell[data-view="about"]) .content-layer{
  position:relative;inset:auto;height:auto;min-height:calc(100svh - 74px);
  padding:22px 7vw 42px;overflow:visible;align-items:flex-start;
 }
 html:has(.site-shell[data-view="about"]) .about-panel{
  color-scheme:dark;width:min(100%,1120px);max-width:1120px;padding:clamp(44px,5vw,70px) clamp(25px,4.8vw,70px);max-height:none;overflow:visible;color:var(--about-ink);
  border:1px solid var(--about-line);box-shadow:none;
  background-color:#171F36;
  background-image:radial-gradient(ellipse 80% 620px at 100% 0%,#424B7C55 0%,transparent 84%);
 }
 html:has(.site-shell[data-view="about"]) .about-panel h1{color:var(--about-water);text-shadow:none;text-wrap:balance;font-size:clamp(36px,3.6vw,50px);line-height:1.16;max-width:780px;margin-bottom:35px}
 html[data-site-language="zh"]:has(.site-shell[data-view="about"]) .about-panel h1{font-style:normal}
 html:has(.site-shell[data-view="about"]) .about-panel>p:not(.eyebrow){color:var(--about-body);opacity:1;max-width:770px;font-size:24px;line-height:1.5;margin-bottom:24px}
 html[data-site-language="zh"]:has(.site-shell[data-view="about"]) .about-panel>p:not(.eyebrow){font-size:21px;line-height:1.85;letter-spacing:.025em}
 html:has(.site-shell[data-view="about"]) .about-panel>p:last-child{margin-bottom:0}
 html:has(.site-shell[data-view="about"]) .about-panel .eyebrow{color:var(--about-muted);opacity:1;font:11px/1.4 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:.17em;margin-bottom:25px}
 html:has(.site-shell[data-view="about"]) .site-header{position:relative;height:74px;background:transparent;color:#E4E1D9;border:0}
 html:has(.site-shell[data-view="about"]) .about-panel a:focus-visible{outline:2px solid var(--about-water);outline-offset:5px}
 html:has(.site-shell[data-view="about"]) .about-panel ::selection{background:var(--about-water);color:var(--about-paper)}
}
@media screen and (max-width:960px){
 html:has(.site-shell[data-view="about"]) .site-header:not([data-menu-ready="true"]){height:auto;min-height:74px;padding-top:12px;padding-bottom:12px}
}
@media screen and (max-width:860px){
 html:has(.site-shell[data-view="about"]) .site-header{height:64px}
 html:has(.site-shell[data-view="about"]) .content-layer{min-height:calc(100svh - 64px);padding:20px 16px 24px}
 html:has(.site-shell[data-view="about"]) .about-panel{padding:44px 25px 38px}
 html:has(.site-shell[data-view="about"]) .about-panel h1{font-size:36px}
 html:has(.site-shell[data-view="about"]) .about-panel>p:not(.eyebrow){font-size:22px;line-height:1.5}
 html[data-site-language="zh"]:has(.site-shell[data-view="about"]) .about-panel>p:not(.eyebrow){font-size:19px;line-height:1.85}
}

@media screen and (max-width:380px){html:has(.site-shell[data-view="about"]) .about-panel{padding-left:20px;padding-right:20px}}

/* Archive v13: cool white, pale blond gold, a small seaweed-blue wash. */
@media screen {
 html:has(.site-shell[data-view="archive"]){
  color-scheme:light;height:auto;min-height:100%;overflow:visible;background:#020303;
 }
 body:has(.site-shell[data-view="archive"]){height:auto;min-height:100svh;overflow:visible;background:#020303;color:#E4E1D9}
 .site-shell[data-view="archive"]{height:auto;min-height:100svh;overflow:visible}
 .site-shell[data-view="archive"] .site-header{position:relative;height:74px;color:#E4E1D9;background:transparent}
 .site-shell[data-view="archive"] .foreground-stage{height:auto}
 .site-shell[data-view="archive"] .content-layer{
  position:relative;inset:auto;height:auto;min-height:calc(100svh - 74px);
  padding:22px 7vw 42px;overflow:visible;align-items:flex-start;
 }
 .site-shell[data-view="archive"] .archive-panel{
  position:relative;isolation:isolate;width:min(1100px,100%);max-height:none;overflow:hidden;
  background:#FAFCFD;color:#343A3D;border:1px solid #DCCB9A;box-shadow:none;
  padding:52px 70px 42px;
 }
 .site-shell[data-view="archive"] .archive-panel::before{
  content:"";position:absolute;right:24px;top:41px;width:250px;height:78px;z-index:-1;
  background:radial-gradient(ellipse at 54% 50%,#3D667328 0%,#5C7C8516 25%,#FAFCFD00 68%);
  transform:rotate(-17deg);pointer-events:none;
 }
 .site-shell[data-view="archive"] .archive-heading{gap:22px}
 .site-shell[data-view="archive"] .archive-heading h1{
  color:#A88D45;font-style:italic;font-size:clamp(48px,5vw,68px);line-height:1.08;
 }
 html[data-site-language="zh"] .site-shell[data-view="archive"] .archive-heading h1{font-style:normal}
 .site-shell[data-view="archive"] .archive-heading p{color:#687175;font-size:19px}
 .site-shell[data-view="archive"] .archive-list{border-top-color:#D5BD7D99;margin-top:34px}
 .site-shell[data-view="archive"] .archive-item{border-bottom-color:#D5BD7D66;padding:30px 0 35px}
 .site-shell[data-view="archive"] .archive-item:last-child{border-bottom:0;padding-bottom:0}
 .site-shell[data-view="archive"] .archive-year{color:#9B803D}
 .site-shell[data-view="archive"] .archive-item h2{color:#8D7238}
 .site-shell[data-view="archive"] .archive-item__detail{color:#657076}
 .site-shell[data-view="archive"] .archive-item__copy,
 .site-shell[data-view="archive"] .archive-item__record dd{color:#343A3D}
 .site-shell[data-view="archive"] .archive-item__record dt{color:#657076}
 .site-shell[data-view="archive"] .archive-panel ::selection{background:#E8D9AE;color:#293438}
 .site-shell[data-view="archive"] .archive-panel :is(a,button):focus-visible{outline:2px solid #8D7238;outline-offset:5px}
}
@media screen and (max-width:960px){
 .site-shell[data-view="archive"] .site-header:not([data-menu-ready="true"]){height:auto;min-height:74px;padding-top:12px;padding-bottom:12px}
 .site-shell[data-view="archive"] .archive-panel{padding-left:45px;padding-right:45px}
}
@media screen and (max-width:860px){
 .site-shell[data-view="archive"] .site-header{height:64px}
 .site-shell[data-view="archive"] .content-layer{min-height:calc(100svh - 64px);padding:20px 16px 24px}
 .site-shell[data-view="archive"] .archive-panel{padding:34px 25px 34px}
 .site-shell[data-view="archive"] .archive-panel::before{width:155px;height:60px;right:2px;top:29px}
 .site-shell[data-view="archive"] .archive-heading{display:block}
 .site-shell[data-view="archive"] .archive-heading p{margin-top:10px;font-size:18px}
 .site-shell[data-view="archive"] .archive-item{padding:26px 0 30px}
 .site-shell[data-view="archive"] .archive-item h2{font-size:32px;line-height:1.15}
 .site-shell[data-view="archive"] .archive-year{font-size:17px;margin-bottom:12px}
 .site-shell[data-view="archive"] .archive-item__detail{font-size:18px!important;line-height:1.4!important}
 .site-shell[data-view="archive"] .archive-item__record{font-size:18px;line-height:1.45}
 html[data-site-language="zh"] .site-shell[data-view="archive"] .archive-item p{font-size:19px;line-height:1.75}
}
@media screen and (max-width:380px){
 .site-shell[data-view="archive"] .archive-panel{padding-left:20px;padding-right:20px}
}
@media(forced-colors:active){
 .site-shell[data-view="archive"] .archive-panel::before{display:none}
}


/* Approved soft panel surfaces: About, Experience, Archive and Contact. */
@media screen {
  html :is(.site-shell[data-view="contact"] .contact-email-panel,
    .site-shell[data-view="archive"] .archive-panel,.site-shell[data-view="about"] .about-panel),
  html #experience-main {
    position: relative; isolation: isolate;
    background: transparent; border-color: transparent; border-radius: 6px; box-shadow: none;
  }
  html :is(.site-shell[data-view="contact"] .contact-email-panel,
    .site-shell[data-view="archive"] .archive-panel,.site-shell[data-view="about"] .about-panel)::after,
  html #experience-main::after {
    content: ""; position: absolute; inset: -1px; z-index: -2; pointer-events: none;
    border-radius: inherit;
    background-color: rgb(var(--surface-rgb) / var(--surface-center));
    background-image: var(--surface-wash, none);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--surface-edge)), #000 var(--surface-feather), #000 calc(100% - var(--surface-feather)), rgb(0 0 0 / var(--surface-edge))), linear-gradient(180deg, rgb(0 0 0 / var(--surface-edge)), #000 var(--surface-feather), #000 calc(100% - var(--surface-feather)), rgb(0 0 0 / var(--surface-edge)));
    mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--surface-edge)), #000 var(--surface-feather), #000 calc(100% - var(--surface-feather)), rgb(0 0 0 / var(--surface-edge))), linear-gradient(180deg, rgb(0 0 0 / var(--surface-edge)), #000 var(--surface-feather), #000 calc(100% - var(--surface-feather)), rgb(0 0 0 / var(--surface-edge)));
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  html .site-shell[data-view="contact"] .contact-email-panel {
    --surface-rgb: 16 30 32; --surface-center: .90; --surface-edge: .80; --surface-feather: 54px;
    --surface-wash: radial-gradient(ellipse 80% 620px at 100% 0%, #2a4a4629 0%, transparent 84%);
  }
  html .site-shell[data-view="about"] .about-panel {
    --surface-rgb: 23 31 54; --surface-center: .96; --surface-edge: .86; --surface-feather: 54px;
    --surface-wash: radial-gradient(ellipse 80% 620px at 100% 0%, #424b7c3d 0%, transparent 84%);
  }
  html .site-shell[data-view="archive"] .archive-panel {
    --surface-rgb: 237 241 236; --surface-center: .985; --surface-edge: .91; --surface-feather: 48px;
  }
  html #experience-main {
    --surface-rgb: 204 221 232; --surface-center: .985; --surface-edge: .91; --surface-feather: 48px;
    --surface-wash: radial-gradient(ellipse 80% 620px at 100% 0%, #9dbfd82e 0%, transparent 84%);
  }
}
@media screen and (max-width: 680px) {
  html :is(.site-shell[data-view="contact"] .contact-email-panel,
    .site-shell[data-view="archive"] .archive-panel,.site-shell[data-view="about"] .about-panel),
  html #experience-main { border-radius: 4px; --surface-feather: 20px; }
}
