: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}.header-note{font-size:12px;letter-spacing:.09em}#viewToggle{font-size:14px;display:flex;gap:20px;align-items:center}.grid-icon{font-size:25px}.stage{height:calc(100svh - 196px);min-height:580px;position:relative;overflow:hidden;isolation:isolate}.hero-title{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;z-index:5;pointer-events:none}.hero-title p{font-size:11px;letter-spacing:.16em;margin:0 0 22px}.hero-title h1{font-size:clamp(60px,8.8vw,144px);font-weight:800;line-height:.87;letter-spacing:-.075em;margin:0}.asterisk{font-size:.5em;vertical-align:top;letter-spacing:-.05em;position:absolute;right:-.53em;top:1.63em;color:#da4b2a}.title-caption{display:block;margin-top:26px;font-size:13px;color:#74746e;letter-spacing:-.01em}#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}#rotation{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.05em;padding:10px 0}.rotation-icon{font-size:24px;line-height:1;animation:spin 12s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.index-view{padding:65px 4% 80px}.index-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.index-heading h2{font-size:64px;font-weight:600;letter-spacing:-.07em;margin:0}.index-heading h2 span{font-size:16px;vertical-align:top;display:inline-block;margin:10px}.index-heading p{font-size:14px;color:#777}#projectGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 25px}.grid-card{text-align:left;padding:0}.grid-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;transition:filter .4s}.grid-card:hover img{filter:brightness(.85)}.grid-card div{display:flex;justify-content:space-between;margin-top:14px;font-size:18px;letter-spacing:-.03em}.grid-card small{font-size:12px;color:#777}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%}.header-note{display:none}.stage{height:calc(100svh - 186px);min-height:550px}.hero-title h1{font-size:14vw}.hero-title p{font-size:9px;margin-bottom:16px}.title-caption{font-size:11px;margin-top:18px}.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}.asterisk{right:-.4em}.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,#rotation{font-size:9px}.index-view{padding:45px 6%}.index-heading{display:block}.index-heading h2{font-size:44px}.index-heading p{font-size:12px}#projectGrid{grid-template-columns:repeat(2,1fr);gap:30px 15px}.grid-card div{font-size:14px;display:block}.grid-card small{display:block;margin-top:5px}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-note{color:#858585}header .logo{letter-spacing:-3px}.stage{height:calc(100svh - 180px);min-height:620px;background:#080808}.hero-title{top:48%;z-index:40;mix-blend-mode:difference;color:#fff}.hero-title h1{font-size:clamp(65px,8.5vw,136px);font-weight:700;letter-spacing:-.065em;line-height:.92}.hero-title p{font-size:11px;letter-spacing:.19em;margin-bottom:25px}.title-caption{color:#fff;font-size:10px;letter-spacing:.2em;margin-top:25px}.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}.stack-nav{position:absolute;z-index:41;bottom:65px;left:50%;transform:translateX(-50%);display:flex;gap:24px;align-items:center;font-size:11px;white-space:nowrap}.stack-nav button{padding:9px 14px;border:1px solid #3a3a3a;border-radius:25px;background:#0b0b0bbb;backdrop-filter:blur(12px)}.stack-nav button:hover{background:#eee;color:#111}.stack-nav span{color:#999;font-variant-numeric:tabular-nums}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}.index-heading p,.grid-card small{color:#999}.grid-card img{aspect-ratio:1}.grid-card div{gap:10px}.grid-card small{font-size:10px;flex-shrink:0}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}.hero-title h1{font-size:13.8vw}.hero-title p{font-size:8px;letter-spacing:.13em}.title-caption{font-size:8px;letter-spacing:.1em}.card{width:195px;top:46%;border-radius:10px}.card .card-bottom{font-size:13px}.card .card-top{font-size:7px}.stack-nav{bottom:59px;gap:18px}.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}.grid-card small{font-size:9px}.index-heading h2{font-size:40px}.footer-right,#rotation{font-size:9px}}

/* Title appears only as the travelling rotation reaches the middle cards. */
.hero-title{opacity:0;will-change:opacity,transform}.hero-title h1{font-size:clamp(42px,5.1vw,82px);line-height:.96;letter-spacing:-.06em}.hero-title p{font-size:9px;margin-bottom:17px}.title-caption{font-size:9px;margin-top:17px}@media(max-width:700px){.hero-title h1{font-size:8.5vw}.hero-title p{font-size:8px;margin-bottom:13px}.title-caption{font-size:8px;margin-top:13px}}@media(prefers-reduced-motion:reduce){.hero-title{opacity:1}}

/* Portrait cards span almost the full viewport width. */
.card{width:clamp(190px,19vw,285px);height:auto;aspect-ratio:3/4}.grid-card img{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}.grid-placeholder{display:grid;place-items:center;aspect-ratio:3/4;background:#202020;border:1px solid #444;border-radius:8px;color:#999;font-size:14px}.interaction-label{font-size:11px;letter-spacing:.05em;color:#999}.grid-card[aria-disabled=true]{cursor:default}

.card .card-click{position:absolute;top:38px;right:14px;z-index:3;border-radius:30px;padding:7px 12px;background:#f3f3ef;color:#111;font-size:12px;font-weight:500;letter-spacing:.02em;pointer-events:none;opacity:var(--hover-lift,0);transform:translateY(calc((1 - var(--hover-lift,0))*7px))}@media(max-width:700px){.card .card-click{top:29px;right:9px;padding:5px 9px;font-size:11px}}

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 .stack-nav,.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,.stack-nav,.project-hover{transition:opacity .65s ease}.intro-active header,.intro-active footer,.intro-active .stack-nav,.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}
.stack-nav button{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff30;background:linear-gradient(145deg,#ffffff24,#ffffff08 45%,#ffffff12);color:#f4f4f4;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,box-shadow .25s,transform .25s}
.stack-nav button::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#ffffff18 42%,transparent 65%);pointer-events:none}
.stack-nav button:hover{background:linear-gradient(145deg,#ffffff38,#ffffff12 45%,#ffffff23);color:#fff;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff20,0 7px 22px #0004;transform:translateY(-1px)}
.stack-nav button:active{transform:translateY(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-pigment{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask:url('assets/WAN%20LOGO.png') center/contain no-repeat;-webkit-mask:url('assets/WAN%20LOGO.png') center/contain no-repeat;filter:brightness(3) saturate(2) invert(1)}

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:6px}

/* 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:5px}
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 14 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}