:root{color-scheme:light dark;--page: #c9c9c9;--paper: #f2f2f2;--ink: #0b0b0b;--muted: #676767;--footer: #303030;--header-bg: rgba(244, 244, 244, .96);--panel-bg: #f4f4f4;--field-line: rgba(255, 255, 255, .95);--soft-line: rgba(255, 255, 255, .18);--footer-ink: #ffffff;--footer-muted: #cfcfcf;--overlay-bg: #000000;--overlay-ink: #ffffff;--overlay-badge-bg: rgba(0, 0, 0, .88);--project-label: rgba(255, 255, 255, .92);--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "Noto Sans Arabic", Arial, Helvetica, sans-serif;--font-display: Georgia, "Times New Roman", "Noto Serif", "Noto Serif JP", "Noto Serif SC", "Noto Serif KR", "Noto Naskh Arabic", serif;--font-mono: "Courier New", "Noto Sans Mono", "Noto Sans Mono CJK JP", ui-monospace, SFMono-Regular, Consolas, monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--header-height: 44px;--header-padding-x: clamp(20px, 16vw, 240px);--header-padding-x-mobile: 28px;--header-z: 20;--header-z-mobile: 50;--overlay-z: 60;--panel-z: 1;--logo-width: 16px;--logo-height: 30px;--icon-button-size: 34px;--language-select-width: 46px;--language-select-width-mobile: 42px;--desktop-nav-gap: 28px;--header-action-gap: 16px;--header-action-gap-mobile: 12px;--mobile-panel-offset: -16px;--mobile-panel-link-offset: 22px;--project-scroll-height: 280vh;--project-scroll-height-mobile: 320vh;--project-viewport-min-height: 650px;--project-viewport-min-height-mobile: 760px;--project-card-size: clamp(250px, 34vw, 520px);--project-card-mobile-width: min(68vw, 300px);--project-card-mobile-height: min(96vw, 500px);--project-frame-mobile-width: min(70vw, 300px);--project-rail-height: min(58vw, 560px);--project-rail-height-mobile: 520px;--project-rail-max-height: 560px;--project-mobile-offset-scale: 1.75;--project-label-x: 16px;--project-label-bottom: 14px;--project-transition-filter: .25s ease;--content-width: 640px;--about-image-size: 164px;--contact-width: 460px;--contact-form-gutter: 48px;--field-input-height: 48px;--mobile-counter-x: 22px;--mobile-counter-bottom: 42px;--footer-button-size: 38px;--overlay-edge: clamp(72px, 9vw, 144px);--overlay-edge-mobile: 24px;--overlay-top-control: 34%;--overlay-top-control-mobile: 88px;--overlay-title-top: 41%;--overlay-title-top-mobile: 45%;--overlay-badge-bottom: 18%;--overlay-badge-bottom-mobile: 20%;--overlay-close-top: 62px;--overlay-close-right: 8vw;--overlay-close-right-mobile: 22px;--overlay-close-size: 40px;--overlay-pager-bottom: 7%;--overlay-clip-start: 48%;--overlay-image-scale: 1.08;--overlay-image-start-scale: .72;--duration-fast: .12s;--duration-medium: .35s;--duration-menu-fade: .38s;--duration-menu-slide: .52s;--duration-menu-link-fade: .42s;--duration-menu-link-slide: .62s;--duration-overlay: .68s;--duration-image-zoom: .9s;--ease-standard: ease;--ease-overlay: cubic-bezier(.76, 0, .24, 1);--ease-menu-link: cubic-bezier(.2, .8, .2, 1);font-family:var(--font-sans);background:var(--page);color:var(--ink)}@media(prefers-color-scheme:dark){:root{--page: #111111;--paper: #181818;--ink: #f2f2f2;--muted: #a0a0a0;--footer: #050505;--header-bg: rgba(8, 8, 8, .94);--panel-bg: #080808;--field-line: rgba(255, 255, 255, .28);--soft-line: rgba(255, 255, 255, .12);--footer-ink: #f6f6f6;--footer-muted: #a5a5a5;--overlay-bg: #000000;--overlay-ink: #ffffff;--overlay-badge-bg: rgba(0, 0, 0, .88);--project-label: rgba(255, 255, 255, .94)}}:lang(ja),:lang(zh),:lang(ko),:lang(ar),:lang(ru){--font-display: var(--font-sans);--font-mono: var(--font-sans)}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--footer)}body{margin:0;min-width:320px;background:var(--page);overflow-x:hidden}button,input,select,textarea{font:inherit}button{color:inherit}body.is-project-open,body.is-menu-open{overflow:hidden}.site-header{position:fixed;z-index:var(--header-z);top:0;left:0;display:grid;width:100%;height:calc(var(--header-height) + var(--safe-top));grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--header-padding-x);padding-top:var(--safe-top);background:var(--header-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mark,.desktop-nav button,.mobile-menu{border:0;background:transparent;cursor:pointer}.mark{position:relative;justify-self:start;padding:0;width:var(--logo-width);height:var(--logo-height)}.mark img,.mobile-panel__logo img{display:none;width:100%;height:100%;object-fit:contain}.mark img{position:absolute;inset:0}.mark .logo-light,.mobile-panel__logo .logo-light{display:block}@media(prefers-color-scheme:dark){.mark .logo-light,.mobile-panel__logo .logo-light{display:none}.mark .logo-dark,.mobile-panel__logo .logo-dark{display:block}}.desktop-nav{display:flex;gap:var(--desktop-nav-gap);font-size:14px}.desktop-nav button{padding:6px 0}.header-actions{justify-self:end;display:inline-flex;align-items:center;gap:var(--header-action-gap)}.language-select{width:var(--language-select-width);border:0;outline:0;background:transparent;color:var(--ink);cursor:pointer;font-size:13px;appearance:none;text-align:center}.icon-button{justify-self:end;display:inline-flex;width:var(--icon-button-size);height:var(--icon-button-size);align-items:center;justify-content:center}.mobile-menu,.mobile-panel{display:none}.mobile-panel{position:fixed;z-index:var(--panel-z);inset:0;min-height:100vh;background:var(--panel-bg);color:var(--ink);opacity:0;pointer-events:none;transform:translateY(var(--mobile-panel-offset));transition:opacity var(--duration-menu-fade) var(--ease-standard),transform var(--duration-menu-slide) var(--ease-overlay)}main{position:relative}.projects-section{position:relative;min-height:calc(100vh + var(--project-scroll-height));padding-top:calc(var(--header-height) + var(--safe-top))}.project-viewport{position:sticky;top:calc(var(--header-height) + var(--safe-top));display:grid;height:calc(100vh - var(--header-height));min-height:var(--project-viewport-min-height);place-items:center;overflow:hidden}.project-viewport:after{content:none;position:absolute;width:var(--project-card-size);aspect-ratio:1 / 1;border:1px solid var(--soft-line);pointer-events:none;opacity:.35}.project-rail{position:relative;width:100vw;height:var(--project-rail-height);max-height:var(--project-rail-max-height)}.project-card{position:absolute;top:50%;left:50%;width:var(--project-card-size);aspect-ratio:1 / 1;padding:0;border:0;background:var(--tone);cursor:pointer;opacity:var(--opacity);transform:translate(-50%,-50%) translate(var(--x)) scale(var(--scale));transition:opacity var(--duration-fast) linear,filter var(--project-transition-filter)}.project-card:hover,.project-card.is-active{filter:contrast(1.04)}.project-card img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(1)}.project-card__name{position:absolute;left:var(--project-label-x);bottom:var(--project-label-bottom);color:var(--project-label);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity var(--duration-medium) var(--ease-standard),transform var(--duration-medium) var(--ease-standard)}.project-card:hover .project-card__name,.project-card.is-active .project-card__name{opacity:1;transform:translateY(0)}.project-controls{display:flex;width:190px;align-items:center;justify-content:space-between;margin:-76px auto 0;color:var(--muted);font-size:14px}.project-controls span{display:inline-flex;gap:6px;align-items:center}.mobile-counter{display:none}.about-section{padding:140px clamp(30px,8vw,160px) 150px}.about-intro{display:grid;width:min(var(--content-width),100%);grid-template-columns:var(--about-image-size) 1fr;gap:clamp(38px,5vw,72px);align-items:center;margin:0 auto}.about-intro img{width:var(--about-image-size);max-width:100%;aspect-ratio:1 / 1;border-radius:50%;object-fit:cover;object-position:50% 47%}.about-intro h1{max-width:none;margin:0;font-family:var(--font-display);font-size:clamp(26px,2.1vw,36px);line-height:1.05;font-weight:400;letter-spacing:0}.bio-copy{width:min(var(--content-width),100%);margin:78px auto 0;font-family:var(--font-mono);font-size:13px;line-height:1.2;letter-spacing:0}.bio-copy p{margin:0 0 24px}.contact-section{min-height:720px;padding:50px 20px 140px}.contact-section h2{margin:0 0 84px;color:var(--muted);font-size:14px;font-weight:400;text-align:center}.contact-section form{width:min(var(--contact-width),calc(100vw - var(--contact-form-gutter)));margin:0 auto}.contact-section label{display:block;border-top:1px solid var(--field-line)}.contact-section span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.contact-section input,.contact-section textarea{width:100%;border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.contact-section input{height:var(--field-input-height)}.contact-section textarea{height:230px;padding-top:18px;resize:none;border-bottom:1px solid var(--field-line)}.contact-submit{display:block;margin:24px 0 0 auto;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:12px}.contact-submit:hover{text-decoration:underline}.contact-section input,.contact-section textarea{padding-left:16px}.contact-section input::placeholder,.contact-section textarea::placeholder{color:var(--muted)}.footer{position:relative;display:grid;min-height:198px;grid-template-columns:1fr auto;align-items:end;gap:18px;padding:0 clamp(40px,8vw,128px) calc(38px + var(--safe-bottom));background:var(--footer);color:var(--footer-ink)}.footer ul{margin:0 0 22px 18px;padding:0;color:var(--footer-muted);font-size:13px;line-height:1.25}.footer strong{grid-column:1;font-size:13px}.footer strong span{padding:0 8px}.footer button{grid-column:2;grid-row:1 / span 2;width:var(--footer-button-size);height:var(--footer-button-size);align-self:end;border:0;background:transparent;color:var(--footer-ink);cursor:pointer;font-size:21px}.project-overlay{position:fixed;z-index:var(--overlay-z);inset:0;overflow:hidden;color:var(--overlay-ink);background:var(--overlay-bg);animation:overlay-in var(--duration-overlay) var(--ease-overlay) both}.project-overlay__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transform:scale(var(--overlay-image-scale));animation:image-zoom var(--duration-image-zoom) var(--ease-overlay) both}.project-overlay__logo{position:absolute;z-index:3;top:14px;left:var(--header-padding-x);width:var(--logo-width);height:var(--logo-height);object-fit:contain}.project-overlay:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#00000047,#00000005 55%,#0000003d);pointer-events:none}.project-overlay__back,.project-overlay__close{position:absolute;z-index:2;border:0;background:transparent;color:var(--overlay-ink);cursor:pointer}.project-overlay__back{top:var(--overlay-top-control);left:var(--overlay-edge);display:inline-flex;gap:4px;align-items:center;font-size:14px}.project-overlay__close{top:var(--overlay-close-top);right:var(--overlay-close-right);display:none;width:var(--overlay-close-size);height:var(--overlay-close-size);align-items:center;justify-content:center}.project-overlay__date{position:absolute;z-index:2;top:var(--overlay-top-control);right:var(--overlay-edge);font-size:16px}.project-overlay h2{position:absolute;z-index:2;top:var(--overlay-title-top);left:50%;margin:0;transform:translate(-50%,-50%);font-size:clamp(72px,12vw,160px);font-weight:300;line-height:.9;letter-spacing:0;text-transform:uppercase}.project-overlay__type{position:absolute;z-index:2;left:50%;bottom:var(--overlay-badge-bottom);min-width:112px;padding:18px 20px;transform:translate(-50%);background:var(--overlay-badge-bg);color:var(--overlay-ink);text-decoration:none;text-align:center;font-size:16px}.project-overlay__type:hover{text-decoration:underline}.project-overlay__pager{position:absolute;z-index:2;left:var(--overlay-edge);right:var(--overlay-edge);bottom:var(--overlay-pager-bottom);display:flex;width:auto;justify-content:space-between;font-size:15px}.project-overlay__pager button{padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.project-overlay__pager button:hover{text-decoration:underline}@keyframes overlay-in{0%{clip-path:inset(var(--overlay-clip-start) var(--overlay-clip-start) var(--overlay-clip-start) var(--overlay-clip-start))}to{clip-path:inset(0 0 0 0)}}@keyframes image-zoom{0%{transform:scale(var(--overlay-image-start-scale))}to{transform:scale(var(--overlay-image-scale))}}@media(max-width:760px){.site-header{z-index:var(--header-z-mobile);height:calc(var(--header-height) + var(--safe-top));grid-template-columns:1fr auto 1fr;padding:var(--safe-top) var(--header-padding-x-mobile) 0}.desktop-nav,.icon-button{display:none}.mark{display:block;grid-column:2;width:var(--logo-width);height:var(--logo-height);justify-self:center}.mobile-menu{display:inline-flex;position:relative;z-index:2;width:var(--icon-button-size);height:var(--icon-button-size);align-items:center;justify-content:center}.header-actions{grid-column:3;justify-self:end;gap:var(--header-action-gap-mobile)}.language-select{position:relative;z-index:2;width:var(--language-select-width-mobile)}.mobile-panel{display:grid;grid-template-rows:var(--header-height) 1fr;padding:0 var(--header-padding-x-mobile)}.mobile-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.mobile-panel__logo{position:relative;grid-row:1;width:var(--logo-width);height:var(--logo-height);align-self:center;justify-self:center}.mobile-panel__logo img{position:absolute;inset:0}.mobile-panel nav{display:flex;grid-row:2;flex-direction:column;justify-content:center;gap:30px;padding-bottom:var(--header-height)}.mobile-panel nav button{border:0;background:transparent;cursor:pointer;font-family:var(--font-display);font-size:clamp(54px,18vw,92px);line-height:.95;text-align:left;opacity:0;transform:translateY(var(--mobile-panel-link-offset));transition:opacity var(--duration-menu-link-fade) var(--ease-standard),transform var(--duration-menu-link-slide) var(--ease-menu-link)}.mobile-panel.is-open nav button{opacity:1;transform:translateY(0)}.mobile-panel.is-open nav button:nth-child(2){transition-delay:80ms}.projects-section{min-height:calc(100vh + var(--project-scroll-height-mobile))}.project-viewport{top:calc(var(--header-height) + var(--safe-top));height:calc(100vh - var(--header-height) - var(--safe-top));min-height:var(--project-viewport-min-height-mobile);place-items:center;padding-top:0}.project-rail{height:var(--project-rail-height-mobile)}.project-card{width:var(--project-card-mobile-width);height:var(--project-card-mobile-height);aspect-ratio:auto;transform:translate(-50%,-50%) translate(calc(var(--x) * var(--project-mobile-offset-scale))) scale(calc(var(--scale) + .02));transform-origin:center}.project-viewport:after{width:var(--project-frame-mobile-width);height:var(--project-rail-height-mobile);aspect-ratio:auto}.project-card img{object-position:center}.project-card__name,.project-controls{display:none}.mobile-counter{position:absolute;left:var(--mobile-counter-x);right:var(--mobile-counter-x);bottom:calc(var(--mobile-counter-bottom) + var(--safe-bottom));display:flex;justify-content:space-between;padding:0;font-size:16px}.mobile-counter em{color:var(--muted);font-style:normal}.about-section{padding:150px 40px 126px}.about-intro{display:flex;flex-direction:column-reverse;gap:80px}.about-intro h1{width:100%;font-size:25px;line-height:1.12}.about-intro img{width:var(--about-image-size)}.bio-copy{margin-top:78px;padding:0 15px;font-size:13px}.contact-section{min-height:700px;padding-top:140px}.contact-section h2{margin-bottom:126px;text-transform:capitalize}.contact-section form{width:calc(100vw - 80px)}.footer{min-height:170px;grid-template-columns:1fr auto;padding:0 40px calc(34px + var(--safe-bottom))}.project-overlay{--overlay-edge: var(--overlay-edge-mobile)}.project-overlay__back{top:var(--overlay-top-control-mobile);left:var(--overlay-edge-mobile)}.project-overlay__close{display:inline-flex;top:var(--overlay-close-top);right:var(--overlay-close-right-mobile)}.project-overlay h2{top:var(--overlay-title-top-mobile);font-size:clamp(58px,18vw,92px)}.project-overlay__date{top:var(--overlay-top-control-mobile);right:var(--overlay-edge-mobile);left:auto}.project-overlay__type{bottom:var(--overlay-badge-bottom-mobile)}.project-overlay__pager{left:var(--overlay-edge-mobile);right:var(--overlay-edge-mobile);width:auto}}
