.brand-portrait{width:40px;height:40px;border-radius:12px;overflow:hidden;background:white;border:1px solid #ddd;transform:rotate(-5deg);transition:transform .3s}.brand-portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.8);object-position:center 60%}header a:hover .brand-portrait{transform:rotate(7deg)}
.desk-sticker{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;color:#18302d;padding:18px;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(2px 9px 3px #193a3b18)}.sticker-left{top:70px;left:6%;background:#fff5ac;transform:rotate(-10deg);border-radius:48% 42% 46% 39%;width:150px;height:145px}.sticker-right{top:70px;right:6%;background:#fce4ec;transform:rotate(9deg);border-radius:8px 28px 8px 28px;width:145px;min-height:145px}.desk-sticker:hover{transform:rotate(0) translateY(-8px) scale(1.06)}.sticker-doodle{font-size:45px;line-height:1}.desk-sticker .font-hand{font-size:23px;line-height:1.05}.desk-sticker small{font:9px monospace;margin-top:9px}.hero-chip{cursor:pointer!important;transition:transform .2s,box-shadow .2s!important}.hero-chip:hover{transform:translateY(-5px) rotate(-2deg)!important;box-shadow:3px 5px 0 #182c3c}.hero-chip:active{transform:translateY(0)!important}
#highlights article{cursor:pointer;transform-style:preserve-3d;will-change:transform;transition:transform .2s,box-shadow .2s} .detail-trigger{margin-top:20px;width:100%;padding:12px 8px;background:#172121;color:white;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.02em}.detail-trigger:hover{background:#075985}.project-dialog{padding:0;border:1px solid #182c3c;border-radius:22px;background:#fafaf7;color:#172121;width:min(940px,94vw);max-height:88vh;box-shadow:0 25px 100px #0004}.project-dialog::backdrop{background:#132b3566;backdrop-filter:blur(12px)}.dialog-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 25px;background:#fafaf7ed;border-bottom:1px solid #ddd;backdrop-filter:blur(12px);font:11px monospace;letter-spacing:.1em}.dialog-close{border:1px solid #ccc;border-radius:50%;width:36px;height:36px;font-size:23px;background:white}.detail-body{padding:30px clamp(20px,5vw,55px) 45px}.detail-body h2{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.04em;margin:12px 0 20px}.detail-body p{font-size:15px;line-height:1.9;color:#52605d;max-width:720px;margin:14px 0}.detail-body h3{font-weight:750;font-size:18px;margin-top:28px}.detail-body figure{margin:24px 0}.detail-body figure img{width:100%;max-height:540px;object-fit:contain;background:#e9ece8;border-radius:12px;cursor:zoom-in}.detail-body figure figcaption{font:11px monospace;color:#69766f;margin-top:8px}.detail-body a{display:inline-block;margin-top:18px;border-bottom:1px solid}.detail-body .qr{width:min(330px,100%);margin:auto}.detail-body .qr img{background:white}.flow-visual{padding:35px 20px;border:1px solid #bdd4ce;border-radius:14px;background:linear-gradient(130deg,#e3f8ef,#e5edff);display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.flow-visual div{background:#ffffffe0;border:1px solid #fff;border-radius:10px;padding:18px 10px;font:13px monospace}.flow-visual b{display:block;font-size:28px;color:#45827e;margin-bottom:15px}.flow-visual small{display:block;line-height:1.6;margin-top:10px;color:#556}.cursor-spark{position:fixed;pointer-events:none;z-index:100;font-size:18px;animation:spark-away .8s ease-out forwards;color:#fff8b4;text-shadow:0 1px 3px #17324550}@keyframes spark-away{to{transform:translate(var(--sx),-45px) rotate(100deg) scale(.1);opacity:0}}.wechat-link{font:inherit;color:inherit;cursor:pointer;background:none;border:none;text-align:left}.wechat-link:hover{text-decoration:underline}.image-zoom img{max-height:80vh;max-width:90vw;object-fit:contain}.image-zoom{padding:12px;background:#fff;border:0;border-radius:12px}.image-zoom::backdrop{background:#10191ee0}body:has(dialog[open]){overflow:hidden}
@media(max-width:640px){.sticker-left{top:60px;left:15px;width:84px;height:88px;padding:8px}.sticker-right{top:60px;right:15px;width:85px;min-height:88px;padding:8px}.sticker-doodle{font-size:27px}.desk-sticker .font-hand{font-size:16px}.desk-sticker small{display:none}.flow-visual{grid-template-columns:repeat(2,1fr)}#welcome{padding-top:190px}.detail-body{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.cursor-spark{display:none}#highlights article{transform:none!important}.desk-sticker{transition:none}}
/* A quieter, looser little desktop. */
.brand-signature{font-family:'Caveat',cursive;font-size:37px;font-weight:600;letter-spacing:-4px;display:inline-flex;align-items:center;color:#334642;line-height:1}.brand-signature>span{font-family:serif;letter-spacing:0;font-size:14px;margin:0 9px 12px 7px;color:#6b8371}header{background:#fafaf6c9!important;border-bottom-color:transparent!important}header a>span.font-black{font-weight:500!important;font-size:12px!important;letter-spacing:.06em}header a>span.font-black>span{display:none}
#welcome{min-height:94vh;padding-top:155px;background:linear-gradient(175deg,#a5d7e7 0%,#c9e6e3 40%,#f8edc5 80%,#f8fafc 100%)!important}#welcome h1{font-size:clamp(54px,8vw,108px);font-weight:600;letter-spacing:-.07em}#welcome h1:after{content:'.';color:#547568}#welcome .border-2.bg-white\/85{background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;padding:8px 28px!important;transform:rotate(-2deg)}#welcome .border-2.bg-white\/85 .uppercase{font-family:'Caveat',cursive;text-transform:none;font-size:18px;letter-spacing:.05em}#welcome .border-2.bg-white\/85~*{box-shadow:none}#welcome .z-30.w-4,#welcome .z-30.w-3{display:none}#welcome p.font-extrabold{font-size:clamp(20px,2.8vw,31px);font-weight:500!important;line-height:1.45;letter-spacing:-.035em}#welcome .hero-chip{background:#ffffff75!important;border:1px solid #ffffffa0!important;box-shadow:none!important;font-weight:500!important;border-radius:30px!important;padding:8px 15px!important;font-size:11px!important}#welcome .hero-chip:nth-child(1){transform:rotate(-4deg)}#welcome .hero-chip:nth-child(2){transform:translateY(7px) rotate(2deg)}#welcome .hero-chip:nth-child(3){transform:rotate(-2deg)}#welcome .hero-chip:nth-child(4){transform:translateY(9px) rotate(3deg)}.sticker-left{left:9%;top:85px;background:none;filter:none;transform:rotate(-12deg)}.sticker-right{right:9%;top:125px;background:none;filter:none;transform:rotate(9deg)}.sticker-left .sticker-doodle{font-size:60px;color:#d39948}.desk-sticker small{font-family:'Caveat';font-size:15px;letter-spacing:.04em;color:#58756c}.music-record{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(#303c39 0 2px,#48514a 3px 4px);box-shadow:2px 5px 10px #304b3520;margin-bottom:10px;transition:transform .7s}.music-record i{width:18px;height:18px;border:6px solid #d8c49d;background:#f7f0d9;border-radius:50%}.sticker-right:hover .music-record{transform:rotate(150deg)}
.dock-glass{background:#ffffff50!important;border-color:#ffffff80!important;box-shadow:0 8px 25px #3c584618!important;padding:10px 15px!important;border-radius:50px!important;overflow:visible!important}.dock-glass .group>a,.dock-glass .group>div.cursor-pointer{border:0!important;background:#fafbf7d9!important;color:#42544b!important;border-radius:50%!important;box-shadow:none!important;width:43px!important;height:43px!important;transition:transform .25s,background .25s!important}.dock-glass .group:hover>a,.dock-glass .group:hover>div.cursor-pointer{background:white!important;transform:translateY(-7px) rotate(-7deg)!important}.dock-glass .group>.w-1{display:none}.dock-glass .group .absolute{top:-33px!important;background:#42544b!important;font-family:'Caveat';font-size:16px}.dock-glass .group svg{width:19px;height:19px}.tap-feedback{animation:tap-press .35s ease}@keyframes tap-press{50%{transform:scale(.88) rotate(-5deg)}}
.section-handnote{display:block;font-family:'Caveat',cursive;font-size:27px;color:#64776b;margin:0 0 14px;transform:rotate(-3deg)}#memos h3{font-family:'Caveat',cursive!important;font-size:45px!important;font-weight:600!important}#experience article{cursor:pointer;border:1px solid #aab5ab!important;box-shadow:3px 5px 0 #d9dfd4!important;transition:transform .3s,box-shadow .3s!important}#experience article:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:5px 10px 0 #ccd7cb!important}.work-open{display:block;margin-top:17px;font-family:'Caveat',cursive;font-size:23px;color:#627c6e;border:none;background:none}.project-dialog{width:min(1060px,94vw);background:#f7f6ef;border:0;border-radius:15px;max-height:90vh}.dialog-top{background:#f7f6eff5;border-color:#dddfd1;padding:16px 30px}.dialog-top>span{font-family:'Caveat';font-size:20px;letter-spacing:0;color:#758171}.dialog-close{border:0;background:#ecece1;color:#5b685c}.detail-body{padding:35px clamp(24px,6vw,76px) 60px}.detail-body>small{font-size:10px;letter-spacing:.17em;color:#8a927f}.detail-body h2{font-size:clamp(35px,5vw,57px);font-weight:500;letter-spacing:-.055em;max-width:750px;margin-bottom:25px}.detail-body h3{font-family:'Caveat','Noto Sans SC',sans-serif;font-size:24px;color:#536d59;font-weight:500}.detail-body p{font-size:15px;line-height:1.9;color:#646d61}.detail-body figure{background:white;padding:12px 12px 5px;border:1px solid #e6e5da;border-radius:3px;margin:28px 0}.detail-body figure img{cursor:default;max-height:440px;object-fit:contain;border-radius:0;background:#f2f1ea}.detail-body figure figcaption{font-family:'Caveat';font-size:18px;color:#7b826f;padding:8px 4px}.case-facts{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0;border-top:1px solid #d9ddcf;border-bottom:1px solid #d9ddcf;margin:25px 0}.case-facts span{font-size:12px;color:#61715f;padding:7px 13px;border:1px solid #d8dfcd;border-radius:30px}.detail-body .work-note{padding:20px 25px;background:#ecefe2;border-radius:5px;margin-top:28px}.detail-body .work-note h3{margin-top:0}.detail-trigger{border-radius:0;background:none;color:#61735d;border-top:1px solid #e0e5da;font-family:'Caveat';font-size:22px;font-weight:500;text-align:left}.detail-trigger:hover{background:#eef1e9;color:#3b6049}.flow-visual{background:#e9eddf;border:0;border-radius:3px}.flow-visual div{background:#f6f7ef;border:none;border-radius:0}.flow-visual b{color:#7a8a67;font-weight:400}.detail-body .qr{padding:12px;max-width:290px}#highlights .ticket-cutout{clip-path:none;border-radius:3px}.cursor-spark{color:#fdf9e8;font-size:12px}
@media(max-width:640px){#welcome{padding-top:190px;min-height:850px}.sticker-left{top:63px;left:5%}.sticker-right{top:68px;right:5%}.music-record{width:36px;height:36px}.music-record i{width:14px;height:14px;border-width:4px}.desk-sticker small{font-size:12px;display:block}.section-handnote{font-size:22px}.detail-body h2{font-size:35px}.detail-body{padding:26px 23px 40px}.dialog-top{padding:12px 20px}.brand-signature{font-size:31px}}

/* Language credentials: soft, distinct accents. */
.credential-tag{display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 5px #344b3210;font-weight:600;transition:transform .2s}.credential-tag:hover{transform:translateY(-2px)}.credential-tem{background:#e6efe0;color:#49633d;border-color:#c7d8bc}.credential-ielts{background:#f8e9ce;color:#866124;border-color:#e9d2a6}.credential-catti{background:#eee6f4;color:#75568c;border-color:#dbcae8}

/* Continuous canvas; restore the original bold hero typography. */
body{background:linear-gradient(180deg,#65b7dd 0%,#a9e0e8 9%,#edf3fc 19%,#f2effb 29%,#fff 43%,#f4f7fc 58%,#f3f0fb 74%,#fafbff 88%,#fff 100%)!important}
main,#welcome,footer{background:transparent!important}
#welcome{padding-top:115px;min-height:92vh}
#welcome h1{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif!important;font-size:clamp(52px,7.4vw,96px);font-weight:900!important;letter-spacing:-.055em;line-height:1}
#welcome h1:after{content:none}
#welcome .border-2.bg-white\/85{background:#ffffffe0!important;border:2px solid #263331!important;box-shadow:5px 6px 0 #263331!important;padding:28px 48px!important;transform:rotate(-1deg)}
#welcome .border-2.bg-white\/85 .uppercase{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
#welcome .z-30.w-4{display:block;width:9px;height:9px;background:#a5dfeb}
#welcome p.font-extrabold{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif;font-size:clamp(21px,2.8vw,36px);font-weight:800!important;line-height:1.35;letter-spacing:-.035em}
#welcome .hero-chip{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif;font-weight:600!important}
#highlights{background:transparent!important;border:0!important;box-shadow:none!important}
#about>div{background:#fffcec85!important;border-color:#829b8c70!important;box-shadow:0 14px 45px #5063470c!important}
#experience article{background:#ffffffe0!important}
#memoBoardCanvas{background:#faf6ec75!important;border:1px solid #b6bca77a!important;box-shadow:0 18px 50px #5765480c!important}
#ai-practice>div{border-color:#6c8e89!important;box-shadow:0 16px 35px #27474919!important}
.corner-note{position:absolute;left:8%;bottom:105px;pointer-events:auto;color:#45635d;transform:rotate(-9deg);text-decoration:none;transition:transform .35s}.corner-note .font-hand{display:block;font-size:26px;line-height:1.1;font-weight:500}.corner-note svg{margin:8px 0 0 33px;transition:transform .35s}.corner-note:hover{transform:rotate(-3deg) translateY(-4px)}.corner-note:hover svg{transform:translate(7px,3px)}
@media(max-width:640px){#welcome{padding-top:180px;min-height:870px}#welcome .border-2.bg-white\/85{padding:24px 20px!important}#welcome h1{font-size:clamp(45px,12vw,66px)}.corner-note{left:6%;bottom:105px}.corner-note .font-hand{font-size:20px}.corner-note svg{width:50px;height:30px}#welcome p.font-extrabold{font-size:22px}}

/* One primary type family; handwriting reserved for hero accents and footer. */
body{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif}
.font-hand,.section-handnote,.detail-body h3,.detail-body figure figcaption,.dialog-top>span,.detail-trigger,.work-open,#memos h3{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif!important}
#welcome .font-hand,footer .font-hand{font-family:'Caveat',cursive!important}
.work-open{font-size:12px!important;line-height:1.5;font-weight:500;letter-spacing:.01em;margin-top:16px;color:#527065;padding:5px 0;transition:color .2s}.work-open:hover{color:#173f31;text-decoration:underline;text-underline-offset:4px}
.detail-trigger{font-size:13px!important;font-weight:500;line-height:1.5}
.detail-body h3{font-size:17px;font-weight:650;letter-spacing:0;color:#334a40}
.detail-body .section-handnote{font-size:16px;line-height:1.7;transform:none;font-weight:400;color:#6c786c;margin-bottom:20px}
.dialog-top>span{font-size:11px;letter-spacing:.06em}
.detail-body figure figcaption{font-size:12px;line-height:1.6}
#memos h3{font-size:30px!important;font-weight:650!important;letter-spacing:-.035em}
#highlights .font-hand{font-size:30px;font-weight:650;letter-spacing:-.03em}
.font-mono{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif!important}
#ai-practice .font-mono{font-family:ui-monospace,monospace!important}
.comms-process{margin:30px 0 20px;border-top:1px solid #d9dfd2}
.comms-process section{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid #d9dfd2}
.comms-process section>span{font-size:12px;line-height:26px;color:#81947e;font-weight:600}
.comms-process h3{margin:0;font-size:17px}
.comms-process p{margin:8px 0 0;font-size:14px;line-height:1.8;max-width:680px}

/* Portrait framing and stable About heading placement. */
#about{position:relative;padding-top:80px}
#about>.section-handnote{position:static;display:block;margin:0 0 24px;transform:none}
#about>div>.absolute.-top-3\.5{top:-13px;left:28px;line-height:24px;background:#f7edbc;padding:1px 12px;z-index:2}
#about img[alt="Claire Chu 品牌营销与AI实践"]{object-position:50% 36%;object-fit:cover}
#welcome img[alt="Claire Chu Portrait"]{object-position:50% 36%;object-fit:cover}

.about-section-title{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#4e665a;margin:0 0 24px;padding:0 4px}
/* Handwriting is scoped to the personal message board. */
#memoBoardCanvas{overflow:visible!important;isolation:isolate}
#notesContainer{height:auto;min-height:400px;isolation:isolate;margin-top:15px}
#notesContainer .draggable-note{box-sizing:border-box;width:var(--note-width,240px)!important;max-width:calc(100% - 32px);padding:22px!important}
#notesContainer .draggable-note p,#notesContainer .draggable-note .font-hand{font-family:var(--message-font,'Caveat','KaiTi','STKaiti',serif)!important;font-size:19px!important;font-weight:500!important;line-height:1.65!important;overflow-wrap:anywhere}
#notesContainer .draggable-note>div:last-child .font-hand{font-size:16px!important}
#notesContainer .draggable-note>div:last-child{gap:10px;flex-wrap:wrap}
.message-controls{position:relative;z-index:31;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0;color:#556b5d;font:12px 'Plus Jakarta Sans','Noto Sans SC',sans-serif}
.message-controls select,.message-controls button{font:inherit;border:1px solid #c5cfbd;background:#fffaf0;border-radius:20px;padding:7px 12px;color:#425c49;cursor:pointer}.message-controls select:focus-visible,.message-controls button:focus-visible{outline:2px solid #758e6a;outline-offset:3px}
#memoBoardCanvas>div.relative.z-30{isolation:isolate;z-index:2}
.about-section-title{font-family:'Caveat',cursive!important;font-size:30px;font-weight:600;margin-bottom:30px}.bio-badge{position:absolute;top:-12px;left:28px;padding:3px 12px;background:#f4d976;border:1px solid #7b8067;font:600 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;line-height:18px}#about img[alt="南法蔚蓝海岸 埃兹"],#about img[alt="Claire Chu 阳光生活照"]{cursor:zoom-in}.life-lightbox{padding:0;border:0;background:#faf8f0;border-radius:12px;width:min(850px,92vw);max-height:90vh}.life-lightbox::backdrop{background:#16231fcc;backdrop-filter:blur(8px)}.life-lightbox header{position:static!important;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}.life-lightbox button{font-size:24px;width:36px;height:36px}.life-lightbox img{width:100%;max-height:76vh;object-fit:contain}.case-gallery{margin:25px 0}.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:8px;background:#ecefe5}.gallery-track figure{flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0!important;box-sizing:border-box}.gallery-track img{width:100%;height:380px;object-fit:contain}.gallery-controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}.gallery-controls button{border:1px solid #c9d0be;background:#f8f9f0;border-radius:25px;font-size:13px;padding:7px 14px}.gallery-controls span{font-size:12px;color:#65785e}@media(max-width:640px){.gallery-track img{height:280px}}@media(prefers-reduced-motion:reduce){.gallery-track{scroll-behavior:auto}}

#notesContainer .draggable-note p{font-size:var(--note-text-size,19px)!important;letter-spacing:var(--note-tracking,0)}

#experience article p,.detail-body p{text-align:justify;text-align-last:start;overflow-wrap:break-word;hyphens:auto}

#experience article:nth-of-type(2) p{display:block;text-align:justify!important;text-align-last:start!important;line-height:1.85;word-break:normal}.case-sources{font-size:12px!important;text-align:left!important}.case-sources a{margin-top:0;margin-left:6px}

#experience article:last-of-type p{text-align:justify!important;text-align-last:start!important;line-height:1.85}.interpreting-gallery .gallery-track img{height:450px;max-height:60vh;object-fit:contain}.interpreting-gallery .gallery-track figure{padding:12px;background:#fff}.interpreting-gallery .gallery-track{background:#e9ede4}.interpreting-gallery figcaption{padding:12px 5px}.gallery-controls button:focus-visible{outline:2px solid #657e5f;outline-offset:3px}@media(max-width:640px){.interpreting-gallery .gallery-track img{height:310px}}

.campaign-credit{font-size:10px!important;font-weight:500!important} .case-gallery{width:100%;grid-column:1/-1}.case-gallery .gallery-track{width:100%}.case-gallery .gallery-track figure{padding:0!important;border:0!important;width:100%;background:transparent}.case-gallery .gallery-track img{display:block;width:100%;height:clamp(300px,54vw,550px);max-height:none;object-fit:contain;background:#e9ede4}.gallery-controls{justify-content:flex-end}.gallery-controls span{margin-right:auto}

/* Hero density follows content rather than stretching an empty viewport. */
#welcome{min-height:0;min-height:min(860px,94svh);justify-content:center;gap:26px;padding-top:130px;padding-bottom:48px}
#welcome h1{font-size:clamp(56px,8.4vw,110px)}
#welcome p.font-extrabold{font-size:clamp(24px,3vw,39px);line-height:1.35}
#welcome>.relative.z-30{margin-top:14px;margin-bottom:0}
#welcome+.py-20{padding-top:55px}
@supports not (height:1svh){#welcome{min-height:740px}}
@media(min-width:1440px){#welcome{padding-top:140px;padding-bottom:50px;gap:24px}}
@media(max-width:767px){#welcome{min-height:0;padding-top:180px;padding-bottom:150px;gap:25px}#welcome h1{font-size:clamp(49px,10.8vw,76px)}#welcome p.font-extrabold{font-size:clamp(23px,4.2vw,30px)}#welcome .corner-note{bottom:24px}#welcome .absolute.bottom-28{bottom:28px!important}#welcome>.relative.z-30{margin-top:10px}}
@media(max-width:380px){#welcome h1{font-size:45px}#welcome p.font-extrabold{font-size:22px}#welcome .border-2.bg-white\/85{padding:22px 12px!important}}
@supports not (backdrop-filter:blur(1px)){header,.dock-glass{background:rgba(250,250,246,.94)!important}}

.about-section-title{display:inline-block;font-size:32px;transform:rotate(-4deg);font-weight:500;letter-spacing:.01em;margin:0 0 30px 16px;position:relative}.about-section-title:after{content:"";position:absolute;left:8px;bottom:-5px;width:70%;height:7px;border-bottom:1.5px solid #718b70;border-radius:50%;transform:rotate(2deg)}
.hero-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,40%),#fff8d760 0,transparent 47%)}.ambient-orb{position:absolute;width:clamp(180px,34vw,550px);height:clamp(180px,34vw,550px);border-radius:50%;filter:blur(65px);opacity:.4;transition:translate 1.6s ease-out;will-change:translate;animation:ambient-breathe 13s ease-in-out infinite alternate}.ambient-orb:nth-child(1){left:-12%;top:10%;background:#e1fff0}.ambient-orb:nth-child(2){right:-10%;top:32%;background:#fbddb1;animation-delay:-7s}.ambient-orb:nth-child(3){left:30%;bottom:-30%;background:#bad7fc;animation-delay:-3s}@keyframes ambient-breathe{from{transform:scale(.9) translateY(-15px)}to{transform:scale(1.15) translateY(25px)}}
.cursor-star{position:fixed;z-index:9999;pointer-events:none;left:0;top:0;width:19px;height:19px;color:#647967;opacity:0;transition:opacity .2s,color .2s;will-change:transform}.cursor-star svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px #ffffffb0)}.cursor-star.is-link{color:#a36d39}.cursor-star.is-link svg{transform:scale(1.45) rotate(45deg);transition:transform .2s}.hero-ripple{position:absolute;width:30px;height:30px;margin:-15px;border:1px solid #fff9e9;border-radius:50%;pointer-events:none;animation:hero-ripple 1.3s ease-out forwards;box-shadow:0 0 18px #fff9e950}@keyframes hero-ripple{to{transform:scale(10);opacity:0}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){body.has-art-cursor,body.has-art-cursor a,body.has-art-cursor button,body.has-art-cursor [role=button],body.has-art-cursor .draggable-note{cursor:none!important}body.has-art-cursor input,body.has-art-cursor textarea,body.has-art-cursor select{cursor:auto!important}}
@media(prefers-reduced-motion:reduce){.hero-atmosphere,.cursor-star{display:none}.ambient-orb{animation:none}.about-section-title{transform:none}}
.scroll-entrance{opacity:0;transform:translate(var(--enter-x,0),16px);transition:opacity .65s ease var(--enter-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--enter-delay,0ms)}.scroll-entrance.is-visible{opacity:1;transform:none}.kiri-editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;margin:35px 0 0;align-items:start}.detail-body .kiri-editorial figure{background:none;border:0;padding:0;margin:0}.detail-body .kiri-editorial figure:nth-child(even){margin-top:55px}.detail-body .kiri-editorial img{width:100%;height:auto;max-height:none;border-radius:4px;background:none;box-shadow:none}@media(max-width:560px){.kiri-editorial{gap:18px 12px}.detail-body .kiri-editorial figure:nth-child(even){margin-top:28px}}@media(prefers-reduced-motion:reduce){.scroll-entrance{opacity:1;transform:none;transition:none}}@media print{.scroll-entrance{opacity:1;transform:none}}

/* Airy sky, with clouds reacting softly to pointer position. */
.hero-atmosphere{background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),#fffdf16b,transparent 65%)}
.ambient-orb{filter:blur(13px);opacity:.52;width:clamp(240px,45vw,700px);height:clamp(70px,12vw,160px);border-radius:50%;background:radial-gradient(ellipse at 30% 65%,#fff 0,transparent 65%),radial-gradient(ellipse at 65% 45%,#fff 0,transparent 66%)!important;box-shadow:0 18px 30px #ffffff35;transition:translate 1.8s ease-out}
.ambient-orb:nth-child(1){left:-13%;top:22%;transform:rotate(-8deg)}.ambient-orb:nth-child(2){right:-14%;top:48%;opacity:.38}.ambient-orb:nth-child(3){left:25%;bottom:8%;opacity:.25}
.cursor-star{width:28px;height:28px;color:#244b64}.cursor-star svg{filter:drop-shadow(0 2px 2px #ffffff) drop-shadow(0 0 3px #264b6440)}.cursor-star.is-link{color:#b56e2b}.cursor-star.is-link svg{transform:scale(1.4) rotate(45deg)}
.scroll-entrance{transition:opacity .75s ease var(--enter-delay,0ms),transform .85s cubic-bezier(.16,1,.3,1) var(--enter-delay,0ms);transform:translate(var(--enter-x,0),35px)}
#highlights.scroll-entrance{transform:translateY(65px) scale(.94)}#highlights.scroll-entrance.is-visible{transform:none;animation:highlight-pop .9s cubic-bezier(.16,1,.3,1) both}
#highlights article.scroll-entrance.is-visible{animation:highlight-card .75s cubic-bezier(.16,1,.3,1) var(--enter-delay,0ms) both}
@keyframes highlight-pop{0%{opacity:0;transform:translateY(65px) scale(.94)}70%{opacity:1;transform:translateY(-7px) scale(1.008)}100%{opacity:1;transform:none}}
@keyframes highlight-card{from{opacity:0;transform:translateY(50px) rotate(2deg) scale(.95)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#highlights.scroll-entrance,#highlights article.scroll-entrance{animation:none!important;transform:none!important;opacity:1!important}}

/* Native top-layer dialogs must not lose the pointer behind the document cursor. */
body.has-art-cursor dialog,body.has-art-cursor dialog *{cursor:auto!important}
body.has-art-cursor dialog button,body.has-art-cursor dialog a,body.has-art-cursor dialog [role="button"]{cursor:pointer!important}
body.has-art-cursor:has(dialog[open]) .cursor-star{display:none!important}
.project-dialog .dialog-close{width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;font-size:29px;line-height:1;color:#173c36;background:#e2e9dc;border:1px solid #8b9b82;box-shadow:0 2px 5px #21352b15;transition:background .15s,transform .15s}
.project-dialog .dialog-close:hover{background:#d1dfc5;transform:scale(1.06)}
.project-dialog .dialog-close:focus-visible{outline:3px solid #2c6575;outline-offset:3px}

/* Blend hero effects into the same continuous canvas. */
.hero-atmosphere{-webkit-mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%)}
#welcome{border:0!important;box-shadow:none!important}#about{padding-top:35px!important}
#welcome .dock-glass .group>a,#welcome .dock-glass .group>div.cursor-pointer{width:50px!important;height:50px!important}#welcome .dock-glass .group svg{width:23px;height:23px}

@media(min-width:768px){#about>div{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr);gap:24px;padding:36px!important}#about>div>.space-y-5{grid-column:1/-1;max-width:none}#about>div>.grid{display:contents}#about>div>.grid>div:first-child{grid-column:1;grid-row:2;margin:0;align-self:start}#about>div>.grid>div:last-child{grid-column:2;grid-row:2/4;align-self:center}#about>div>div:last-child{grid-column:1;grid-row:3;margin:0;max-width:none;align-self:start}#about>div>.absolute{display:none}}
@media(max-width:640px){#welcome .dock-glass .group>a,#welcome .dock-glass .group>div.cursor-pointer{width:44px!important;height:44px!important}}

body.has-art-cursor dialog,body.has-art-cursor dialog *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%203v23l6-6%205%2010%205-3-5-10h9Z%22%20fill%3D%22%23fff3c9%22%20stroke%3D%22%239c7027%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m25%202%201.5%204.5L31%208l-4.5%201.5L25%2014l-1.5-4.5L19%208l4.5-1.5Z%22%20fill%3D%22%23f9d879%22%20stroke%3D%22%23795c32%22%2F%3E%3C%2Fsvg%3E") 5 3,auto!important}
body.has-art-cursor dialog button,body.has-art-cursor dialog a,body.has-art-cursor dialog [role="button"]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%203v23l6-6%205%2010%205-3-5-10h9Z%22%20fill%3D%22%23fff3c9%22%20stroke%3D%22%239c7027%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m25%202%201.5%204.5L31%208l-4.5%201.5L25%2014l-1.5-4.5L19%208l4.5-1.5Z%22%20fill%3D%22%23f9d879%22%20stroke%3D%22%23795c32%22%2F%3E%3C%2Fsvg%3E") 5 3,pointer!important}
body.has-art-cursor dialog input,body.has-art-cursor dialog textarea{cursor:text!important}

.bio-intro{padding:7px 0 14px;border-bottom:1px solid #7d907b30}.bio-intro>p:first-child{font-size:clamp(25px,3.2vw,38px)!important;font-weight:600!important;line-height:1.45!important;letter-spacing:-.035em;max-width:850px}.bio-emphasis{color:#4f725c}.bio-intro>p:nth-child(2){max-width:730px;font-size:15px;line-height:2.05;color:#657064}.bio-point{color:#344f40;font-weight:500;text-decoration:underline;text-decoration-color:#c7d5ad;text-underline-offset:5px;text-decoration-thickness:3px}.bio-closing{display:inline-block;margin-top:8px;font-size:13px;color:#7a8171}

.bio-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:35px;align-items:center}.bio-intro>p:first-child{margin:0;font-size:clamp(26px,2.7vw,35px)!important}.bio-intro>p:nth-child(2){margin:0!important;max-width:none;font-size:15px;line-height:2;text-align:justify}.bio-intro .bio-point{text-decoration:none;color:#3c5f48;font-weight:600}
.detail-body .kiri-editorial{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.detail-body .kiri-editorial>.kiri-lead-image{grid-column:1/-1;width:100%;height:auto;max-height:none;object-fit:contain;margin-bottom:10px;border-radius:0}.detail-body .kiri-editorial figure,.detail-body .kiri-editorial figure:nth-child(even){margin:0!important;padding:0;border:0;background:none}.detail-body .kiri-editorial figure img{width:100%;height:auto;max-height:none;border-radius:0;display:block}
@media(max-width:767px){.bio-intro{grid-template-columns:1fr;gap:18px}.bio-intro>p:nth-child(2){font-size:14px}.detail-body .kiri-editorial{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}}
/* Hover-only colour mesh, inspired by React Bits Masked Heading. Resting type is untouched. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.masked-hero-heading:hover .masked-hero-word{background-image:radial-gradient(ellipse at var(--mesh-x,50%) var(--mesh-y,50%),#a54d33 0%,transparent 38%),radial-gradient(ellipse at 80% 20%,#178a9c 0%,transparent 50%),linear-gradient(120deg,#202c58 5%,#538fa0 30%,#ad623b 60%,#354f7c 90%);background-size:220% 220%;background-position:var(--mesh-x,50%) var(--mesh-y,50%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:masked-mesh-drift 5s ease-in-out infinite alternate,masked-mesh-in .7s ease both;animation-delay:0s,var(--word-delay,0ms)}
@keyframes masked-mesh-drift{from{background-position:20% 35%}to{background-position:85% 65%}}
@keyframes masked-mesh-in{from{filter:brightness(.75)}to{filter:brightness(1)}}
}}

/* Footer appreciation: native, keyboard-accessible Pulse Heart adaptation. */
.footer-signoff{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.pulse-heart{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:94px;padding:6px 15px 6px 10px;border:1px solid #d9d4cf;border-radius:32px;background:#fff9f2;color:#716a68;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;transition:background .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.pulse-heart:hover{background:#fff0ec;border-color:#dca7a3;box-shadow:0 3px 14px #a45a5112}
.pulse-heart:focus-visible{outline:2px solid #375778;outline-offset:4px}
.pulse-heart-icon{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0}
.pulse-heart-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;fill:transparent;transition:fill .18s,color .18s}
.pulse-heart[aria-pressed="true"]{color:#d64a64;background:#fff0f0;border-color:#ecc5cb}
.pulse-heart[aria-pressed="true"] svg{fill:currentColor}
.pulse-heart.is-pulsing .pulse-heart-icon{animation:footer-heart-beat .65s cubic-bezier(.2,.7,.3,1) both}
.pulse-heart.is-pulsing .pulse-heart-label{animation:footer-heart-label .35s ease both}
.pulse-heart-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes footer-heart-beat{0%{transform:scale(1)}20%{transform:scale(.3);border-radius:50%;background:currentColor}35%{background:transparent}55%{transform:scale(1.4)}72%{transform:scale(.9)}86%{transform:scale(1.13)}100%{transform:scale(1)}}
@keyframes footer-heart-label{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pulse-heart,.pulse-heart-icon svg{transition:none}.pulse-heart.is-pulsing .pulse-heart-icon,.pulse-heart.is-pulsing .pulse-heart-label{animation:none}}

.photography-entry{display:inline-block;transition:transform .25s,box-shadow .25s;text-decoration:none}.photography-entry:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 5px 18px #375a6c26}