/* Draft palette and composition; independent of the original template. */
@import url('./index2-fonts.css');
@import url('./index2-reference-fonts.css');
@import url('./index2-display-fonts.css');
:root{--bg:#0d022d;--ink:#f5f1fc;--muted:#bab1d2;--accent:#ffcf00;--line:#ffffff24;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;font-weight:300}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0}button:hover,a:hover{color:var(--accent)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link{position:fixed;top:-70px;left:20px;z-index:20;background:var(--accent);color:#10052b;padding:12px}.skip-link:focus{top:10px}
.masthead{height:clamp(170px,13.25vw,290px);position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(#000a,#000b),url('../img/hero-1.png') center 48%/cover}.wordmark{font-family:"Segoe UI Light","Helvetica Neue",sans-serif;font-weight:200;font-size:clamp(42px,6vw,132px);letter-spacing:.32em;padding-left:.32em;white-space:nowrap;line-height:1.2}.language{position:absolute;right:3%;top:22px;font-size:13px;letter-spacing:.12em}.category-nav{position:sticky;top:0;z-index:5}.category-nav [role=tablist]{display:grid;grid-template-columns:1.2fr 1fr .8fr .8fr 1fr}.category-nav a{display:flex;justify-content:center;align-items:center;min-height:clamp(56px,3.8vw,82px);font-family:"Segoe UI Light","Trebuchet MS",sans-serif;font-weight:300;font-size:clamp(18px,2.45vw,54px);letter-spacing:.1em;transition:color .18s,background .18s}.category-nav a:nth-child(1){background:#03364e}.category-nav a:nth-child(2){background:#031d50}.category-nav a:nth-child(3){background:#160548}.category-nav a:nth-child(4){background:#1b034a}.category-nav a:nth-child(5){background:#26034c}.category-nav a[aria-selected=true]{color:var(--accent)}.category-nav a:hover{background:#30205b}
main{min-height:65vh}.panel{padding:54px 3.5% 70px;animation:appear .25s ease}.animation{padding-top:44px}.screen{margin:0 auto;max-width:1350px;width:66%;}.screen video{width:100%;display:block;background:#05030c;aspect-ratio:16/9;object-fit:contain}.screen figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;font-size:14px;color:var(--muted)}.video-link{white-space:nowrap}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin:52px auto 22px;max-width:1500px;border-bottom:1px solid var(--line);padding-bottom:18px}.section-heading h3{font-size:22px;font-weight:300;margin:0}.section-heading>span{color:var(--muted);font-size:13px}.clip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:1500px;margin:auto}.clip{background:none;padding:0;text-align:left;line-height:1.6}.clip-image{display:block;position:relative;aspect-ratio:16/9;background:#08031a;margin-bottom:10px}.clip img{width:100%;height:100%;object-fit:contain}.clip.selected .clip-image{outline:2px solid var(--accent);outline-offset:3px}.play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;background:#09021dbb;border:1px solid #fff8;border-radius:50%;font-size:26px;color:white}.clip:hover .play-icon{background:var(--accent);color:#10052b}.filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:-14px 0 32px}.filters button{background:transparent;padding:8px 14px;color:var(--muted);border-bottom:1px solid transparent}.filters button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.art-card{display:block;width:100%;background:none;padding:0;text-align:left;min-width:0}.image-wrap{display:block;position:relative;background:#eeedf0;overflow:hidden;aspect-ratio:1.7}.art-card img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s}.art-card:hover img{transform:scale(1.025)}.zoom{position:absolute;right:12px;bottom:12px;border-radius:50%;width:32px;height:32px;background:#13052bcc;color:white;text-align:center;line-height:32px;opacity:0;transition:opacity .2s}.art-card:hover .zoom,.art-card:focus-visible .zoom{opacity:1}.caption{display:block;color:var(--muted);font-size:13px;margin-top:10px;line-height:1.4}.gallery-hint{text-align:center;color:var(--muted);margin-top:40px;font-size:13px}.fan-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}.fan-layout .screen{width:100%;margin-top:30px}.fan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fan-grid .image-wrap{aspect-ratio:1.7}.fan-grid .caption{font-size:12px}.project-note{max-width:850px;margin:40px 0}.project-note h3{font-weight:300;font-size:28px}.project-note p{color:var(--muted);line-height:1.8}.more-art{border-top:1px solid var(--line);padding-top:24px}.more-art summary{cursor:pointer;color:var(--muted);margin-bottom:26px}.contact-panel{display:grid;grid-template-columns: .85fr 1fr;gap:11%;padding:60px 12% 90px;align-items:start}.portrait img{width:100%;max-height:740px;object-fit:cover;object-position:50% 35%;display:block}.biography h2{font-size:clamp(32px,3vw,62px);font-weight:200;margin:12px 0 25px}.biography p{font-size:17px;line-height:1.85;color:#d2cbe2}.biography .eyebrow{font-size:12px;letter-spacing:.12em;color:var(--muted);margin:0}.biography dl{font-size:14px;line-height:1.8;margin:30px 0;display:grid;grid-template-columns:80px 1fr;gap:15px}.biography dt{color:var(--muted)}.biography dd{margin:0}.email{font-size:clamp(16px,1.3vw,24px);overflow-wrap:anywhere}.contact-links{display:flex;gap:25px;flex-wrap:wrap;margin-top:28px}.contact-links a{border-bottom:1px solid #ffffff55;padding-bottom:8px;font-size:14px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:25px 3.5%;color:var(--muted);font-size:12px}
.lightbox{border:0;background:#080411f5;color:var(--ink);width:100vw;height:100dvh;max-width:none;max-height:none;padding:60px 70px 80px;overflow:hidden}.lightbox::backdrop{background:#080411ed}.lightbox figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.lightbox figure img{max-width:100%;max-height:calc(100% - 50px);object-fit:contain}.lightbox figcaption{font-size:14px;text-align:center;color:var(--muted)}.lightbox button{position:absolute;background:transparent;font-size:42px;width:48px;height:48px;line-height:1}.lightbox .close{right:20px;top:15px}.lightbox .previous{left:10px;top:47%}.lightbox .next{right:10px;top:47%}.lightbox .original{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:13px}.modal-open{overflow:hidden}@keyframes appear{from{opacity:.4}to{opacity:1}}
@media(min-width:1800px){.panel{padding-top:60px}.animation .screen{width:66%}.art-grid{gap:42px 32px}.contact-panel{padding-top:65px}}
@media(max-width:1000px){.wordmark{font-size:7vw;letter-spacing:.2em}.screen{width:85%}.clip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fan-layout{gap:24px}.contact-panel{padding:40px 6%;gap:6%;grid-template-columns:.8fr 1fr}.biography p{font-size:15px}.biography dl{display:block}.biography dt{margin-top:12px}.art-grid{gap:22px}}
@media(max-width:640px){.masthead{height:165px}.wordmark{font-size:9vw;letter-spacing:.08em;padding-left:.08em}.language{top:14px;right:18px;font-size:12px}.category-nav [role=tablist]{grid-template-columns:repeat(5,minmax(0,1fr))}.category-nav a{font-family:"Segoe UI",sans-serif;font-size:clamp(10px,2.6vw,16px);letter-spacing:0;min-height:52px}.panel{padding:28px 5% 45px}.screen{width:100%}.screen figcaption{font-size:12px;gap:10px}.clip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 15px}.clip{font-size:13px}.section-heading{margin-top:32px}.section-heading h3{font-size:20px}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.image-wrap{aspect-ratio:1.25}.filters{gap:3px;margin:-5px 0 24px}.filters button{font-size:12px;padding:8px}.caption{font-size:12px}.fan-layout{display:block}.fan-layout .screen{margin:0 0 25px}.fan-grid{gap:20px 14px}.fan-grid .image-wrap{aspect-ratio:1.4}.project-note h3{font-size:23px}.contact-panel{display:flex;flex-direction:column;gap:32px}.portrait{width:70%;margin:auto}.portrait img{max-height:400px}.biography h2{font-size:38px}.biography dl{display:grid;grid-template-columns:70px 1fr}.biography dt{margin:0}.lightbox{padding:65px 42px 70px}.lightbox .previous{left:0}.lightbox .next{right:0}footer{padding:22px 5%}}
.language{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px}.screen figcaption .playing-title{overflow-wrap:anywhere}.art-card:hover .caption{color:var(--accent)}
/* Keep document scrolling available while removing browser scrollbar chrome. */
html,body{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{font-family:'Quicksand','Noto Sans SC','Microsoft YaHei',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
.wordmark{font-family:'Shuwen Draft Wordmark','Gruppo',sans-serif;font-weight:400;font-synthesis:none;font-size:clamp(48px,5.55vw,120px);letter-spacing:.5em;padding-left:.5em}
.category-nav a{font-family:'Shuwen Draft Nav','Noto Sans SC',sans-serif;font-weight:400;font-synthesis:none;font-size:clamp(18px,2.8vw,60px);letter-spacing:.07em}
html[lang=zh-CN] .category-nav a{font-weight:300;font-size:clamp(18px,2.15vw,46px);letter-spacing:.13em}
.section-heading h3,.project-note h3,.biography h2{font-family:'Libre Franklin','Noto Sans SC',sans-serif;font-weight:300;letter-spacing:.035em}
.fan-layout{align-items:stretch}.fan-gallery{position:relative;min-height:0;margin-top:30px}
.fan-grid{position:absolute;inset:0;overflow-y:auto;overscroll-behavior-y:contain;align-content:start;padding:4px 10px 8px 4px;scrollbar-width:thin;scrollbar-color:#8a75ac66 transparent;scroll-padding:5px;-webkit-overflow-scrolling:touch}
.fan-grid::-webkit-scrollbar{width:4px}.fan-grid::-webkit-scrollbar-thumb{background:#8a75ac66;border-radius:3px}.fan-grid::-webkit-scrollbar-track{background:transparent}
.fan-grid:focus-visible{outline:1px solid #ffcf0088;outline-offset:5px}.fan-scroll-hint{text-align:right;color:var(--muted);font-size:12px;margin:10px 0 0}
@media(max-width:1000px){.wordmark{font-size:6.4vw;letter-spacing:.32em;padding-left:.32em}}
@media(max-width:640px){.wordmark{font-size:9vw;letter-spacing:.12em;padding-left:.12em}.category-nav a{font-size:clamp(12px,3.4vw,20px);letter-spacing:.02em}html[lang=zh-CN] .category-nav a{font-size:clamp(12px,3.35vw,19px);letter-spacing:.04em}.fan-gallery{height:clamp(280px,57dvh,520px);margin-top:0}.fan-scroll-hint{text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
