/* Final reading scale, earlier project timeline and the film covering the last card. */
.topbar .brand .logo-horizontal{width:126px}
.footer-mark .logo-horizontal{width:135px}
.resume-page .brand .logo-horizontal{width:120px}
.font-header .font-brand{width:91.2px}
.hero-description,.pov-description,.journey-intro>p,.tile-wall-heading>p:last-child,
.discover-heading .discover-subtitle,.career-heading>p,.lab-heading>p,.lab-intro,
.about-copy>p:not(.eyebrow):not(.profile-affiliation),.project-subtitle,.project-copy,.project-genre,
.process-list li>p:not(.eyebrow){color:var(--ink)}
.practice .special-description p:not(.eyebrow){color:#f6f1e8}
.resume-page{background:#fff}
.resume-page .resume-document{box-shadow:none;border-color:transparent;margin-bottom:0}
@media(min-width:761px){
 .motion-layout #yigo{position:relative;z-index:7;margin-top:-100svh;background:transparent}
 .motion-layout #yigo .special-description{background:#151c29}
 .motion-layout .tile-board{max-width:calc(100% - 155px)}
 .motion-layout .tile-wall-heading{width:calc(100% - 155px);align-items:flex-start}
 .motion-layout .tile-wall-heading>p:last-child{max-width:42%;flex:0 1 auto;word-break:keep-all}
}
@media(min-width:761px) and (max-width:1100px){.topbar .brand .logo-horizontal{width:111px}}
@media(max-width:760px){
 .topbar .brand .logo-stacked{width:50.4px}
 .footer-mark .logo-stacked{width:66px}
 .resume-page .brand .logo-stacked{width:48px}
 .font-header .font-brand{width:78px}
 .hero{min-height:990px}
}
@media print{.resume-page .resume-document{border:0;box-shadow:none}}

/* Korean signature and an uninterrupted journey between resume and scenes. */
.topbar .brand{display:inline-flex;align-items:center;gap:12px;line-height:1.6}
.topbar .site-wordmark{font-family:'Manrope','Noto Sans KR',sans-serif;font-size:var(--korean-signature-size);font-weight:650;line-height:1.6;letter-spacing:var(--korean-signature-tracking);color:var(--ink);white-space:nowrap}
.resume-page .resume-topbar{background:#fff;border-bottom-color:#e6e6e6}
.resume-page .site-wordmark.brand{font-size:18.9px;line-height:1.6;letter-spacing:0;font-weight:650;color:var(--ink);white-space:nowrap}
.resume-page .resume-document{padding-bottom:100px}
.resume-modal{width:min(1120px,94vw);height:92svh;max-height:calc(100svh - 24px);max-width:94vw;margin:auto;padding:0;border:0;border-radius:10px;background:white;color:var(--ink);box-shadow:0 20px 90px #0004;overflow:hidden}
.resume-modal::backdrop{background:#18252580;backdrop-filter:blur(12px)}
.resume-modal[open]{display:flex;flex-direction:column;animation:resume-appear .24s ease-out}
.resume-modal-bar{height:44px;min-height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid #e6e6e6;font-size:12px;background:white}
.resume-modal-bar button{border:0;background:transparent;padding:9px 8px;font:inherit;color:inherit;cursor:pointer}
.resume-modal iframe{width:100%;flex:1;min-height:0;border:0;background:white}
.reading-resume{overflow:hidden}
@keyframes resume-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){.resume-page .resume-document{padding-bottom:80px}.resume-page .site-wordmark.brand{font-size:16.8px}.resume-modal{width:96vw;max-width:96vw;height:96svh;border-radius:6px}}
@media(prefers-reduced-motion:reduce){.resume-modal[open]{animation:none}}

:root{--korean-signature-size:16px;--korean-signature-tracking:-.04em}
.resume-page .site-wordmark.brand{font-family:'Manrope','Noto Sans KR',sans-serif;font-size:var(--korean-signature-size);font-weight:650;line-height:1.6;letter-spacing:var(--korean-signature-tracking)}
.dark-chapter .topbar .site-wordmark{color:var(--paper)}
.lab-intro,.about .profile-affiliation,.career-art figcaption span:last-child,#motion-toggle{letter-spacing:var(--tracking-ko-body)}
.workflow-evidence{letter-spacing:var(--tracking-meta-tight)!important}

/* Separate the Korean signature and the centered English wordmark in the site header. */
.topbar .brand{position:static;display:block;flex:0 0 0;width:0;height:0;overflow:visible;line-height:0}
.topbar .brand .logo-horizontal{position:absolute;top:50%;left:50%;display:block;width:126px;transform:translate(-50%,-50%)}
.topbar .brand .logo-stacked{display:none}
.topbar .site-wordmark{position:absolute;top:50%;left:var(--pad);transform:translateY(-50%);z-index:1}
@media(max-width:760px){.topbar .brand .logo-horizontal{width:68px}}

/* Keep both Marakun titles on one line with a subtly lighter suffix. */
.project-card:nth-child(-n+2) .project-caption h3{white-space:nowrap}
.project-card:nth-child(-n+2) .project-title-suffix{font-size:.85em;font-weight:600;letter-spacing:-.045em;white-space:nowrap}
#career-project-1 .career-project-visual{aspect-ratio:16/9}
#career-project-2 .career-project-visual{aspect-ratio:16/9}
@media(max-width:760px){.project-card:nth-child(-n+2) .project-caption h3{font-size:21px}}

#career-project-3 .career-project-visual,#career-project-4 .career-project-visual{aspect-ratio:16/9}
#career-project-3 .career-project-visual img,#career-project-4 .career-project-visual img{transform:none;object-fit:cover;object-position:center}

#career-project-5 .career-project-visual{aspect-ratio:16/9}
#career-project-5 .career-project-visual img{transform:none;object-fit:cover;object-position:center}


#career-project-6 .career-project-visual{aspect-ratio:16/9}
#career-project-6 .career-project-visual img{transform:none;object-fit:cover;object-position:center}

#career-project-5 .career-project-visual{aspect-ratio:16/9}
#career-project-5 .career-project-visual img{transform:none;object-fit:cover;object-position:center}
#career-project-6 .career-project-visual{aspect-ratio:16/9}
#career-project-6 .career-project-visual img{transform:none;object-fit:cover;object-position:center}
#career-project-8 .career-project-visual{aspect-ratio:16/9}
#career-project-8 .career-project-visual img{transform:none;object-fit:cover;object-position:center}
#career-project-10 .career-project-visual{aspect-ratio:16/9}
#career-project-10 .career-project-visual img{transform:none;object-fit:cover;object-position:center}
/* Point of View: full-screen film, then a scroll-paced reflection. */
.pov-film-story{position:relative;padding:48px 0 12px;max-width:1000px}
.pov-film-story .pov-film-title{display:block;position:static;margin:0;font-size:clamp(30px,4vw,64px)!important;line-height:1.3;letter-spacing:var(--tracking-heading,-.045em)!important;font-weight:600;color:var(--ink);opacity:1;transform:none;text-shadow:none}
.pov-film-reflection{max-width:760px;margin:28px 0 0;font-size:clamp(16px,1.5vw,22px);line-height:1.85;letter-spacing:-.025em;text-wrap:pretty}
.pov-motion .perspective{display:block;height:350svh;min-height:0}
.pov-motion .pov-pin{position:sticky;top:0;height:100svh;min-height:0;padding:clamp(100px,14vh,145px) var(--pad) 60px var(--pad-left);overflow:hidden}
.pov-motion .pov-copy{opacity:var(--pov-text,1);transform:translateY(calc(var(--pov-shift,0) * -55px))}
.pov-motion .pov-pin>.film-frame{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;background:var(--primary);clip-path:inset(var(--pov-inset-y,69%) var(--pov-inset-x,44%) var(--pov-bottom,9%) round var(--pov-radius,56px));will-change:clip-path}
.pov-motion #pov-film video{opacity:var(--pov-video,0)}
.pov-motion #pov-film:after{inset:0;background:linear-gradient(110deg,#071015e6,#07101555);opacity:var(--pov-dim,.18)}
.pov-motion .pov-film-story{position:absolute;z-index:3;inset:0;max-width:none;padding:80px var(--pad) 80px var(--pad-left);display:flex;flex-direction:column;justify-content:center;pointer-events:none;color:#fff}
.pov-motion .pov-film-story .pov-film-title{color:#fff;opacity:var(--pov-title,0);transform:translateY(calc((1 - var(--pov-title,0)) * 32px));font-size:clamp(34px,4.5vw,76px)!important;line-height:1.3}
.pov-motion .pov-film-reflection{opacity:var(--pov-reflection,0);transform:translateY(calc((1 - var(--pov-reflection,0)) * 36px));color:#fff;text-shadow:0 2px 18px #0005}
.pov-motion #pov-film .film-toggle,.pov-motion #pov-film .film-caption{opacity:var(--pov-controls,0)}
@media(max-width:760px){
 .pov-motion .perspective{height:390svh}
 .pov-motion .pov-pin{padding-top:100px}
 .pov-motion .pov-film-story{padding:70px var(--pad) 95px var(--pad-left)}
 .pov-motion .pov-film-story .pov-film-title{font-size:clamp(25px,5.8vw,40px)!important}
 .pov-motion .pov-film-reflection{font-size:clamp(15px,3.7vw,19px);line-height:1.85;margin-top:26px}
}
@media print{.pov-motion .perspective{height:auto}.pov-motion .pov-pin{position:relative;height:auto}.pov-film-story{position:static!important;color:#000!important}.pov-film-story>*{opacity:1!important;transform:none!important;color:#000!important}}
/* Keep only the video pause/play glyph during the immersive film moment. */
.pov-film-active .world-map,.pov-film-active .scene-controls{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
.pov-motion #pov-film .film-toggle{top:28px;right:var(--pad);bottom:auto;border:0;background:transparent;backdrop-filter:none;box-shadow:none;padding:10px;width:44px;height:44px;min-height:44px;justify-content:center;font-size:0}
.pov-motion #pov-film .film-toggle>span:first-child{font-size:24px;line-height:1;color:#fff;text-shadow:0 1px 10px #0008}
.pov-motion #pov-film .film-toggle .film-toggle-label{display:none}
.pov-motion #pov-film .film-toggle:hover{background:#10182044;color:#fff}
.pov-motion #pov-film .film-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pov-exit-cue{display:none}
.pov-motion .pov-exit-cue{display:block;position:absolute;left:50%;bottom:36px;z-index:4;transform:translateX(-50%);opacity:var(--pov-exit-cue,0);pointer-events:none;color:#fff}
.pov-exit-cue i{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:0;font-style:normal;font-size:20px;line-height:1;text-shadow:0 1px 12px #0008;animation:pov-scroll-nudge 1.8s ease-in-out infinite}
@keyframes pov-scroll-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(max-width:760px){.pov-motion .pov-exit-cue{bottom:24px}.pov-exit-cue i{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.pov-exit-cue i{animation:none}}

.responsive-media{display:contents}

/* Blend the header with the visible film rather than the camera's early night cue. */
.topbar{--header-ink:color-mix(in srgb,var(--ink),var(--paper) var(--header-dark,0%));--header-surface:color-mix(in srgb,rgba(246,241,232,.38),rgba(15,21,38,.30) var(--header-dark,0%))}
.topbar,.topbar.is-scrolled,.dark-chapter .topbar,.dark-chapter .topbar.is-scrolled{color:var(--header-ink);background:var(--header-surface);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.topbar .brand,.dark-chapter .topbar .brand,.topbar .site-wordmark,.dark-chapter .topbar .site-wordmark,.topbar .desktop-nav,.dark-chapter .topbar .desktop-nav{color:var(--header-ink)}
.topbar .resume-link,.dark-chapter .topbar .resume-link{background:color-mix(in srgb,rgba(246,241,232,.5),#ffffff08 var(--header-dark,0%));border-color:color-mix(in srgb,var(--line),#ffffff33 var(--header-dark,0%))}
.topbar .resume-link:hover,.dark-chapter .topbar .resume-link:hover{background:var(--header-ink);color:color-mix(in srgb,var(--paper),var(--ink) var(--header-dark,0%))}
.topbar :is(a,button):focus-visible,.dark-chapter .topbar :is(a,button):focus-visible{outline-color:var(--header-ink)}