:root{font-family:Inter,Arial,sans-serif;color:#171817;background:#f5f5f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #d74824;outline-offset:6px}header{height:100px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d6d6d1;position:relative;z-index:20}.logo{font-size:36px;letter-spacing:-4px;font-weight:900}.logo span{font-size:13px;letter-spacing:0;vertical-align:top;display:inline-block;margin:8px 0 0 6px}.grid-icon{font-size:25px}.stage{height:calc(100svh - 196px);min-height:580px;position:relative;overflow:hidden;isolation:isolate}#cards{position:absolute;inset:0}.card{position:absolute;top:48%;left:50%;width:clamp(135px,13.2vw,214px);height:clamp(183px,18vw,290px);padding:0;border-radius:11px;overflow:hidden;background:#bbb;box-shadow:0 12px 26px #16181220;will-change:transform;transform-origin:center;text-align:left}.card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#0007)}.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}.card:hover img{transform:scale(1.09)}.card .card-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;color:white;font-size:10px;z-index:1;letter-spacing:.04em}.card .card-bottom{position:absolute;bottom:15px;left:15px;right:15px;color:white;z-index:1;font-size:18px;font-weight:600;letter-spacing:-.04em}.project-hover{position:absolute;bottom:8px;left:4.35%;right:4.35%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.07em;color:#777870}footer{min-height:96px;margin:0 4%;border-top:1px solid #d6d6d1;display:flex;align-items:center;justify-content:space-between;gap:20px}footer p{font-size:12px;color:#777870}footer p span{margin-left:10px}.footer-right{font-size:11px;letter-spacing:.03em}@keyframes spin{to{transform:rotate(360deg)}}dialog{padding:0;border:0;max-width:none;width:calc(100% - 48px);height:calc(100svh - 48px);max-height:none;border-radius:14px;background:#f5f5f2;color:#171817;box-shadow:0 20px 100px #0004;overscroll-behavior:contain}dialog::backdrop{background:#1b1b1b70;backdrop-filter:blur(12px)}.detail-top{height:70px;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:0 30px;background:#f5f5f2f5;z-index:2;font-size:12px;letter-spacing:.05em}#closeDetail{font-size:14px;display:flex;align-items:center;gap:16px}#closeDetail span{font-size:28px}.detail-cover{height:58vh;min-height:280px;position:relative;background:#ddd;margin:0 20px;border-radius:7px;overflow:hidden}.detail-cover img{width:100%;height:100%;object-fit:cover}.detail-cover span{position:absolute;bottom:24px;left:24px;color:white;font-size:13px}.detail-body{padding:55px 5% 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.eyebrow{font-size:12px;letter-spacing:.09em}.detail-body h2{font-size:clamp(45px,6vw,90px);letter-spacing:-.07em;line-height:1;margin:18px 0}.detail-body>div>p:not(.eyebrow){font-size:17px;line-height:1.9;word-break:keep-all;color:#62635e}dl{display:flex;gap:32px;border-top:1px solid #ccc;padding-top:24px;margin-top:30px}dt{font-size:10px;color:#7b7b76;letter-spacing:.04em}dd{font-size:13px;margin:8px 0}#nextProject{border-top:1px solid #ccc;margin:0 5%;padding:30px 0 40px;width:90%;display:flex;justify-content:space-between;text-align:left;font-size:14px}#nextTitle{font-size:28px;letter-spacing:-.04em}[hidden]{display:none!important}@media(max-width:700px){header{height:78px;margin:0 6%}.stage{height:calc(100svh - 186px);min-height:550px}.card{width:124px;height:170px}.card .card-top{font-size:8px;top:10px;left:10px;right:10px}.card .card-bottom{font-size:15px;left:10px;bottom:10px}.project-hover{font-size:9px;bottom:15px;left:6%;right:6%}footer{min-height:108px;margin:0 6%;gap:8px;flex-wrap:wrap;padding:18px 0}footer p{order:3;width:100%;font-size:10px;margin:0}footer p span{margin-left:5px}.footer-right{font-size:9px}dialog{width:calc(100% - 16px);height:calc(100svh - 16px)}.detail-top{padding:0 18px;font-size:9px}.detail-cover{margin:0 10px;height:45vh}.detail-body{display:block;padding:30px 7%}.detail-body>div>p:not(.eyebrow){font-size:15px}dl{gap:20px}.detail-body h2{margin-bottom:30px}#nextTitle{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Stack collection — dark, square cards, slow torsion. */
:root{color:#f2f2ed;background:#080808}header,footer{border-color:#292929}header{height:88px}header .logo{letter-spacing:-3px}.stage{height:calc(100svh - 180px);min-height:620px;background:#080808}.card{top:48%;width:clamp(225px,23vw,365px);height:auto;aspect-ratio:1;border-radius:14px;background:#151515;box-shadow:-12px 18px 35px #0009;border:1px solid #ffffff12;transition:filter .65s}.card .card-top{font-size:9px;text-shadow:0 1px 6px #000}.card .card-bottom{font-size:17px;letter-spacing:-.03em;text-shadow:0 1px 8px #000}.card img{object-fit:cover}.project-hover{bottom:22px;color:#8d8d8d;align-items:end}.project-hover #hoverTitle{color:#e5e5e5;font-size:14px;letter-spacing:-.015em}footer{min-height:92px}footer p{color:#777}dialog{background:#0c0c0c;color:#eee;border:1px solid #333}.detail-top{background:#0c0c0cf5}.detail-cover{background:#151515;height:65vh}.detail-cover img{object-fit:contain}.detail-body>div>p:not(.eyebrow){color:#b9b9b9}.detail-body{grid-template-columns:1fr 1.2fr}.detail-body h2{font-size:clamp(36px,5.5vw,82px);word-break:keep-all;line-height:1.15}dl{flex-wrap:wrap;border-color:#333}dd{max-width:260px;line-height:1.5}#projectLinks{display:flex;gap:12px;padding:0 5% 35px}#projectLinks a{border:1px solid #555;border-radius:30px;padding:12px 20px;font-size:13px}#projectLinks a:hover{background:#eee;color:#111}#pageGallery{padding:0 3% 50px}#pageGallery figure{margin:0 0 28px}#pageGallery img{width:100%;height:auto;display:block;background:#000}#pageGallery details{margin-top:10px;color:#777;font-size:12px}#pageGallery summary{cursor:pointer;padding:10px 0}#pageGallery details p{white-space:pre-wrap;line-height:1.8;color:#aaa;font-size:14px}#nextProject{border-color:#333}button:focus-visible{outline-color:#fff}.card:focus-visible{outline-offset:3px}@media(max-width:700px){.stage{min-height:630px;height:calc(100svh - 186px)}header{height:78px}.card{width:195px;top:46%;border-radius:10px}.card .card-bottom{font-size:13px}.card .card-top{font-size:7px}.project-hover{bottom:17px}.project-hover #hoverTitle{font-size:11px}.detail-cover{height:36vh}.detail-body{display:block}.detail-body h2{font-size:42px}#projectLinks{flex-wrap:wrap}.footer-right{font-size:9px}}@media(max-width:700px){}@media(prefers-reduced-motion:reduce){}

/* Portrait cards span almost the full viewport width. */
.card{width:clamp(190px,19vw,285px);height:auto;aspect-ratio:3/4}@media(max-width:700px){.card{width:155px;aspect-ratio:3/4}}

.placeholder-card{background:#202020;border:1px solid #555;cursor:default}.placeholder-mark{position:absolute;inset:0;display:grid;place-items:center;font-size:48px;font-weight:400;color:#777}.interaction-label{font-size:11px;letter-spacing:.05em;color:#999}@media(max-width:700px){}

header .logo{font-size:18px;font-weight:600;letter-spacing:-.04em;line-height:1.2}@media(max-width:700px){header .logo{font-size:15px}}

.intro-card{position:absolute;top:48%;left:50%;width:clamp(190px,19vw,285px);aspect-ratio:3/4;z-index:70;background:#080808;border:1px solid #333;border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 15px 40px #0008;will-change:transform}.intro-card span{color:#f3f3ef;font-size:clamp(18px,2vw,28px);font-weight:600;line-height:1.12;letter-spacing:-.05em}@media(max-width:700px){.intro-card{width:155px;top:46%;border-radius:10px}.intro-card span{font-size:18px}}

.intro-card{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.intro-card:focus-visible{outline:2px solid #aaa;outline-offset:6px}.intro-hint{position:absolute;top:calc(48% - clamp(190px,19vw,285px)*2/3 - 44px);left:50%;transform:translateX(-50%);margin:0;z-index:71;color:#aaa;font-size:13px;white-space:nowrap;pointer-events:none}@media(max-width:700px){.intro-hint{top:calc(46% - 145px);font-size:12px}}

/* A quiet introduction with only the card and its gesture hint. */
.intro-card{box-shadow:0 5px 14px #0002}.intro-active .card{box-shadow:none}.intro-active header,.intro-active footer,.intro-active .project-hover{visibility:hidden;pointer-events:none}.intro-hint{display:flex;flex-direction:column;align-items:center;gap:10px;top:calc(48% - clamp(190px,19vw,285px)*2/3 - 84px)}.intro-arrow{display:block;font-size:27px;line-height:1;color:#aaa;will-change:transform}@media(max-width:700px){.intro-hint{top:calc(46% - 185px)}}

/* Reveal the surrounding interface with the upward drag. */
header,footer,.project-hover{transition:opacity .65s ease}.intro-active header,.intro-active footer,.intro-active .project-hover{visibility:visible;opacity:0;pointer-events:none}.intro-hint{will-change:transform}

.intro-hint{top:calc(48% - clamp(190px,19vw,285px)*2/3 - 72px)}@media(max-width:700px){.intro-hint{top:calc(46% - 173px)}}

.intro-arrow{font-size:23px}.intro-hint{gap:6px;top:calc(48% - clamp(190px,19vw,285px)*2/3 - 64px)}@media(max-width:700px){.intro-hint{top:calc(46% - 165px)}}

.page-nav{display:flex;gap:30px;align-items:center;font-size:14px}.page-nav a{color:#777;padding:12px 0;position:relative}.page-nav a[aria-current=page]{color:#eee}.page-nav a[aria-current=page]:after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:#eee}.about-view{padding:70px 8% 100px;max-width:1600px;margin:auto}.about-heading{margin-bottom:65px}.about-heading>p{font-size:11px;letter-spacing:.16em;color:#888}.about-heading h1{font-size:clamp(50px,7vw,96px);font-weight:500;letter-spacing:-.065em;margin:15px 0;line-height:1.1}.about-heading h1 span{font-size:20px;letter-spacing:-.03em;color:#777;margin-left:25px}.cv-layout{display:grid;grid-template-columns:1fr 2fr;gap:10%}.cv-section{margin-bottom:43px}.cv-layout h2{font-size:14px;font-weight:500;margin:0 0 23px}.cv-section p{font-size:15px;line-height:1.85;margin:8px 0}.cv-section .cv-date{font-size:12px;color:#777;margin-top:20px}.cv-muted{color:#999}.cv-experience ol{list-style:none;margin:0;padding:0}.cv-experience li{display:grid;grid-template-columns:105px 1fr;gap:20px;border-top:1px solid #282828;padding:20px 0}.cv-experience time{font-size:12px;color:#888;padding-top:3px}.cv-experience h3{font-weight:450;font-size:16px;line-height:1.5;margin:0 0 7px}.cv-experience p{font-size:14px;line-height:1.7;color:#999;margin:0;word-break:keep-all}.about-active footer .interaction-label,.about-active footer>p{display:none}.about-active footer{justify-content:flex-end}@media(max-width:700px){.page-nav{gap:18px;font-size:13px}header .logo{font-size:13px}.about-view{padding:40px 6% 70px}.about-heading{margin-bottom:40px}.about-heading h1 span{display:block;margin:15px 0 0;font-size:18px}.cv-layout{grid-template-columns:1fr;gap:15px}.cv-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cv-section{margin-bottom:20px}.cv-section p{font-size:13px}.cv-experience li{grid-template-columns:80px 1fr;gap:12px}.cv-experience h3{font-size:15px}.cv-experience p{font-size:13px}}

/* About: one continuous text column, a single type size. */
.about-view{max-width:1120px;padding:55px 4% 90px;font-size:14px;line-height:1.8;color:#ccc}.about-view h1,.about-view h2,.about-view h3,.about-view p,.about-view span,.about-view time,.about-view a,.about-view li{font-size:14px;line-height:1.8;letter-spacing:0;color:inherit}.about-heading{margin-bottom:32px}.about-heading>p{display:none}.about-heading h1{font-weight:700;margin:0}.about-heading h1 span{display:inline;font-weight:400;margin-left:12px}.cv-layout{display:flex;flex-direction:column;gap:0}.cv-layout aside{display:block}.cv-section{margin:0 0 28px}.cv-layout h2{font-weight:700;margin:0 0 5px}.cv-section p{margin:0;font-weight:400}.cv-section .cv-date{margin:12px 0 0;font-size:14px;color:inherit}.cv-section .cv-date:first-of-type{margin-top:0}.cv-experience ol{list-style:disc;padding-left:20px;margin:0}.cv-experience li{display:list-item;border:0;padding:0;margin:0 0 5px}.cv-experience time{display:inline;padding:0;font-weight:400;margin-right:10px}.cv-experience li>div{display:inline}.cv-experience h3{display:inline;font-weight:400;margin:0}.cv-experience h3:after{content:' — '}.cv-experience p{display:inline;margin:0;font-weight:400}.cv-muted{color:inherit}@media(max-width:700px){.about-view{padding:35px 6% 60px}.about-heading{margin-bottom:28px}.about-heading h1 span{display:inline;margin-left:12px}.cv-layout aside{display:block}.cv-section{margin-bottom:26px}}

.about-view .about-heading h1 span{font-size:14px;line-height:1.8;color:inherit;letter-spacing:0}.about-view .cv-section .cv-muted{color:inherit}

.cv-group{margin-bottom:28px}.about-view .cv-experience ol{list-style:none;padding:0}.about-view .cv-experience li,.about-view .cv-line{display:grid;grid-template-columns:125px minmax(0,1fr);column-gap:18px;margin:0 0 5px;padding:0}.about-view .cv-experience time{margin:0;padding:0;white-space:nowrap}.about-view .cv-experience li>div{display:block}.about-view .cv-experience h3,.about-view .cv-experience p{display:inline}@media(max-width:700px){.about-view .cv-experience li,.about-view .cv-line{grid-template-columns:105px minmax(0,1fr);column-gap:12px}}

/* About split: large name on the left, the selected CV on the right. */
.about-view{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.65fr);gap:6%;max-width:1800px;padding:65px 4% 90px;align-items:start}.about-heading{margin:0;position:sticky;top:45px}.about-view .about-heading h1{font-size:clamp(36px,5vw,88px);font-weight:600;line-height:1;letter-spacing:-.065em;white-space:nowrap;margin:0}.about-view .cv-layout{min-width:0}.about-view .cv-experience li,.about-view .cv-line{grid-template-columns:105px minmax(0,1fr);column-gap:14px}.about-view .cv-section,.about-view .cv-group{margin-bottom:36px}@media(max-width:850px){.about-view{grid-template-columns:1fr;gap:42px;padding:40px 6% 65px}.about-heading{position:static}.about-view .about-heading h1{font-size:clamp(44px,10vw,80px)}.about-view .cv-experience li,.about-view .cv-line{grid-template-columns:100px minmax(0,1fr);gap:10px}}

.about-view{max-width:none;margin-left:4%;margin-right:4%;padding-left:0;padding-right:0}.about-view .about-heading h1{font-family:"Pretendard Variable",Pretendard,sans-serif}@media(max-width:850px){.about-view{margin-left:4%;margin-right:4%;padding-left:0;padding-right:0}}@media(max-width:700px){.about-view{margin-left:6%;margin-right:6%}}

:root{font-family:"Pretendard Variable",Pretendard,sans-serif}body,button,input,select,textarea{font-family:inherit}

.about-view .cv-layout,.about-view .cv-layout h2,.about-view .cv-layout h3,.about-view .cv-layout p,.about-view .cv-layout span,.about-view .cv-layout time,.about-view .cv-layout li,.about-view .cv-layout a{font-size:16px}

.cv-english{margin-top:30px;padding-top:45px;border-top:1px solid #303030}.about-view .cv-english .cv-line{grid-template-columns:135px minmax(0,1fr)}@media(max-width:700px){.about-view .cv-english .cv-line{grid-template-columns:105px minmax(0,1fr)}.cv-english time{white-space:normal;overflow-wrap:anywhere}}

.about-view .about-heading h1{font-size:80px}@media(max-width:700px){.about-view .about-heading h1{font-size:clamp(44px,12vw,80px)}}

.about-view{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4%}.about-view .about-heading h1{font-size:120px}@media(max-width:1100px){.about-view{grid-template-columns:1fr;gap:42px}.about-heading{position:static}}@media(max-width:700px){.about-view .about-heading h1{font-size:clamp(44px,15vw,120px)}}

.about-view{grid-template-columns:max-content minmax(0,1fr);gap:22px}.about-view .cv-layout{overflow-x:auto}.about-view .cv-line,.about-view .cv-experience li{grid-template-columns:105px max-content;column-gap:10px;white-space:nowrap}.about-view .cv-english .cv-line{grid-template-columns:135px max-content}.about-view .cv-layout{scrollbar-width:thin;scrollbar-color:#444 transparent}@media(max-width:1100px){.about-view{grid-template-columns:1fr;gap:32px}}

.about-view{column-gap:48px}@media(max-width:1100px){.about-view{gap:32px}}



.about-view .about-heading h1{font-size:60px}

/* Anchor the longest CV row to the same right edge as the footer. */
.about-view{grid-template-columns:minmax(0,1fr) max-content;column-gap:48px}.about-view .cv-layout{width:max-content;max-width:100%;justify-self:end;overflow:visible}.about-view .cv-english{width:max-content;max-width:100%}@media(max-width:1650px){.about-view{grid-template-columns:1fr;gap:40px}.about-heading{position:static}.about-view .cv-layout{justify-self:end}}@media(max-width:1250px){.about-view .cv-layout,.about-view .cv-english{width:100%}.about-view .cv-line,.about-view .cv-experience li{grid-template-columns:105px minmax(0,1fr);white-space:normal}.about-view .cv-english .cv-line{grid-template-columns:135px minmax(0,1fr)}.about-view .cv-line span,.about-view .cv-experience li>div{overflow-wrap:anywhere}}

.about-view .about-heading h1{font-size:60px;transform:scale(1.333333);transform-origin:left top}@media(max-width:700px){.about-view .about-heading h1{transform:scale(1.12)}}

/* Subtle full-site pigment field, below every interactive surface. */
body{isolation:isolate;background:#080808}#pigment-background{position:fixed;inset:-4%;width:108%;height:108%;z-index:-1;pointer-events:none;opacity:.48;filter:blur(32px);transform:translateZ(0)}.stage{background:transparent}.about-view{background:transparent}

#pigment-background{filter:blur(20px)}



/* Subtler project card corners. */
.card{border-radius:6px}

/* Clear card edges and translucent glass navigation. */
.card,.placeholder-card{border:0}

/* Full-bleed widescreen project imagery. */
.detail-cover{height:auto;min-height:0;aspect-ratio:21/9}
.detail-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#pageGallery img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center}

#pageGallery .empty-project-image{width:100%;aspect-ratio:21/9;background:#151515}

.detail-cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:1}

/* Symbiosis bilingual editorial layout. */
.detail-body.bilingual-layout{grid-template-columns:1fr 1fr;gap:32px 60px;align-items:start}
.bilingual-layout h2{letter-spacing:-.035em}
.bilingual-layout #detailDescription{margin-top:30px}
.bilingual-layout #detailDescriptionEn{margin-top:0}
.detail-body.bilingual-layout>dl{grid-column:1/-1;width:100%;margin:0;padding-top:24px;gap:48px}
@media(max-width:700px){.detail-body.bilingual-layout{display:grid;grid-template-columns:1fr;gap:24px}.detail-body.bilingual-layout>dl{gap:24px}.bilingual-layout #detailDescription{margin-top:22px}}

/* Align both language columns beneath the project title. */
.detail-body.bilingual-layout>div{display:contents}
.detail-body.bilingual-layout .eyebrow{grid-column:1/-1;margin:0}
.detail-body.bilingual-layout h2{grid-column:1/-1;letter-spacing:0;margin:0}
.detail-body.bilingual-layout #detailDescription{grid-column:1;grid-row:3;margin:0}
.detail-body.bilingual-layout #detailDescriptionEn{grid-column:2;grid-row:3;margin:0}
.detail-body.bilingual-layout>dl{grid-row:4}
@media(max-width:700px){.detail-body.bilingual-layout #detailDescriptionEn{grid-column:1;grid-row:4}.detail-body.bilingual-layout>dl{grid-row:5}}

.detail-body.bilingual-layout h2{font-size:19px;font-weight:700}
@media(max-width:700px){.detail-body.bilingual-layout h2{font-size:17px}}

/* Compact detail text without the repeated category row. */
.detail-body.bilingual-layout{padding-top:36px;row-gap:20px}
.detail-body.bilingual-layout h2{grid-row:1}
.detail-body.bilingual-layout #detailDescription,.detail-body.bilingual-layout #detailDescriptionEn{grid-row:2}
.detail-body.bilingual-layout>dl{grid-row:3}
@media(max-width:700px){.detail-body.bilingual-layout{padding-top:28px;row-gap:18px}.detail-body.bilingual-layout #detailDescriptionEn{grid-row:3}.detail-body.bilingual-layout>dl{grid-row:4}}

/* Shared spacing around the description and its metadata divider. */
.detail-body.bilingual-layout{--description-gap:20px;row-gap:var(--description-gap)}
.detail-body.bilingual-layout>dl{margin:0;padding-top:var(--description-gap)}
.detail-body.bilingual-layout h2{line-height:1;margin:0;padding:0}

/* One horizontal inset for all project detail content. */
#detail{--detail-inset:3%}
#detail .detail-cover{margin-inline:var(--detail-inset)}
#detail .detail-body{padding-inline:var(--detail-inset)}
#detail #pageGallery{padding-inline:var(--detail-inset)}
#detail #nextProject{margin-inline:var(--detail-inset);width:calc(100% - var(--detail-inset) - var(--detail-inset))}
@media(max-width:700px){#detail{--detail-inset:5%}}

/* Liquid glass pointer and project title expansion. */
.glass-cursor{position:fixed;left:0;top:0;z-index:2147483647;width:var(--cursor-width,20px);height:20px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff35,#ffffff0d 55%,#ffffff22);border:1px solid #ffffff65;box-shadow:inset 0 1px 2px #ffffff60,inset 0 -1px 2px #ffffff18,0 3px 12px #0003;backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s,border-radius .3s,opacity .15s;contain:layout style}
.glass-cursor.is-visible{opacity:1}
.glass-cursor.is-project{height:38px;border-radius:12px;background:linear-gradient(135deg,#ffffff32,#16161670);color:#fff}
.glass-cursor span{flex-shrink:0;white-space:nowrap;font-size:12px;font-weight:500;line-height:1;letter-spacing:0;opacity:0;transition:opacity .15s;text-shadow:0 1px 4px #0008}
.glass-cursor.is-project span{opacity:1;transition-delay:.08s}
@media(hover:hover) and (pointer:fine){html.glass-pointer,html.glass-pointer *{cursor:none!important}}
@media(prefers-reduced-motion:reduce){.glass-cursor,.glass-cursor span{transition:none}}

/* Keep the original pointer circle at the left edge as its label grows. */
.glass-cursor{transform:translate(-10px,-50%);border-radius:999px}
.glass-cursor.is-project{border-radius:999px}
.card .card-bottom{display:none}

/* Intro cover extends one pixel past each edge of the aligned stack. */
.intro-card{width:calc(clamp(190px,19vw,285px) + 2px);height:calc(clamp(190px,19vw,285px) * 4 / 3 + 2px);aspect-ratio:auto;border-radius:6px}
.card img,.card .card-top,.card .card-bottom{filter:blur(8px)}
@media(max-width:700px){.intro-card{width:157px;height:calc(155px * 4 / 3 + 2px);border-radius:6px}}

/* Match the intro cover corners to the project cards. */
.intro-card{border-radius:6px}

/* Brighter moving pigment within the opaque intro cover. */
.intro-card{overflow:hidden;isolation:isolate;background:#182c35}
.intro-card .intro-pigment{position:absolute;inset:-5%;width:110%;height:110%;pointer-events:none;filter:blur(5px) brightness(2.5) saturate(1.7);z-index:0}
.intro-card>span{position:relative;z-index:1;text-shadow:0 2px 12px #0009}

.intro-card .intro-logo{position:relative;z-index:1;display:block;width:52%;height:auto;max-height:60%;object-fit:contain;pointer-events:none;user-select:none;mix-blend-mode:difference}

header .logo{display:flex;align-items:center;line-height:1;letter-spacing:0}
header .logo img{display:block;width:96px;height:auto;object-fit:contain}
@media(max-width:700px){header .logo img{width:78px}}

header .logo{mix-blend-mode:difference}
header .logo img{filter:brightness(1.4);opacity:1}

/* Show the moving, inverted pigment through the logo silhouette. */
header .logo{position:relative;mix-blend-mode:normal}
header .logo img{opacity:0;filter:none}

header .logo{mix-blend-mode:normal}
header .logo img{width:84px;opacity:1;filter:none}
@media(max-width:700px){header .logo img{width:68px}}

/* Preserve the full video in its native 16:9 frame. */
.detail-cover.video-16-9{aspect-ratio:16/9}

#pageGallery.continuous-gallery figure{margin:0;padding:0}
#pageGallery.continuous-gallery img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0}

#pageGallery .gallery-video{position:relative;width:100%;aspect-ratio:16/9;margin:0;padding:0;background:#000}
#pageGallery .gallery-video iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}

/* Let the closing video extend through the gallery side gutters. */
#detail #pageGallery .gallery-video{width:calc(100% / .94);margin-inline:calc(-3% / .94)}
@media(max-width:700px){#detail #pageGallery .gallery-video{width:calc(100% / .9);margin-inline:calc(-5% / .9)}}

/* Centered identity and glass page navigation above the cards. */
header{justify-content:center}
header .page-nav{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);gap:12px;font-size:12px;white-space:nowrap}
.page-nav a{display:flex;align-items:center;justify-content:center;min-width:82px;padding:10px 20px;border-radius:999px;border:1px solid #ffffff30;background:linear-gradient(145deg,#ffffff24,#ffffff08 45%,#ffffff12);color:#aaa;backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);box-shadow:inset 0 1px 0 #ffffff48,inset 0 -1px 0 #ffffff12,0 5px 18px #0003;transition:background .25s,color .25s,transform .25s}
.page-nav a[aria-current=page]{color:#fff;background:linear-gradient(145deg,#ffffff38,#ffffff14 45%,#ffffff24)}
.page-nav a[aria-current=page]:after{display:none}
.page-nav a:hover{color:#fff;background:linear-gradient(145deg,#ffffff40,#ffffff18);transform:translateY(-1px)}
.about-active .about-view{padding-top:100px}
@media(max-width:700px){header .page-nav{top:calc(100% + 12px);gap:10px}.page-nav a{min-width:76px;padding:9px 18px}.about-active .about-view{padding-top:90px}}

header .page-nav{font-size:11px}
header .page-nav a{min-width:0;padding:9px 14px;line-height:normal}

#pageGallery.compact-gallery figure{margin:0 0 5px}
#pageGallery.compact-gallery figure:last-child{margin-bottom:0}

#pageGallery img.original-ratio{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

#pageGallery .inline-gallery-video{position:relative;width:100%;background:#000}
#pageGallery .inline-gallery-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Join embedded gallery videos directly to adjacent images. */
#pageGallery figure:has(+ .inline-gallery-video),#pageGallery .inline-gallery-video{margin-bottom:0}
#pageGallery .inline-gallery-video{margin-top:0}
#pageGallery .inline-gallery-video+figure{margin-top:0}

/* Consistent spacing between all detail gallery media. */
#detail #pageGallery>figure,#detail #pageGallery>.gallery-video{margin-top:0;margin-bottom:20px}
#detail #pageGallery>figure:last-child,#detail #pageGallery>.gallery-video:last-child{margin-bottom:0}

/* About: centered CV document, with aligned date and description columns. */
.about-view{display:block;width:calc(100% - 12%);max-width:1120px;margin-inline:auto;padding:100px 0 90px;font-size:16px;line-height:1.65}
.about-view .about-heading{position:static;margin:0 0 48px}
.about-view .about-heading h1{font-size:16px;font-weight:700;line-height:1.65;letter-spacing:0;transform:none;white-space:normal}
.about-view .cv-layout,.about-view .cv-english{width:100%;max-width:none;overflow:visible}
.about-view .cv-layout{display:flex;flex-direction:column;gap:0}
.about-view .cv-layout aside{display:block}
.about-view .cv-section,.about-view .cv-group{margin:0 0 40px}
.about-view .cv-layout h2{margin:0 0 14px;font-weight:700}
.about-view .cv-layout h2,.about-view .cv-layout h3,.about-view .cv-layout p,.about-view .cv-layout span,.about-view .cv-layout time,.about-view .cv-layout li{font-size:16px;line-height:1.65}
.about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{display:grid;grid-template-columns:175px minmax(0,1fr);column-gap:28px;row-gap:0;margin:0 0 7px;white-space:normal}
.about-view .cv-line time,.about-view .cv-experience time{white-space:nowrap;text-decoration:underline;text-decoration-color:#777;text-underline-offset:3px}
.about-view .cv-line span,.about-view .cv-experience li>div{min-width:0;overflow-wrap:break-word}
.about-view .cv-experience h3{font-weight:700}
.about-view .cv-experience h3:after{font-weight:400}
.about-view .cv-english{margin-top:12px;padding-top:44px;border-top:1px solid #303030}
@media(max-width:700px){
 .about-view{width:88%;padding-bottom:60px}
 .about-view .about-heading{margin-bottom:36px}
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:120px minmax(0,1fr);column-gap:16px;margin-bottom:10px}
 .about-view .cv-line time,.about-view .cv-experience time{white-space:normal;overflow-wrap:normal}
 .about-view .cv-section,.about-view .cv-group{margin-bottom:32px}
}
@media(max-width:440px){
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:100px minmax(0,1fr);column-gap:12px}
}

/* Two-column CV: background and practice left; exhibitions right. */
.about-view{max-width:1600px}
.about-view .cv-layout,.about-view .cv-english{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);align-items:start}
.about-view .cv-column{min-width:0}
.about-view .cv-english{grid-column:1/-1}
.about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:135px minmax(0,1fr);column-gap:20px}
@media(max-width:850px){
 .about-view .cv-layout,.about-view .cv-english{grid-template-columns:minmax(0,1fr);gap:0}
}
@media(max-width:440px){
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:100px minmax(0,1fr);column-gap:12px}
}

/* Align exhibitions with the practice section without moving the left content. */
@media(min-width:851px){
 .about-view .cv-layout{grid-template-rows:auto auto auto auto auto}
 .about-view .cv-layout>.cv-column:first-child{display:contents}
 .about-view .cv-layout>.cv-column:first-child>.about-heading{grid-column:1;grid-row:1}
 .about-view .cv-layout>.cv-column:first-child>aside{grid-column:1;grid-row:2}
 .about-view .cv-layout>.cv-column:first-child>.cv-experience{grid-column:1;grid-row:3}
 .about-view .cv-layout>.cv-column:nth-child(2){grid-column:2;grid-row:3}
 .about-view .cv-layout>.cv-english{grid-row:4;grid-template-rows:auto auto auto}
 .about-view .cv-english>.cv-column:first-child{display:contents}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(1){grid-column:1;grid-row:1}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(2){grid-column:1;grid-row:2}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(3){grid-column:1;grid-row:3}
 .about-view .cv-english>.cv-column:nth-child(2){grid-column:2;grid-row:3}
}

/* Reserved biography space, ready for three lines of copy. */
.about-view .about-biography{margin-top:32px}
.about-view .about-biography h2{font-size:16px;line-height:1.65;font-weight:700;margin:0 0 14px}
.about-view .biography-placeholder{height:79.2px}

.about-view .about-biography .biography-placeholder{height:auto;margin:0;font-size:16px;line-height:1.65;font-weight:400}

/* Give the exhibitions column a little more separation from experience. */
@media(min-width:851px){
 .about-view .cv-layout>.cv-column:nth-child(2),
 .about-view .cv-english>.cv-column:nth-child(2){margin-left:40px}
}

.about-view .biography-english{margin:0 0 48px}
@media(min-width:851px){
 .about-view .cv-layout>.cv-english{grid-template-rows:auto auto auto auto}
 .about-view .cv-english>.cv-column:first-child>.biography-english{grid-column:1;grid-row:1}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(2){grid-column:1;grid-row:2}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(3){grid-column:1;grid-row:3}
 .about-view .cv-english>.cv-column:first-child>.cv-section:nth-child(4){grid-column:1;grid-row:4}
 .about-view .cv-english>.cv-column:nth-child(2){grid-column:2;grid-row:4}
}

.about-view .cv-layout .cv-english-name{font-size:16px;font-weight:700;line-height:1.65;margin:0 0 32px}

/* Full-width, single-column CV for longer entries. */
.about-view{width:92%;max-width:none}
.about-view .cv-layout,.about-view .cv-layout>.cv-english{display:block}
.about-view .cv-layout>.cv-column:first-child,
.about-view .cv-english>.cv-column:first-child{display:block}
.about-view .cv-layout>.cv-column:nth-child(2),
.about-view .cv-english>.cv-column:nth-child(2){margin-left:0}
.about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:145px minmax(0,1fr);column-gap:24px}
@media(max-width:700px){
 .about-view{width:88%}
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:110px minmax(0,1fr);column-gap:14px}
}

#detail #pageGallery.gapless-gallery>figure{margin:0;padding:0}

/* Keep each festival selection together on one line. */
#festivalSelections>div{white-space:nowrap}

#detail #pageGallery>figure,#detail #pageGallery>.gallery-video{margin-bottom:var(--gallery-gap,20px)}
#detail #pageGallery>figure:last-child,#detail #pageGallery>.gallery-video:last-child{margin-bottom:0}

.full-film-link{display:block;width:max-content;max-width:94%;margin:32px 3% 48px;color:inherit;font-size:16px;text-decoration:underline;text-underline-offset:5px}.full-film-link:hover{opacity:.7}@media(max-width:700px){.full-film-link{margin-inline:5%;max-width:90%}}

/* Equal space above and below the full-film link. */
#detail #pageGallery:has(+ #fullFilmLink:not([hidden])){padding-bottom:0}
#detail .full-film-link{margin-block:48px}

/* Previous and next projects share a single footer rule. */
#detail .detail-project-nav{display:flex;justify-content:space-between;gap:24px;margin-inline:var(--detail-inset);border-top:1px solid #333}
#detail .detail-project-nav button{display:flex;align-items:center;gap:12px;width:auto;max-width:48%;margin:0;padding:30px 0 40px;border:0;font-size:14px;line-height:1.5;text-align:left}
#detail .detail-project-nav #nextProject{margin-left:auto;text-align:right;justify-content:flex-end}
#detail .detail-project-nav button span[aria-hidden]{font-size:10px;flex-shrink:0}

#detail .detail-project-nav #previousTitle,#detail .detail-project-nav #nextTitle{font-size:14px;font-weight:400;line-height:1.5;letter-spacing:normal}

/* Subtle opacity feedback for project navigation. */
#detail .detail-project-nav button{color:#fff;opacity:.6;transition:opacity .2s ease}
#detail .detail-project-nav button:hover,#detail .detail-project-nav button:focus-visible{opacity:1}
@media(prefers-reduced-motion:reduce){#detail .detail-project-nav button{transition:none}}

/* Keep navigation hit areas to the label, not the full footer width. */
#detail .detail-project-nav{padding-block:30px 40px}
#detail .detail-project-nav #previousProject,#detail .detail-project-nav #nextProject{width:fit-content;flex:0 1 auto;padding:0;min-width:0}

/* Remove the inherited side margin from the next-project button. */
#detail .detail-project-nav #nextProject{margin-inline:auto 0}

/* Use an invisible native cursor to avoid system-cursor flashes on composited cards. */
@media(hover:hover) and (pointer:fine){
 html.glass-pointer,html.glass-pointer *,html.glass-pointer *::before,html.glass-pointer *::after,html.glass-pointer dialog::backdrop{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E") 0 0,none!important}
 html.glass-pointer img{-webkit-user-drag:none}
}

/* Fine-tune the centered header logo. */
header .logo{position:relative;left:11px}

/* Shift page navigation down five pixels at each breakpoint. */
header .page-nav{top:calc(100% + 21px)}
@media(max-width:700px){header .page-nav{top:calc(100% + 17px)}}

/* Quiet disclosure over the main project image. */
#detailImageCaption{position:absolute;right:18px;bottom:16px;left:auto;z-index:2;max-width:calc(100% - 36px);margin:0;color:rgba(255,255,255,.45);font-size:11px;font-weight:400;line-height:1.5;text-align:right;pointer-events:none}
@media(max-width:700px){#detailImageCaption{right:12px;bottom:12px;max-width:calc(100% - 24px);font-size:9px}}

/* Chair Up: white section from the description's lower dividing line. */
#detail.light-lower-section{background:#fff}
#detail.light-lower-section .detail-body{background:#0c0c0c;overflow:hidden}
#detail.light-lower-section .detail-body>dl{position:relative;isolation:isolate;color:#171817;border-color:#d6d6d1}
#detail.light-lower-section .detail-body>dl::before{content:'';position:absolute;top:0;left:-100vw;right:-100vw;bottom:-1000px;background:#fff;z-index:-1;pointer-events:none}
#detail.light-lower-section dt{color:#777}
#detail.light-lower-section .detail-project-nav{border-color:#d6d6d1}
#detail.light-lower-section .detail-project-nav button{color:#171817}

/* Preserve the original dark cover surround above the white lower section. */
#detail.light-lower-section{background:#0c0c0c}
#detail.light-lower-section #pageGallery{background:#fff}
#detail.light-lower-section .detail-project-nav{position:relative;isolation:isolate}
#detail.light-lower-section .detail-project-nav::before{content:'';position:absolute;inset:0 calc(-1 * var(--detail-inset) / .94);background:#fff;z-index:-1;pointer-events:none}

/* English name replaces the removed biography block. */
@media(min-width:851px){
 .about-view .cv-english>.cv-column:first-child>.cv-english-name{grid-column:1;grid-row:1}
}

/* Center the About content block while retaining left-aligned text. */
.about-view{width:92%;max-width:1440px;margin-inline:auto;text-align:left}
@media(max-width:700px){.about-view{width:88%}}

/* About uses one consistent 20px type size. */
.about-view,
.about-view .about-heading h1,
.about-view .cv-layout,
.about-view .cv-layout h2,
.about-view .cv-layout h3,
.about-view .cv-layout p,
.about-view .cv-layout span,
.about-view .cv-layout time,
.about-view .cv-layout li,
.about-view .cv-layout a,
.about-view .cv-layout .cv-english-name{font-size:20px}

/* Slightly larger central identity and page controls. */
header .logo img{width:96px}
header .page-nav{font-size:12px}
header .page-nav a{padding:11px 18px}
@media(max-width:700px){header .logo img{width:78px}}

header .page-nav{font-size:14px}

/* Scale navigation around its central anchor. */
header .page-nav{font-size:18px;gap:14px;top:calc(100% + 44px)}
header .page-nav a{padding:12px 22px;line-height:1.2}
@media(max-width:700px){header .page-nav{top:calc(100% + 40px);gap:12px}}

header .logo img{width:108px}
@media(max-width:700px){header .logo img{width:88px}}

/* Lower the logo and header divider without shifting the page controls. */
header .logo{top:22px}
header{border-bottom-color:transparent}
header::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:1px;background:#292929;pointer-events:none}

/* Quiet the header while a project card is highlighted. */
header .logo,header .page-nav{transition:filter .4s ease}
.project-card-hovered header .logo,.project-card-hovered header .page-nav{filter:brightness(.38)}

/* Larger project names inside the expanding glass cursor. */
.glass-cursor span{font-size:18px}

/* Match the expanded cursor to the 18px page buttons (line height + padding + border). */
.glass-cursor.is-project{height:47.6px}

/* Project 15 opens its cursor label toward the left. */
.glass-cursor.expands-left{transform:translate(calc(10px - 100%),-50%)}

/* Lower the About content by ten pixels. */
.about-active .about-view{padding-top:110px}
@media(max-width:700px){.about-active .about-view{padding-top:100px}}

/* Consistent 14px labels across the project footer. */
.project-hover,.project-hover #hoverIndex,footer .interaction-label,footer p,footer p span,footer .footer-right{font-size:14px}

/* Larger entry hint and project footer labels. */
.intro-hint{font-size:16px}
.project-hover,.project-hover #hoverIndex,footer .interaction-label,footer p,footer p span,footer .footer-right{font-size:16px}

/* A quiet, unboxed return-to-top control below the CV. */
.about-view .about-go-to-top{display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;margin:98px auto 0;padding:8px 12px;border:0;background:none;color:#fff;opacity:.6;transition:opacity .2s ease}
.about-view .about-go-to-top:hover,.about-view .about-go-to-top:focus-visible{opacity:1}
.about-view .about-go-to-top .top-arrow{font-size:26px;line-height:1;font-weight:400}
.about-view .about-go-to-top .top-label{font-size:14px;line-height:1.4;font-weight:400}

#detailCoverPlaceholder{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#aaa;font-size:18px;font-weight:400;pointer-events:none}

/* Mobile portfolio: touch-first vertical project collection. */
@media(max-width:700px){
 body{overflow-x:hidden}
 header{height:88px;margin-inline:6%}
 header .logo img{width:88px}
 header .page-nav{top:calc(100% + 30px);gap:12px;font-size:16px}
 header .page-nav a{padding:11px 20px}
 .stage{height:calc(100svh - 88px);min-height:540px}
 .intro-card{top:46%;width:212px;height:282px}
 .intro-hint{top:calc(46% - 197px);font-size:16px}
 body:not(.mobile-project-ready) .stage #cards{visibility:hidden}
 .mobile-project-ready .stage{height:auto;min-height:0;padding:110px 6% 48px;overflow:visible}
 .mobile-project-ready #cards{position:relative;inset:auto;display:flex;flex-direction:column;gap:28px}
 .mobile-project-ready .card{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/4;border-radius:6px;transform:none;filter:none!important;box-shadow:0 8px 24px #0002;overflow:hidden;text-align:left;touch-action:pan-y}
 .mobile-project-ready .card img{display:block;width:100%;height:100%;object-fit:cover;transform:none;filter:none!important}
 .mobile-project-ready .card::after{background:linear-gradient(transparent 65%,#000b)}
 .mobile-project-ready .card .card-top{top:16px;left:16px;right:16px;font-size:11px;filter:none!important}
 .mobile-project-ready .card .card-bottom{display:block;left:18px;right:18px;bottom:20px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:0;filter:none!important}
 .mobile-project-ready .project-hover{display:none}
 body.project-card-hovered header .logo,body.project-card-hovered header .page-nav{filter:none}
 footer{padding:24px 0;min-height:0;gap:16px;align-items:center}
 footer .interaction-label,footer>p{display:none}
 footer .footer-right{width:100%;text-align:center;font-size:12px}
 .intro-active footer{display:none}
 #detail{width:100%;height:100svh;max-height:100svh;margin:0;border:0;border-radius:0}
 #detail .detail-top{height:64px;padding:0 5%;font-size:10px;letter-spacing:.03em}
 #detail #closeDetail{min-width:44px;min-height:44px;justify-content:flex-end}
 #detail .detail-cover{margin-inline:5%;border-radius:5px}
 #detail .detail-cover:has(iframe){aspect-ratio:16/9}
 #detail .detail-body.bilingual-layout{padding:28px 5% 36px;grid-template-columns:minmax(0,1fr);gap:20px}
 #detail .detail-body.bilingual-layout h2{font-size:19px;line-height:1.3}
 #detail .detail-body.bilingual-layout #detailDescription{grid-column:1;grid-row:2;font-size:16px;line-height:1.8;margin:0}
 #detail .detail-body.bilingual-layout #detailDescriptionEn{grid-column:1;grid-row:3;font-size:16px;line-height:1.8;margin:0}
 #detail .detail-body.bilingual-layout>dl{grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding-top:22px}
 #detail dl>div{min-width:0}
 #detail dd{max-width:none;font-size:13px;overflow-wrap:anywhere}
 #detail #festivalSelections>div{white-space:normal}
 #detail #pageGallery>figure[style*="width"]{width:100%!important}
 #detail .detail-project-nav{gap:20px;padding-block:24px 30px}
 #detail .detail-project-nav #previousTitle,#detail .detail-project-nav #nextTitle{font-size:13px}
 #detail .detail-project-nav button{gap:8px}
 .about-active .about-view{width:88%;padding-top:115px}
 .about-view,.about-view .about-heading h1,.about-view .cv-layout,.about-view .cv-layout h2,.about-view .cv-layout h3,.about-view .cv-layout p,.about-view .cv-layout span,.about-view .cv-layout time,.about-view .cv-layout li,.about-view .cv-layout a,.about-view .cv-layout .cv-english-name{font-size:16px}
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:minmax(0,1fr);gap:4px;margin-bottom:18px}
 .about-view .cv-line time,.about-view .cv-experience time{color:#888;text-decoration:none;white-space:normal}
}

/* Mobile projects in two columns. */
@media(max-width:700px){
 .mobile-project-ready #cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .mobile-project-ready .card .card-top{top:10px;left:10px;right:10px;font-size:8px;gap:6px}
 .mobile-project-ready .card .card-top>span:first-child{min-width:0;max-width:calc(100% - 18px);line-height:1.3}
 .mobile-project-ready .card .card-bottom{left:10px;right:10px;bottom:12px;font-size:15px;line-height:1.3;overflow-wrap:break-word}
}

/* Keep the intro logo visible on mobile compositing layers. */
@media(max-width:700px){
 .intro-card .intro-logo{mix-blend-mode:difference;opacity:1;visibility:visible;filter:none;transform:none;width:52%;height:auto;flex-shrink:0}
 .intro-card{transform-style:flat}
 .intro-card .intro-pigment{backface-visibility:hidden;-webkit-backface-visibility:hidden}
}

/* Compact mobile cover and a visible blurred stack during the upward gesture. */
@media(max-width:700px){
 .intro-card{width:174px;height:232px}
 .intro-hint{top:calc(46% - 168px)}
 body:not(.mobile-project-ready) .stage #cards{visibility:visible}
 body:not(.mobile-project-ready) .stage .card{width:172px;aspect-ratio:3/4;height:auto}
}

@media(max-width:700px){.mobile-project-ready .card{box-shadow:0 3px 10px #00000014}}

/* Composite the mobile logo with its pigment in one surface, including before first touch. */
@media(max-width:700px){.intro-card.intro-logo-painted .intro-pigment{filter:none}.intro-card.intro-logo-painted .intro-logo{visibility:hidden}}

/* Enlarge the mobile project header logo by ten percent. */


/* Tighten the mobile project logo spacing by five pixels on each side. */


/* About: editorial profile header and chronological CV rows. */
.about-view{max-width:1120px;width:88%;}
.about-view .about-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:48px;position:static;margin:0 0 48px;align-items:start;}
.about-view .about-heading h1{font-size:20px;line-height:1.6;margin:0 0 8px;font-weight:700;transform:none;}
.about-view .about-heading h1 span{font-size:inherit;font-weight:inherit;margin:0;}
.about-view .about-specialties{font-size:16px;line-height:1.7;margin:0;color:#bbb;}
.about-view .about-contacts{margin:0;font-size:16px;line-height:1.65;}
.about-view .about-contacts>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;}
.about-view .about-contacts dt,.about-view .about-contacts dd{margin:0;}
.about-view .about-contacts a,.about-view .about-contacts span{font-size:16px;line-height:1.65;overflow-wrap:anywhere;}
.about-view .about-contacts a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#777;transition:color .2s;}
.about-view .about-contacts a:hover{color:#fff;}
.about-view .cv-section,.about-view .cv-group{border-top:1px solid #ffffff26;padding-top:15px;margin-bottom:38px;}
.about-view .cv-layout h2{font-weight:500;margin-bottom:20px;}
.about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:165px minmax(0,1fr);column-gap:28px;margin-bottom:12px;}
.about-view .cv-line time,.about-view .cv-experience time{text-decoration:none;color:#aaa;}
.about-view .cv-english{border-top:0;margin-top:56px;padding-top:0;}
@media(max-width:700px){
 .about-view .about-heading{grid-template-columns:1fr;gap:24px;margin-bottom:36px;}
 .about-view .about-heading h1{font-size:20px;}
 .about-view .about-specialties{font-size:15px;}
 .about-view .about-contacts{font-size:15px;}
 .about-view .about-contacts a,.about-view .about-contacts span{font-size:15px;}
 .about-view .cv-line,.about-view .cv-experience li,.about-view .cv-english .cv-line{grid-template-columns:100px minmax(0,1fr);column-gap:14px;margin-bottom:16px;}
 .about-view .cv-section,.about-view .cv-group{padding-top:14px;margin-bottom:30px;}
}
.about-view .about-contacts{display:block;border:0;padding:0;}
.about-view .about-contacts dt,.about-view .about-contacts dd{font-size:inherit;line-height:1.65;letter-spacing:0;color:inherit;max-width:none;}
.about-view .cv-layout .about-specialties{font-size:16px;}
@media(max-width:700px){.about-view .cv-layout .about-specialties{font-size:15px;}}

/* Separate the activity and role in both language versions. */
.about-view .cv-experience h3:after,.about-view .cv-organization:after{content:' | ';font-weight:400;color:#999;}
.about-view .cv-experience .cv-activity,.about-view .cv-entry .cv-activity{display:inline;}
.about-view .cv-experience .cv-role,.about-view .cv-entry .cv-role{display:block;margin:3px 0 0;color:#aaa;font-weight:400;}
.about-view .cv-entry .cv-organization{font-weight:700;}
/* Mobile CV: organization, activity, and role on separate lines. */
@media(max-width:700px){
 .about-view .cv-experience h3:after,.about-view .cv-organization:after{content:none;}
 .about-view .cv-experience h3,.about-view .cv-entry .cv-organization{display:block;}
 .about-view .cv-experience .cv-activity,.about-view .cv-entry .cv-activity{display:block;margin:3px 0 0;}
}
/* Mobile About body typography. */
@media(max-width:700px){
 .about-view,.about-view .cv-layout,.about-view .cv-layout h2,.about-view .cv-layout h3,.about-view .cv-layout p,.about-view .cv-layout span,.about-view .cv-layout time,.about-view .cv-layout li,.about-view .cv-layout a,.about-view .cv-layout .cv-english-name{font-size:15px;}
 .about-view .about-heading h1,.about-view .about-heading h1 span{font-size:20px;}
}

.about-view .mobile-line{display:none;}
@media(max-width:700px){
 .about-view .desktop-inline{display:none;}
 .about-view .mobile-line,.about-view .mobile-break{display:block;}
 .about-view .cv-experience h3.cv-ondream{letter-spacing:-.07em;white-space:normal;}

}

/* Give the mobile exhibition title enough width for one line. */
@media(max-width:700px){

 .about-view .cv-experience .cv-coex-title{letter-spacing:-.055em;white-space:normal;}
}
/* Desktop About: more breathing room below the navigation buttons. */
@media(min-width:701px){
 .about-active .about-view{padding-top:140px;}
}

@media(min-width:701px){.about-view .cv-education .cv-line{grid-template-columns:210px minmax(0,1fr);}}

/* Mobile gallery images meet edge to edge without overlap. */
@media(max-width:700px){
 #detail #pageGallery>.overlapping-gallery-image{margin-top:0!important;}
}

/* Keep date ranges within their own column on narrow screens. */
@media(max-width:700px){
 .about-view .cv-line time,.about-view .cv-experience time{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;}
 .about-view time .cv-date-end{display:block;}
}

.about-view .cv-layout .about-specialties span{font-size:inherit;color:inherit;line-height:inherit;}
@media(max-width:700px){
 .about-view .specialties-first,.about-view .specialties-last,.about-view .affiliation-last{white-space:nowrap;}
 .about-view .about-specialties .specialties-first{letter-spacing:-.025em;}
}
/* Compact the mobile specialty line using letter spacing only. */
@media(max-width:700px){
 .about-view .cv-layout .about-specialties{white-space:nowrap;letter-spacing:-.065em;}
 .about-view .about-specialties .specialties-first,.about-view .about-specialties .specialties-last{display:inline;letter-spacing:inherit;}
 .about-view .about-specialties .desktop-inline{display:inline;letter-spacing:inherit;}
}

/* Workflow archive: quiet landscape previews, distinct from the project stack. */
.workflow-view{width:88%;max-width:1440px;margin:0 auto;padding:140px 0 65px;}
.workflow-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:38px;}
.workflow-eyebrow{font-size:11px;letter-spacing:.13em;color:#999;margin:0 0 12px;}
.workflow-heading h1{font-size:32px;font-weight:500;letter-spacing:-.035em;margin:0;}
.workflow-heading>p{font-size:15px;line-height:1.6;color:#aaa;margin:0;word-break:keep-all;}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px;}
.workflow-image{aspect-ratio:16/10;position:relative;border:0;border-radius:12px;background:linear-gradient(145deg,#ffffff08,#ffffff02);transition:background .25s;}
.workflow-card:hover .workflow-image{background:#ffffff09;}
.workflow-number{position:absolute;top:18px;left:20px;font-size:12px;color:#aaa;}
.workflow-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.04em;color:#ffffff40;}
.workflow-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:15px;}
.workflow-caption h2{font-size:16px;font-weight:400;margin:0;color:#ddd;}
.workflow-caption>span{font-size:12px;color:#888;}
.workflow-footnote{font-size:13px;color:#888;text-align:center;margin:56px 0 0;}
.workflow-active footer .interaction-label,.workflow-active footer>p{display:none;}
.workflow-active footer{justify-content:flex-end;}
@media(min-width:701px) and (max-width:1000px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){
 .workflow-view{padding-top:115px;padding-bottom:45px;}
 .workflow-heading{display:block;margin-bottom:28px;}
 .workflow-heading h1{font-size:26px;}
 .workflow-heading>p{margin-top:14px;font-size:14px;}
 .workflow-grid{grid-template-columns:1fr;gap:28px;}
 .workflow-caption h2{font-size:15px;}
 .page-nav{gap:10px;white-space:nowrap;}
}

/* Use the same darker pigment field across every page. */
#pigment-background{opacity:.34;}

.workflow-transition{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;}
.workflow-flight-card{overflow:hidden;border-radius:12px;background:#202020;box-shadow:0 12px 30px #0004;}
.workflow-flight-card img{width:100%;height:100%;object-fit:cover;}
.workflow-flight-card .card-top,.workflow-flight-card .card-bottom{display:none;}
.workflow-flight-cover{position:fixed;display:grid;place-items:center;background:#27262b;border:1px solid #ffffff30;border-radius:12px;color:#eee;font-size:32px;letter-spacing:-.04em;transform:translateY(-150vh);box-shadow:0 16px 40px #0005;}

.workflow-name{position:absolute;top:18px;right:20px;font-size:12px;color:#bbb;}
.workflow-flight-cover{z-index:100;}

/* Archive cards scroll behind the fixed frosted footer. */
:is(.workflow-active,.about-active) footer{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:20px 4%;min-height:96px;justify-content:space-between;border-top:0;background:rgba(8,8,8,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
:is(.workflow-active,.about-active) footer::before{content:'';position:absolute;top:0;left:4%;right:4%;height:1px;background:#ffffff18;}
:is(.workflow-active,.about-active) footer .interaction-label,:is(.workflow-active,.about-active) footer>p{display:block;}
.workflow-view{padding-bottom:150px;}
@media(max-width:700px){:is(.workflow-active,.about-active) footer{padding:18px 6%;min-height:108px;}:is(.workflow-active,.about-active) footer::before{left:6%;right:6%;}.workflow-view{padding-bottom:160px;}}

/* Fixed frosted chrome for both scrolling pages. Preserve the header's layout space. */
:is(.workflow-active,.about-active) header{position:fixed;top:0;left:0;right:0;z-index:40;}
:is(.workflow-active,.about-active) header::before{content:'';position:absolute;top:0;left:calc(-100vw * .04);right:calc(-100vw * .04);height:200px;z-index:-1;pointer-events:none;background:rgba(8,8,8,.32);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
:is(.workflow-active,.about-active) main{padding-top:88px;}
.about-active .about-view{padding-bottom:150px;}
@media(max-width:700px){
 :is(.workflow-active,.about-active) header::before{left:calc(-100vw * .06);right:calc(-100vw * .06);height:185px;}
 .about-active .about-view{padding-bottom:160px;}
}

/* Frost only the logo band; the fixed navigation keeps its own glass. */
:is(.workflow-active,.about-active) header::before{height:100%;}
header::after,footer::before{display:none!important;}
header,footer{border-top:0;border-bottom:0;}

/* Shared fixed chrome: blur the content without a dark overlay. */
body header{position:fixed;top:0;left:0;right:0;z-index:40;}
body header::before{content:'';position:absolute;top:0;left:-4vw;right:-4vw;height:100%;z-index:-1;pointer-events:none;background:transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
body main{padding-top:88px;}
body footer{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:20px 4%;min-height:96px;justify-content:space-between;border:0;background:transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
:is(.workflow-active,.about-active) header::before,:is(.workflow-active,.about-active) footer{background:transparent;}
@media(max-width:700px){body header::before{left:-6vw;right:-6vw;}body footer{padding:18px 6%;min-height:108px;}body.mobile-project-ready:not(.workflow-active):not(.about-active) .stage{padding-bottom:140px;}}

/* Remove the bottom information band throughout the portfolio. */
body footer,.project-hover{display:none!important;}
.workflow-view,.about-active .about-view{padding-bottom:60px;}
@media(max-width:700px){.workflow-view,.about-active .about-view{padding-bottom:45px;}body.mobile-project-ready:not(.workflow-active):not(.about-active) .stage{padding-bottom:40px;}}

@media(min-width:701px){.intro-card{top:calc(48% + 30px);}.intro-hint{top:calc(48% - clamp(190px,19vw,285px)*2/3 - 34px);}}
.about-unfolding{position:relative;z-index:45;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;}

.workflow-flight-cover{overflow:hidden;isolation:isolate;background:#182c35;border:1px solid #333;border-radius:6px;box-shadow:0 5px 14px #0002;}
.transition-pigment{position:absolute;inset:-5%;width:110%;height:110%;pointer-events:none;filter:blur(5px) brightness(2.5) saturate(1.7);z-index:0;}
.transition-title{position:relative;z-index:1;color:#fff;mix-blend-mode:screen;opacity:.8;}

@media(min-width:701px){header .page-nav{font-size:16px;}header .page-nav a{padding:10px 20px;}}

.workflow-compare{--split:50%;overflow:hidden;touch-action:pan-y;}
.workflow-compare>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;}
.workflow-compare .compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);}
.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:#ffffffb3;pointer-events:none;}
.compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff80;border-radius:50%;background:#0003;backdrop-filter:blur(8px);color:#fff;font-size:16px;}
.workflow-compare .workflow-number,.workflow-compare .workflow-name{z-index:2;color:#fff;text-shadow:0 1px 6px #000;}
.workflow-detail{background:#0c0c0c;color:#ddd;}
.workflow-detail .detail-top{background:#0c0c0cf2;backdrop-filter:blur(15px);z-index:5;}
#closeWorkflowDetail{font-size:28px;line-height:1;padding:8px;}
.workflow-detail-hero{display:block;width:90%;height:auto;margin:0 auto;border-radius:6px;}
.workflow-detail-content{width:90%;max-width:1200px;margin:48px auto 80px;font-size:16px;line-height:1.85;word-break:keep-all;}
.workflow-detail-content section{padding:32px 0;border-bottom:1px solid #ffffff20;}
.workflow-detail-content section:last-child{border:0;}
.workflow-detail-content h1{font-size:38px;font-weight:500;letter-spacing:-.04em;margin:0;line-height:1.2;}
.workflow-detail-content h2{font-size:18px;font-weight:600;margin:0 0 24px;}
.workflow-detail-content h3{font-size:17px;margin:0 0 6px;}
.workflow-detail-content p{margin:0 0 14px;color:#aaa;}
.workflow-detail-content p:last-child{margin-bottom:0;}
.workflow-introduction{display:grid;grid-template-columns:1fr 2fr;gap:48px;}
.workflow-process{list-style:none;display:flex;flex-wrap:wrap;gap:14px 22px;padding:0;margin:0;color:#ccc;}
.workflow-process li:not(:last-child)::after{content:'→';margin-left:22px;color:#777;}
.workflow-table-wrap{overflow-x:auto;}
.workflow-detail table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;}
.workflow-detail th,.workflow-detail td{padding:16px 20px 16px 0;border-bottom:1px solid #ffffff15;vertical-align:top;}
.workflow-detail th{color:#888;font-weight:400;}
.workflow-detail td:first-child{white-space:nowrap;color:#ddd;}
.workflow-detail td{color:#aaa;}
.workflow-detail a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#555;}
.workflow-detail a:hover{color:#fff;}
.workflow-models{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.workflow-models code{display:block;color:#888;font-size:13px;margin-bottom:16px;overflow-wrap:anywhere;}
@media(max-width:700px){.workflow-detail-content{font-size:15px;margin-top:20px;}.workflow-introduction,.workflow-models{grid-template-columns:1fr;gap:24px;}.workflow-detail-content h1{font-size:28px;}.workflow-detail-content section{padding:26px 0;}.workflow-detail table{min-width:560px;}.workflow-process{display:block;}.workflow-process li{margin:8px 0;}.workflow-process li:not(:last-child)::after{content:'↓';margin-left:12px;}}

.workflow-detail a.workflow-download{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;margin-top:24px;padding:13px 20px;border:1px solid #ffffff35;border-radius:999px;background:linear-gradient(145deg,#ffffff20,#ffffff08);color:#eee;font-size:15px;text-decoration:none;transition:background .2s,border-color .2s;}
.workflow-detail a.workflow-download:hover{background:#ffffff20;border-color:#ffffff60;}
.workflow-detail-content .workflow-download-note{font-size:12px;color:#888;margin-top:12px;}

.workflow-detail-content .workflow-introduction p,.workflow-detail-content .workflow-features p{line-height:1.6;margin-bottom:6px;}
.workflow-detail-content .workflow-introduction p:last-child,.workflow-detail-content .workflow-features p:last-child{margin-bottom:0;}

.close-workflow-detail{font-size:28px;line-height:1;padding:8px;}.workflow-name{max-width:calc(100% - 70px);text-align:right;}

.workflow-detail-content .workflow-features p+h3{margin-top:24px;}

.workflow-motion{overflow:hidden;}
.workflow-hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.workflow-motion .workflow-number,.workflow-motion .workflow-name{z-index:2;color:#fff;text-shadow:0 1px 6px #000;}
.workflow-numbered-process{display:block;list-style:decimal;padding-left:22px;}
.workflow-numbered-process li{margin:5px 0;}
.workflow-numbered-process li:not(:last-child)::after{content:none;}
.workflow-source-list{padding-left:20px;margin:12px 0 20px;font-size:15px;}

.workflow-model-description p+h3,.workflow-model-description ul+h3{margin-top:28px;}.workflow-detail-content .workflow-table-wrap{margin-bottom:18px;}

/* Reserved AI Video project card. */
.placeholder-mark.placeholder-title{font-size:24px;letter-spacing:-.02em;color:#aaa;}

.empty-project-detail .detail-body dl{display:none;}

/* Compact navigation for mobile screens. */
@media(max-width:700px){
 header .page-nav{font-size:14px;gap:8px;}
 header .page-nav a{min-width:0;padding:9px 14px;line-height:1.2;}
}

/* Softer shadows across project, intro and transition cards. */
.card,.intro-card,.workflow-image,.workflow-flight-card,.workflow-flight-cover{box-shadow:0 3px 10px #00000018;}
@media(max-width:700px){.mobile-project-ready .card{box-shadow:0 2px 6px #0000000c;}}

/* Keep the intro logo blended, with softer contrast. */
.intro-card .intro-logo{opacity:.6;}

/* Blend the intro logo into the warm palette without complementary cyan. */
.intro-card .intro-logo{mix-blend-mode:soft-light;opacity:.6;}

/* Black canvas at rest; pigment is revealed by local movement. */
html,body{background:#000;}
.intro-card .intro-logo{opacity:1;}

/* Match the exposed viewport below the content to the black background. */
:root{background:#000;}
body{min-height:100svh;}

/* Brighter warm-white intro logo, preserving blended color. */
.intro-card .intro-logo{mix-blend-mode:screen;opacity:.8;}

/* Let the intro travel through the viewport edge instead of the stage boundary. */
.stage:has(.intro-card:not([hidden])){overflow:visible;}
body:not(.about-active):not(.workflow-active):has(.intro-card:not([hidden])){overflow:hidden;}

/* Lower the project card collection as a group. */
#cards{translate:0 8px;}

@media(max-width:700px){#cards{translate:0 0;}header .logo{top:19px;}}