/* The portfolio's existing paper, typography, controls and project cards. */
@font-face{font-family:HNeue;src:url('/assets/HelveticaNeue-Regular.XE2tdPOO.woff2') format('woff2');font-display:swap}
@font-face{font-family:HNeue;src:url('/assets/HelveticaNeue-Light.DlSTh50s.woff2') format('woff2');font-weight:300;font-display:swap}
:root[data-case]{
  --paper:#e8e8e8;--paper-2:#DDDED9;--ink:#0C0D0C;--muted:#6A6B64;--line:#C8C9C2;
  --foot-mute:#9a9b95;--cursor:#fff;
  --serif:'Didot','Bodoni 72','GFS Didot','Playfair Display',Georgia,'Songti SC',serif;
  --sans:HNeue,'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --pad:clamp(18px,4vw,64px);--ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-case][data-theme=dark]{--paper:#161614;--paper-2:#201F1C;--ink:#E8E6DF;--muted:#aaa89e;--line:#34332E;--foot-mute:#949287;--cursor:#E8E6DF;color-scheme:dark}
html[data-case] body{font-family:var(--sans);background:var(--paper);color:var(--ink)}
html[data-case][data-lang=en] [data-zh],html[data-case][data-lang=zh] [data-en]{display:none!important}
html[data-case] .eca-back{position:fixed;inset:0 0 auto;z-index:120;display:flex;justify-content:center;padding:26px 0;background:none;pointer-events:none}
html[data-case] .eca-back a{font:400 14px var(--sans);letter-spacing:.3px;color:var(--ink);opacity:.85;pointer-events:auto}
html[data-case] .eca-back a:hover{opacity:1}
html[data-case] #langBtn{font-family:var(--sans);font-size:11px;letter-spacing:.14em;right:calc(var(--pad) + 58px);top:10px;height:40px}
html[data-case] #themeBtn{top:8px;right:var(--pad);width:40px;height:40px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
html[data-case] #themeBtn:active{transform:scale(.95)}
html[data-case] #themeBtn .ico{font-family:Arial,sans-serif;font-size:15px}
html[data-case] #sidenav{font-family:var(--sans)}
html[data-case] .intro{padding:calc(var(--pad) + 88px) var(--pad) 0}
html[data-case] .intro-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(32px,5vw,56px)}
html[data-case] .intro h1{font:400 clamp(46px,8.3vw,112px)/1 var(--serif);letter-spacing:-.035em;margin:0 0 16px;overflow-wrap:anywhere}
html[data-case] .intro .tag{font:400 clamp(18px,2vw,26px)/1.45 var(--serif);color:var(--muted);margin:18px 0 28px}
html[data-case] .intro .blurb{font:400 clamp(15px,1.5vw,17px)/1.8 var(--sans);max-width:54ch}
html[data-case] .intro-meta{padding-left:0;font-size:13px;line-height:1.7}
html[data-case] .intro-meta dt{font:400 10px/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
html[data-case] .intro-meta dd{font-size:13px}
html[data-case] .project-mark{font:400 11px/1.6 var(--sans);letter-spacing:.18em;color:var(--muted);margin-bottom:24px;display:block}
html[data-case] .sec-title{font:400 clamp(28px,4vw,44px)/1.25 var(--serif);letter-spacing:-.01em}
html[data-case] .sec-lead{font:400 16px/1.8 var(--sans);color:var(--muted);max-width:70ch}
html[data-case] .hero-actions a,html[data-case] .pill,html[data-case] .pill-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;
  padding:10px 18px;border:1px solid var(--line);border-radius:30px;
  background:transparent;color:var(--ink);font:400 12px/1.5 var(--sans);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
html[data-case] .hero-actions a:hover,html[data-case] .pill:hover,html[data-case] .pill-link:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-case] .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
html[data-case] :is(a,button,input,select,summary):focus-visible{outline:2px solid var(--ink);outline-offset:5px}
html[data-case] .case-more{padding:clamp(44px,6vw,88px) var(--pad);border-bottom:1px solid var(--line)}
html[data-case] .case-more .more-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,2.5vw,32px)}
html[data-case] .case-more h2{font:400 16px/1.5 var(--sans);letter-spacing:normal;margin:0;text-transform:none}
html[data-case] .case-more .all-projects{font-size:12px;border-bottom:1px solid var(--line);padding:6px 0}
html[data-case] .case-more .all-projects:hover{border-color:var(--ink)}
html[data-case] .case-more .more-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
html[data-case] .case-more .more-card{display:flex;flex-direction:column;min-width:0;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:11px;overflow:hidden;background:color-mix(in srgb,var(--paper) 40%,transparent);transition:transform .5s var(--ease),border-color .4s var(--ease)}
html[data-case] .case-more .more-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
html[data-case] .case-more .mc-img{aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
html[data-case] .case-more .mc-img :is(img,video){display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:transform .6s var(--ease),filter .5s var(--ease)}
html[data-case] .case-more .mc-img video{pointer-events:none}
html[data-case] .case-more .more-card:hover :is(img,video){transform:scale(1.05);filter:none}
html[data-case] .case-more .mc-meta{padding:13px;display:flex;flex-direction:column;gap:6px}
html[data-case] .case-more .mc-name{font:400 clamp(15px,1.5vw,19px)/1.1 var(--serif);color:var(--ink)}
html[data-case] .case-more .mc-cat{font:400 9px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-case] footer{background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,48px) var(--pad)}
html[data-case] footer .frow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font:400 11px/1.5 var(--sans)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--foot-mute)}
html[data-case] footer .frow a{color:inherit}
html[data-case] footer .frow a:hover{color:var(--paper)}
html[data-case][data-theme=dark] footer{--foot-mute:#7c7a70}
html[data-case] .case-sources{margin:0 var(--pad) 32px;font:400 11px/1.85 var(--sans);color:var(--muted);max-width:95ch}
html[data-case] .case-sources summary{cursor:pointer}
html[data-case] .case-sources .footer-source{margin-top:12px}
html[data-case]::view-transition-old(root),html[data-case]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-theme-reveal=dark]::view-transition-new(root){z-index:9999}
html[data-theme-reveal=dark]::view-transition-old(root){z-index:1}
html[data-theme-reveal=light]::view-transition-new(root){z-index:1}
html[data-theme-reveal=light]::view-transition-old(root){z-index:9999}
html.case-theme-changing,html.case-theme-changing *,html.case-theme-changing *::before,html.case-theme-changing *::after{transition:none!important}
@media(min-width:981px){html[data-case] .case-more,html[data-case] footer{padding-left:calc(var(--pad) + 70px)}html[data-case] .case-sources{margin-left:calc(var(--pad) + 70px)}}
@media(max-width:880px){html[data-case] .case-more .more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){html[data-case] .intro-grid{grid-template-columns:1fr;gap:30px}html[data-case] .intro{padding-top:108px}}
@media(max-width:720px){html[data-case] #langBtn{top:13px;height:36px;right:calc(var(--pad) + 50px)}html[data-case] #themeBtn{width:36px;height:36px;top:13px}}
@media(max-width:520px){html[data-case] .eca-back{justify-content:flex-start;padding:24px var(--pad)}html[data-case] .eca-back a{font-size:12px}html[data-case] .case-more .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html[data-case]{scroll-behavior:auto}html[data-case] *,html[data-case] *::before,html[data-case] *::after{animation:none!important;transition:none!important}html[data-case] .case-more .more-card:hover,html[data-case] .case-more .more-card:hover :is(img,video){transform:none}}