/* v0.5.2 — Swei Spring Sugar test
   Traditional-Chinese Ming/Song-style webfont, with the Sugar variant thickening horizontal strokes.
   Source: Max32002 / Swei Spring (SIL Open Font License 1.1)
*/
@font-face{font-family:"Swei Spring Sugar TC";src:url("https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Swei Spring Sugar TC";src:url("https://cdn.jsdelivr.net/gh/max32002/swei-spring@1.068/WebFont/CJK%20TC/SweiSpringSugarCJKtc-Bold.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Arino Serif";src:url("fonts/NotoSerifTC-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SoukouMincho";src:url("fonts/SoukouMincho.woff2") format("woff2"),url("https://db.onlinewebfonts.com/t/6e4236f20c062936ed9ec844820f7c45.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arino Serif";src:url("fonts/NotoSerifTC-Bold.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Arino Display";src:url("fonts/NotoSansDisplay-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
 :root{--yellow:#FFDC57;--blue:#102ECA;--paper:#FFFDF5;--ink:#111;--white:#fff;--font-serif:"Arino Serif", "Noto Serif TC", "Noto Serif CJK TC", serif;--font-soukou:"SoukouMincho", "Arino Serif", "Noto Serif TC", serif;--font-display:"Arino Display", "Noto Sans Display", "Helvetica Neue", Arial, sans-serif;--font-ui:Inter,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{position:relative;overflow-x:hidden;background:var(--paper)}
.site-header{position:fixed;z-index:10;top:0;left:0;right:0;height:82px;padding:17px 4vw;display:flex;align-items:flex-start;justify-content:space-between;mix-blend-mode:multiply}.brand{font-family:var(--font-display);font-size:13px;font-weight:900;line-height:.9;letter-spacing:.08em}.brand span{margin-left:5px}.brand small{display:block;margin-top:6px;font-family:var(--font-ui);font-size:7px;letter-spacing:.13em;font-weight:800}.header-right{display:flex;align-items:center;gap:30px}.site-header nav{display:flex;gap:28px;font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.12em}.site-header nav a:hover{border-bottom:3px solid var(--yellow)}
.language-picker{position:relative}.language-button{border:0;background:transparent;padding:8px 0 8px 12px;font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.12em;cursor:pointer;display:flex;gap:8px}.language-menu{position:absolute;right:0;top:36px;width:130px;background:#fff;border:1px solid var(--ink);padding:7px;box-shadow:6px 6px 0 var(--blue);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}.language-picker.open .language-menu{opacity:1;visibility:visible;transform:translateY(0)}.language-menu button{width:100%;border:0;background:transparent;padding:10px 8px;text-align:left;cursor:pointer;font-family:var(--font-ui);font-size:11px;font-weight:800;display:flex;gap:8px}.language-menu button:hover{background:var(--yellow)}.language-menu i{width:5px;height:5px;border-radius:50%;background:transparent}.language-menu button.active i{background:var(--blue)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,rgba(16,46,202,.18) 1px,transparent 1.3px);background-size:14px 14px;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.8) 70%,transparent 100%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:radial-gradient(circle at 20% 80%,rgba(255,220,87,.22),transparent 34%),radial-gradient(circle at 82% 72%,rgba(16,46,202,.10),transparent 32%)}
.hero{background:radial-gradient(circle at 82% 34%,rgba(255,220,87,.16),transparent 24%),radial-gradient(circle at 18% 78%,rgba(16,46,202,.055),transparent 30%);min-height:100vh;padding:150px 8vw 70px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.hero>*{position:relative;z-index:1}.meta,.index{font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.18em}.hero-content{margin-top:4vh}.eyebrow{font-size:clamp(18px,2vw,28px);font-weight:800;margin:0}.name-stage{position:relative;height:clamp(180px,22vw,310px);margin-top:8px;isolation:isolate}.name-cn,.name-en{position:absolute;inset:0;display:flex;align-items:center;will-change:transform}.name-cn{font-family:var(--font-serif);z-index:2;font-size:clamp(60px,11vw,155px);line-height:.8;letter-spacing:-.08em;font-weight:900}.name-char{display:block;will-change:transform;transition:transform 80ms linear}.name-en{font-family:var(--font-display);z-index:1;justify-content:center;gap:clamp(24px,7vw,110px);font-size:clamp(24px,4vw,60px);font-weight:900;letter-spacing:.04em;opacity:.13;color:var(--blue);will-change:transform}.name-en span{will-change:transform;transition:transform 80ms linear}.role{margin-top:36px;font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.08em}
.hero-mark{position:absolute;right:10vw;top:39%;width:clamp(100px,12vw,170px);height:clamp(100px,12vw,170px);background:var(--yellow);display:flex;align-items:flex-end;justify-content:flex-end;transform:rotate(7deg);z-index:3;overflow:hidden}.hero-mark b{position:relative;z-index:2;margin:0 12px 10px;font-size:12px}.hero-mark i{position:absolute;width:22px;height:22px;border:3px solid var(--blue);border-radius:50%;right:-10px;bottom:-10px}.photo-placeholder{position:absolute;inset:0 0 25px 0;display:grid;place-items:center;border:1px dashed #1115;font-size:8px;font-weight:900;letter-spacing:.16em;color:#1117}.scroll{position:absolute;left:8vw;bottom:32px;font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.15em}
.section{padding:130px 8vw;position:relative}.about{background:var(--blue);color:#fff;min-height:90vh;overflow:hidden}.about .index{color:var(--yellow)}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;max-width:1280px;margin:90px auto 0}.section h2{font-family:var(--font-display);font-size:clamp(58px,9vw,125px);line-height:.84;letter-spacing:-.065em;margin:0;font-weight:900}.section h2 em{color:var(--yellow);font-style:normal}.copy{padding-top:12px;max-width:480px;font-size:19px}.muted{opacity:.72;font-size:14px;margin-top:28px}.text-link{display:inline-block;margin-top:30px;font-size:11px;font-weight:900;letter-spacing:.13em;border-bottom:2px solid var(--yellow);padding-bottom:8px}.blue-mark{position:absolute;width:180px;height:180px;right:7vw;bottom:-80px;background:var(--yellow);color:var(--blue);display:grid;place-items:center;font-size:80px;font-weight:900;transform:rotate(-12deg)}
.works{background:var(--paper)}.works-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;max-width:1280px;margin:80px auto 55px}.works-heading p{max-width:250px;font-size:13px}.work-card{max-width:1280px;margin:auto;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);display:grid;grid-template-columns:80px 1fr 80px;gap:30px;padding:42px 0;align-items:center}.number,.tag,.group-label,.email-row>span{font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.15em}.tag{color:var(--blue);margin:0 0 15px}.work-card h3{font-family:var(--font-display);font-size:clamp(48px,8vw,105px);margin:0;line-height:.85;letter-spacing:-.06em}.cn-title{font-size:18px;font-weight:800;margin:12px 0}.work-card p{font-size:13px}.arrow{justify-self:end;width:60px;height:60px;display:grid;place-items:center;background:var(--yellow);font-size:25px}
.commission-work{background:var(--paper);position:relative;overflow:hidden}.commission-work:after{content:"";position:absolute;right:-8vw;bottom:-10vw;width:42vw;height:42vw;background-image:radial-gradient(circle,rgba(16,46,202,.18) 1px,transparent 1.3px);background-size:14px 14px;opacity:.22;pointer-events:none}.work-intro{max-width:1280px;margin:75px auto 55px;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}.work-intro h2{font-family:var(--font-display);font-size:clamp(60px,9vw,125px);line-height:.82;letter-spacing:-.07em;margin:0}.work-intro h2 em{font-family:var(--font-serif);font-style:normal;font-weight:700}.work-copy{max-width:440px;font-size:14px;line-height:1.9}.commission-grid{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid #1115}.commission-card{position:relative;min-height:245px;padding:30px 28px;border-right:1px solid #1115;display:flex;flex-direction:column;transition:background .2s,transform .2s}.commission-card:last-child{border-right:0}.commission-card:hover{background:var(--yellow);transform:translateY(-5px)}.commission-no{font-family:var(--font-ui);font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--blue);margin-bottom:auto}.commission-card strong{font-family:var(--font-ui);font-size:12px;letter-spacing:.12em}.commission-card p{font-size:13px;line-height:1.7;max-width:270px}.commission-card b{font-family:var(--font-ui);font-size:10px;letter-spacing:.12em}.notes{background:#fff}.notes-grid{margin-top:80px}.note-list{border-top:2px solid var(--ink)}.note-list a{display:grid;grid-template-columns:100px 1fr 30px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid #1113;font-size:13px}.note-list small{font-size:10px;font-weight:800;opacity:.55}.note-list b{color:var(--blue)}
.links{background:var(--yellow)}.links .index{color:var(--blue)}.links h2{margin:70px 0}.social-groups{max-width:1280px;margin:auto}.social-group{margin-bottom:55px}.group-label{color:var(--blue);margin-bottom:16px}.social-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:1px solid #1115}.social{min-height:105px;padding:20px 14px;border-right:1px solid #1115;display:grid;grid-template-columns:42px 1fr 18px;gap:10px;align-items:center;transition:transform .2s,background .2s}.social:last-child{border-right:0}.social:hover{background:var(--paper);transform:translateY(-5px)}.social-logo{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);font-size:16px;font-weight:900}.social strong{font-family:var(--font-ui);font-size:13px}.social b{justify-self:end}.xmark{font-size:19px}.email-row{margin-top:25px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:22px 0;display:grid;grid-template-columns:150px 1fr 25px;align-items:center}.email-row strong{font-size:clamp(18px,3vw,32px);letter-spacing:-.02em}
.footer{background:var(--blue);color:#fff;min-height:330px;padding:70px 8vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:50px}.footer strong{font-family:var(--font-display);font-size:13px;letter-spacing:.1em}.footer p{opacity:.7;font-size:12px}.footer-studio{justify-self:center;min-width:220px}.studio-logo-placeholder{width:88px;height:58px;border:1px dashed rgba(255,255,255,.5);display:grid;place-items:center;font-family:var(--font-ui);font-size:8px;letter-spacing:.18em;opacity:.75;margin-bottom:14px}.studio-name{font-family:var(--font-soukou);font-size:28px;line-height:1;letter-spacing:.03em}.studio-name span{font-family:var(--font-display);font-size:9px;letter-spacing:.12em;margin-left:7px;color:var(--yellow)}.footer-studio p{margin:13px 0 0}.footer small{justify-self:end;opacity:.65}
@media(max-width:760px){.site-header{height:64px;padding:15px 7vw}.site-header nav{display:none}.header-right{margin-left:auto}.hero{padding:125px 7vw 60px}.name-stage{height:clamp(150px,38vw,230px)}.name-cn{font-size:clamp(50px,15vw,95px)}.name-en{font-size:clamp(18px,5vw,32px);gap:12vw}.hero-mark{right:9vw;top:24%;width:90px;height:90px}.section{padding:90px 7vw}.grid,.notes-grid{grid-template-columns:1fr;gap:45px;margin-top:60px}.works-heading{display:block;margin:60px 0 40px}.work-card{grid-template-columns:35px 1fr 45px;gap:12px;padding:32px 0}.work-card h3{font-family:var(--font-display);font-size:clamp(40px,13vw,75px)}.social-grid{grid-template-columns:1fr 1fr}.social:nth-child(2){border-right:0}.social:nth-child(-n+2){border-bottom:1px solid #1115}.email-row{grid-template-columns:85px 1fr 20px;gap:10px}.footer{grid-template-columns:1fr;gap:42px;min-height:470px}.footer-studio,.footer small{justify-self:start}.studio-logo-placeholder{width:82px;height:54px}}
@media(max-width:760px){.work-intro{grid-template-columns:1fr;gap:35px;margin:60px 0 40px}.work-intro h2{font-size:clamp(58px,18vw,90px)}.commission-grid{grid-template-columns:1fr}.commission-card{min-height:205px;border-right:0;border-bottom:1px solid #1115}.commission-card:last-child{border-bottom:0}.hero:before{opacity:.25;background-size:12px 12px}.hero:after{height:40%}}
@media(prefers-reduced-motion:reduce){.name-char,.name-en span,.social{transition:none!important}}

/* v0.3.1 — kinetic identity layer */
.work-title-link{position:relative;display:inline-block;isolation:isolate;overflow:hidden;cursor:pointer}
.work-title-link h3{position:relative;z-index:2;transition:color .05s linear}
.work-title-link .blue-wipe{position:absolute;z-index:1;left:0;top:8%;bottom:5%;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.77,0,.175,1)}
.work-title-link:hover .blue-wipe,.work-title-link:focus-visible .blue-wipe{transform:scaleX(1)}
.work-title-link:hover h3,.work-title-link:focus-visible h3{color:#fff}
.work-title-link:active h3{transform:translateY(1px)}
.email-row{padding:16px 0}
.email-row strong{font-size:13px;letter-spacing:.02em}
.email-row a{display:inline-block}
.email-row a:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media(max-width:760px){.email-row{padding:15px 0}.email-row strong{font-size:12px}}

/* v0.4 preview — manic ABOUT title stretch */
.about-title{overflow:visible;font-family:var(--font-display)}
.about-line{display:inline-block;position:relative;transform-origin:left center;will-change:transform,letter-spacing}
.about-line span,.about-line em{display:inline-block;will-change:transform;transform-origin:left center}

/* v0.5.3 — Soukou Mincho display experiment */
.name-cn,.brand span,.cn-title,.blue-mark,.footer-mark{font-family:var(--font-soukou)}
.name-cn{font-weight:400;letter-spacing:-.055em}
.cn-title{font-weight:400}
.brand span{font-weight:400}
.blue-mark{font-weight:400}
.footer-mark{font-weight:400}
@media(max-width:760px){.name-cn{letter-spacing:-.04em}}

/* v0.5.6 — visual stability pass */
:root{--font-soukou:"SoukouMincho","Arino Serif","Noto Serif TC",serif}
.name-cn{font-family:var(--font-soukou);font-weight:400;letter-spacing:-.055em;color:var(--ink)}
.name-cn .name-char{font-family:var(--font-soukou)}
.brand span,.cn-title,.blue-mark,.studio-name{font-family:var(--font-soukou)}
/* Keep the yellow 01 card in the same visual zone as the established mobile composition. */
.hero-mark{top:29%;right:10vw}
@media(max-width:760px){.hero-mark{top:34%;right:8vw;width:90px;height:90px}.name-cn{font-family:var(--font-soukou);letter-spacing:-.04em}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,rgba(16,46,202,.18) 1px,transparent 1.3px);background-size:14px 14px;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.8) 70%,transparent 100%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:radial-gradient(circle at 20% 80%,rgba(255,220,87,.22),transparent 34%),radial-gradient(circle at 82% 72%,rgba(16,46,202,.10),transparent 32%)}
.hero{background:radial-gradient(circle at 82% 31%,rgba(255,220,87,.105),transparent 24%),radial-gradient(circle at 16% 76%,rgba(16,46,202,.028),transparent 29%)}}


/* v0.5.8 — visual merge: keep the 0.5.7 hero, card, gradient and manic stretch; restore 0.5.6 link/Chinese treatment. */
a,a:hover,a:focus,a:visited{text-decoration:none;color:inherit}
.site-header .brand,.site-header .brand span{font-family:var(--font-display);font-weight:900;color:var(--ink)}
.site-header .brand small{color:var(--ink)}
.site-header nav a:hover{border-bottom:0}
.text-link{border-bottom:0;padding-bottom:0}
.email-row a:hover strong{text-decoration:none}
.work-title-link,.commission-card,.note-list a,.social,.scroll{color:inherit;text-decoration:none}
.social,.social strong,.social b{color:var(--ink)}
/* Chinese copy should not be forced into the display sans. */
.hero-cn,.hero-subtitle,.greeting,.cn-title,.work-copy,.commission-card p,.note-list strong{font-family:var(--font-serif)}
.name-en{font-family:var(--font-display)}
@media(max-width:760px){.site-header .brand,.site-header .brand span{font-family:var(--font-display);font-weight:900;color:var(--ink)}.hero-mark{top:24%;right:9vw;width:90px;height:90px}}


/* v0.5.9 — visual polish from screenshot review */
.site-header{
  background:var(--paper);
  mix-blend-mode:normal;
  border-bottom:1px solid rgba(17,17,17,.08);
  box-shadow:0 4px 18px rgba(17,17,17,.035);
}
.site-header .brand,
.site-header .brand span,
.site-header .brand small{color:var(--ink)}

/* The handwritten mark will occupy the old English-name area later. */
.name-stage .name-en{display:none!important}

/* Midnight/cobalt blue accents for the greeting line. */
.hero-cn,.greeting{color:var(--blue)}

/* Keep every link clickable without using underlines as the visual language. */
a,a:hover,a:focus,a:visited{text-decoration:none!important}

/* Subtle white lift from the bottom of solid color fields. */
.about{
  background:linear-gradient(to top,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 24%,rgba(255,255,255,0) 58%),var(--blue);
}
.links{
  background:linear-gradient(to top,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 25%,rgba(255,255,255,0) 62%),var(--yellow);
}
.footer{
  background:linear-gradient(to top,rgba(255,255,255,.085) 0%,rgba(255,255,255,.025) 28%,rgba(255,255,255,0) 62%),var(--blue);
}
.hero-mark{
  background:linear-gradient(to top,rgba(255,255,255,.13) 0%,rgba(255,255,255,.035) 35%,rgba(255,255,255,0) 68%),var(--yellow);
}
.blue-mark{
  background:linear-gradient(to top,rgba(255,255,255,.13) 0%,rgba(255,255,255,.035) 35%,rgba(255,255,255,0) 68%),var(--yellow);
}
@media(max-width:760px){
  .site-header{background:var(--paper);}
}