/* Geometry, type, color and animations are in the adapted reference stylesheet. */
:root{--color-default-theme:#FFD203}
:root:not(.theme-contrasted){--color-primary:var(--color-default-theme)}
:root .site-contrast-mask{background-color:var(--color-default-theme)}
.replica-skip{position:fixed;left:1rem;top:-100px;z-index:100;background:var(--color-primary);padding:1rem;color:var(--color-secondary);font:14px var(--font-family-fraktion)}
.replica-skip:focus{top:1rem}a:focus-visible,button:focus-visible{outline:2px dashed currentColor;outline-offset:4px}
.replica-end{height:25vh;background:var(--color-primary)}
.accessible-works{display:none}.replica-noscript{padding:2rem;background:var(--color-primary)}
.a__load-error{position:absolute;inset:0;display:grid;place-items:center;background:var(--color-secondary);color:var(--color-primary);font:12px var(--font-family-fraktion);text-align:center;padding:1rem}
html.replica-static .site-intro{display:none!important}html.replica-static .site-head,html.replica-static .s-hero,html.replica-static .site-wrapper,html.replica-static .site-mount{opacity:1!important}
html.replica-static .s-work{height:100lvh!important}html.replica-static .s__mask{scale:1!important}html.replica-static .s-work .s__scene__work{display:none}
html.replica-static .accessible-works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;padding:3rem 1rem;background:var(--color-secondary);color:var(--color-primary);font:12px/1.7 var(--font-family-fraktion)}
.accessible-works article{min-width:0}.accessible-works video{display:block;width:100%;aspect-ratio:16/10;background:#250404}.accessible-works a{color:inherit}.accessible-works h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.accessible-works .video-note{font-size:11px}
html.replica-static,html.replica-static body{height:auto!important;overflow-y:auto!important}
@media(max-width:576px){html.replica-static .accessible-works{grid-template-columns:1fr;padding:2rem .5rem}.replica-end{height:15vh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Custom loading identity, independent of the reference navigation logo. */
.portfolio-intro{position:fixed;inset:0;z-index:50;overflow:hidden;background:var(--color-primary);color:var(--color-secondary);will-change:transform}
.intro-frame{position:fixed;inset:0;z-index:51;pointer-events:none}
.intro-frame-edge{position:absolute;display:block;background:var(--color-secondary);will-change:transform}
.intro-frame-edge--left{top:0;bottom:0;left:0;width:var(--frame-left,0px);transform:scaleX(0);transform-origin:0 50%}
.intro-frame-edge--right{top:0;bottom:0;right:0;width:var(--frame-right,0px);transform:scaleX(0);transform-origin:100% 50%}
.intro-frame-edge--top{top:0;left:0;right:0;height:var(--frame-top,0px);transform:scaleY(0);transform-origin:50% 0}
.intro-layout{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,86vw);padding:28px 0}
.intro-word{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0 auto;font:700 clamp(40px,12vw,176px)/1 var(--font-family-bigger);letter-spacing:0}
.intro-letter-mask{display:block;overflow:hidden;padding:.06em .025em;flex:0 1 auto}
.intro-letter{display:block;position:relative;top:.055em;visibility:hidden;transform-origin:50% 75%;will-change:transform}
.intro-rule{position:absolute;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:50% 50%;will-change:transform}
.intro-rule--top{top:0}.intro-rule--bottom{bottom:0}
@media(max-width:576px){.intro-layout{padding:18px 0}}

/* Personal identity: C uses the existing Latin face; twelve CJK glyphs are local. */
@font-face{font-family:'Portfolio SC';src:url('assets/fonts/portfolio-sc-900.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}
:root{--font-family-cjk:'Portfolio SC','PingFang SC',sans-serif}
.site-head .sb-logo a{display:block;color:var(--color-secondary);text-decoration:none}
.site-head .sb-logo .personal-logo{display:block;width:3rem;height:3rem;font:700 3.65rem/.94 var(--font-family-bigger);text-align:center;color:var(--color-secondary)}
.site-head .availability-empty{width:19.7rem;flex-shrink:0}
.site-head .availability-empty .sb__line{height:48px;padding:0!important}
.s-hero.astro-7dteeuzc .s__title.astro-7dteeuzc{font-family:var(--font-family-cjk);font-weight:900;font-size:min(10.8vw,190px);line-height:1.08;letter-spacing:-.045em}
.s-hero.astro-7dteeuzc .s__title__word.astro-7dteeuzc{height:1.08em;line-height:1.08;white-space:nowrap;word-break:keep-all}
.s-hero.astro-7dteeuzc .s__title .char__inner{top:0!important;line-height:1.08}
.s-hero.astro-7dteeuzc .s__title .char{width:1em!important;letter-spacing:0;margin-right:-.045em}
.s-hero.astro-7dteeuzc .s__title .char:last-child{margin-right:0}
.s-hero.astro-7dteeuzc .s__title .char__inner:before{width:3em;letter-spacing:0;white-space:nowrap}
.s-hero.astro-7dteeuzc .s__title .char__inner:after{width:1em;letter-spacing:0;line-height:1.08;white-space:normal;word-break:break-all;overflow-wrap:anywhere}
.s-work.astro-doefkd43 .s__title.astro-doefkd43,.s-work.astro-doefkd43 .s__scene.astro-doefkd43{font-family:var(--font-family-cjk);font-weight:900;font-size:min(18.75rem,16.5lvh);line-height:1}
.s-work.astro-doefkd43 .s__title.astro-doefkd43{width:1em}
.s-work.astro-doefkd43 .s__title__inner.astro-doefkd43{margin:0;line-height:1}
.s-work.astro-doefkd43 .s__scene__letter{line-height:1}
@media(max-width:1280px){.site-head .availability-empty{width:18rem}}
@media(max-width:1080px){.site-head .availability-empty{width:15rem}}
@media(max-width:987px){.site-head .availability-empty{width:auto;flex-grow:1}.s-hero.astro-7dteeuzc .s__title.astro-7dteeuzc{font-size:20.5vw}}
@media only screen and (max-width:767px) and (orientation:landscape),only screen and (max-width:576px){.site-head .sb-logo .personal-logo{width:1.875rem;height:1.875rem;font-size:2.35rem}.site-head .availability-empty{width:6rem;flex-grow:0}.site-head .availability-empty .sb__line{height:32px}.s-hero.astro-7dteeuzc .s__title.astro-7dteeuzc{padding:.75rem;font-size:20.5vw}}
/* Personal videos share the existing moving card geometry; playback stays stable in a dialog. */
.project-cover{position:relative;width:min(50vw,calc(50vh * 1082 / 636),850px);aspect-ratio:1082/636;background:var(--color-primary);color:var(--color-secondary);overflow:hidden;font-family:system-ui,sans-serif;border:1px solid var(--color-primary)}
.project-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-cover__title{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(20px,4vw,60px);font-weight:900;padding:1rem;text-align:center}
.project-cover img~.project-cover__title{inset:auto 0 0;display:block;padding:.7rem 1rem;background:var(--color-secondary);color:var(--color-primary);font-size:clamp(16px,2vw,28px)}
.project-cover__play{position:absolute;right:.8rem;top:.8rem;padding:.6rem;background:var(--color-primary);color:var(--color-secondary);font:700 12px system-ui,sans-serif}
.personal-work .a__caption{font-family:system-ui,sans-serif!important;letter-spacing:.03em!important;gap:1rem}
.project-player-open{overflow:hidden!important;overscroll-behavior:none}
.project-player{box-sizing:border-box;width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--color-primary);background:var(--color-secondary);color:var(--color-primary);font:14px/1.5 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain}
.project-player::backdrop{background:rgba(22,0,0,.88)}
.project-player header,.project-player footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 18px}
.project-player h2,.project-player p{margin:0}.project-player h2{font-size:20px}.project-player footer{font-size:12px;flex-wrap:wrap}.project-player a{color:inherit}
.project-player button{background:var(--color-primary);border:0;color:var(--color-secondary);padding:8px 12px;font:inherit;cursor:pointer;white-space:nowrap}
.project-player__screen{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 160px);min-height:120px;background:#000}
.project-player iframe{display:block;width:100%;height:100%;border:0}
.accessible-works .personal-static{display:block;width:100%;border:1px solid currentColor;text-decoration:none}.personal-static img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.personal-static span{display:block;padding:1rem}
@media(max-width:576px),(max-width:767px) and (orientation:landscape){.project-cover{width:min(80vw,calc(80vh * 1082 / 636))}.project-player header,.project-player footer{padding:10px}.project-player h2{font-size:16px}}
a-work .a__inner>a{position:relative}.reference-badge{position:absolute;right:.6rem;top:.6rem;padding:.4rem .6rem;background:var(--color-secondary);color:var(--color-primary);font:600 11px/1.3 system-ui,sans-serif;pointer-events:none}
/* A second independent gallery shares the reference mask and perspective system. */
.experience-cover{position:relative;width:min(50vw,calc(50vh * 1082 / 636),850px);aspect-ratio:1082/636;background:var(--color-secondary);border:1px solid var(--color-primary);color:var(--color-primary);font-family:system-ui,sans-serif;overflow:hidden}
.experience-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.7rem;background:linear-gradient(90deg,transparent calc(50% - .5px),currentColor 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),currentColor 50%,transparent calc(50% + .5px));}
.experience-placeholder:before{content:'';position:absolute;inset:10%;border:1px solid currentColor;opacity:.3}.experience-placeholder strong,.experience-placeholder__note{position:relative;background:var(--color-secondary);padding:.2rem .6rem}
.experience-placeholder strong{font-size:clamp(16px,2.2vw,32px);line-height:1.2}.experience-placeholder__number{position:absolute;right:6%;bottom:3%;font:700 clamp(42px,9vw,130px)/1 var(--font-family-bigger);opacity:.22}.experience-placeholder__note{font-size:12px;letter-spacing:.15em}
.experience-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.experience-cover.has-image{cursor:zoom-in}
.experience-open{position:absolute;top:.8rem;right:.8rem;z-index:1;border:0;background:var(--color-primary);color:var(--color-secondary);padding:.6rem;font:700 12px system-ui,sans-serif;cursor:zoom-in}
.experience-cover [hidden]{display:none!important}
.experience-work .a__caption,.experience-static .a__caption{font-family:system-ui,sans-serif!important;letter-spacing:.03em!important;gap:1rem}
.image-player{width:min(1200px,calc(100vw - 32px))}.image-player figure{margin:0;padding:0 16px;display:grid;place-items:center;min-height:100px}.image-player figure img{display:block;max-width:100%;max-height:calc(100dvh - 180px);width:auto;height:auto;object-fit:contain}.image-player__status{padding:1rem;text-align:center}.image-player__status:empty{display:none}.image-player__description{padding:12px 18px;white-space:pre-line;overflow-wrap:anywhere}
.accessible-section-title{grid-column:1/-1;font:900 clamp(26px,4vw,48px)/1.2 system-ui,sans-serif;margin:0 0 1rem}
html.replica-static .s-work{height:auto!important;min-height:0}html.replica-static .s-work>.s__outer{display:none}html.replica-static .s-work .accessible-works{position:relative}
.experience-static{display:block}.experience-static .experience-cover{width:100%}.experience-static .a__caption{display:flex!important;justify-content:space-between;padding:10px 0;font-size:12px}.experience-static .a__inner{display:block}
@media(max-width:576px),(max-width:767px) and (orientation:landscape){.experience-cover{width:min(80vw,calc(80vh * 1082 / 636))}.experience-placeholder strong{font-size:20px}.image-player figure{padding:0 10px}}
/* Keep experience names readable after replacing mobile placeholders with photos. */
.experience-work .a__caption{display:flex!important}

/* Social cells are removed; preserve the two introduction rows and fill the gap. */
.site-head .availability-empty{flex-grow:1;min-width:0}
@media(max-width:576px),(max-width:767px) and (orientation:landscape){.site-head .availability-empty{flex-grow:1;width:auto}.site-head .sb-contrast{margin-left:0}}

.site-head .sb-availability.availability-empty.astro-5qrshpxv{flex:1 1 auto;min-width:0;background:linear-gradient(0deg,transparent calc(50% - 1px),var(--color-secondary) calc(50% - 1px),var(--color-secondary) 50%,transparent 50%)}
.site-head .sb-contrast.astro-5qrshpxv{flex-shrink:0}
@media(max-width:576px),(max-width:767px) and (orientation:landscape){.site-head .sb-availability.availability-empty.astro-5qrshpxv{width:auto}}
