@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url('assets/roboto-slab-400.ttf') format('truetype')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('assets/roboto-slab-700.ttf') format('truetype')}
@font-face{font-family:'Roboto Serif';font-style:normal;font-weight:300;font-display:swap;src:url('assets/roboto-serif-300.ttf') format('truetype')}
@font-face{font-family:'Roboto Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/roboto-serif-400.ttf') format('truetype')}
@font-face{font-family:'Roboto Serif';font-style:normal;font-weight:500;font-display:swap;src:url('assets/roboto-serif-500.ttf') format('truetype')}
*{box-sizing:border-box}html{background:#fff;color:#000}body{margin:0;font-family:'Roboto Slab',Georgia,serif;font-size:20.4px}p,h1,h2{margin:0}a{color:inherit;text-underline-offset:3px}a:focus-visible,button:focus-visible{outline:2px solid #aa4b6b;outline-offset:6px}.hero{position:relative;max-width:1512px;height:100svh;margin:0 auto}.name{position:absolute;inset:32px 32px auto;display:flex;justify-content:space-between;font-size:27.2px;font-weight:700;line-height:1.32}.hero-art{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-1.66deg);height:min(39.9653vw,604.275px,70svh);aspect-ratio:3/4}video{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(1.015)}.motion-control{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%) rotate(1.66deg);border:0;background:#fff;font:400 10.2px 'Roboto Slab',Georgia,serif;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer;opacity:0;padding:8px;transition:opacity .15s}.hero-art:focus-within .motion-control,.motion-control.needs-interaction{opacity:1}.content{width:calc(100% - 256px);max-width:1256px;margin:16px auto 0}.introduction{max-width:864px;display:flex;flex-direction:column;gap:20px;line-height:1.32}.designer{color:#aa4b6b}.linkedin{color:#0069c9;text-decoration:none}.linkedin:hover{text-decoration:underline}.work{display:grid;grid-template-columns:minmax(0,648fr) minmax(0,552fr);gap:56px;align-items:start;margin-top:122px}.project-list{display:flex;flex-direction:column;gap:40px;font-family:'Roboto Serif',Georgia,serif}.project{display:grid;grid-template-columns:23px minmax(0,1fr);gap:40px}.project-number{font-size:17px;line-height:1.32;padding-top:4px}.project h2{font-size:34px;line-height:normal;letter-spacing:-.35px;font-weight:500;text-transform:uppercase;font-variation-settings:'GRAD' 0,'wdth' 100}.project p{font-size:inherit;line-height:normal;margin-top:20px}.muted{opacity:.2}.divider{height:1px;overflow:hidden;width:100%}.divider img{display:block;max-width:none}.project-image{display:block;width:100%;height:auto;aspect-ratio:552/522;object-fit:cover}footer{font:300 16px/normal 'Roboto Serif',Georgia,serif;text-align:center;margin:217px auto 0;padding:0 24px 32px}footer p{text-transform:uppercase;margin-bottom:12px}
@media(min-width:1513px){.content{width:1256px}}
@media(max-width:1100px){.content{width:calc(100% - 112px)}.work{gap:40px}.project{gap:24px}.project h2{font-size:27.2px}.project p{font-size:inherit}.project-list{gap:32px}footer{margin-top:160px}}
@media(max-width:700px){body{font-size:15.3px}.hero{height:100svh}.name{inset:16px 16px auto;font-size:20.4px}.hero-art{height:auto;width:min(72vw,380px,52.5svh);min-height:0;aspect-ratio:3/4;top:50%}.content{width:calc(100% - 48px);margin-top:16px}.introduction{gap:20px;line-height:1.5}.work{grid-template-columns:minmax(0,1fr);margin-top:72px;gap:40px}.project h2{font-size:clamp(19.55px,4.93vw,27.2px);line-height:1.35}.project-number{font-size:11.9px}.project{grid-template-columns:18px minmax(0,1fr);gap:20px}.project p{font-size:inherit;line-height:1.5}.project-list{gap:28px}.project-image{max-width:552px;margin:0 auto}footer{margin-top:100px;font-size:12px;padding-bottom:24px}.motion-control{font-size:9.35px}}
@media(prefers-reduced-motion:reduce){.motion-control{transition:none}}

.below-hero{margin-top:0;padding-top:152px}.language-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:flex-end;align-items:center;min-height:56px;padding:8px 32px;background:transparent;margin-top:-72px;transition:background-color .25s ease,box-shadow .25s ease}.language-bar.is-sticky{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}.language-switcher{display:flex;align-items:center;gap:10px;font:400 15px/1.6 'Roboto Slab',Georgia,serif}.language-switcher button{font:inherit;border:0;background:transparent;padding:0;cursor:pointer;color:#b3b3b3}.language-switcher button[aria-pressed="true"]{color:#000;font-weight:700}.language-switcher span{color:#ccc}html[lang="ja"] body{font-family:'Roboto Slab','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif}html[lang="ja"] .introduction,html[lang="ja"] .project p{line-height:1.8;line-break:strict;overflow-wrap:anywhere}html[lang="ja"] .project h2{text-transform:uppercase;font-family:'Roboto Serif','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;line-height:1.5}html[lang="ja"] footer{font-family:'Roboto Serif','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif}@media(max-width:700px){.below-hero{margin-top:0;padding-top:98.5px}.language-bar{padding:8px 16px;min-height:48px;margin-top:-50.5px}.language-switcher{font-size:13px;line-height:21px}}

@media(prefers-reduced-motion:reduce){.language-bar{transition:none}}

/* A background underline follows wrapped inline links without shifting text. */
.linkedin,footer a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size .24s cubic-bezier(.2,.65,.3,1);padding-bottom:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.linkedin:hover,.linkedin:focus-visible,footer a:hover,footer a:focus-visible{text-decoration:none;background-size:100% 1px}.intro-reveal-pending{opacity:0;transform:translateY(8px)}@media(prefers-reduced-motion:reduce){.linkedin,footer a{transition:none}.intro-reveal-pending{opacity:1;transform:none}}

.language-switcher button[lang="ja"]{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}

/* Each project expands its summary and crossfades its screen preview. */
.project{transition:opacity .22s ease}.project-trigger{font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;border:0;background:none;padding:0;cursor:pointer;width:100%}.project-description{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .22s ease}.project-description p{overflow:hidden;min-height:0;margin-top:0}.project.selected .project-description{grid-template-rows:1fr;opacity:1}.project-description p::before{content:'';display:block;height:20px}.project-previews{position:relative;width:100%;aspect-ratio:552/620}.project-preview{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;pointer-events:none;display:flex;justify-content:center;align-items:flex-start}.project-preview.is-active{opacity:1;visibility:visible}.project-preview img{display:block;width:100%;height:auto}.preview-tiktok img{width:48.913%;aspect-ratio:270/548;object-fit:cover;border-radius:17.78% / 8.76%}.preview-tiktok{overflow:hidden}.preview-tiktok img{object-position:center}.project-preview:not(.is-active){z-index:0}.project-preview.is-active{z-index:1}
@media(max-width:700px){.project-previews{max-width:552px;margin:0 auto}.project-description p::before{height:16px}}
@media(prefers-reduced-motion:reduce){.project,.project-description,.project-preview{transition:none}}

.preview-tiktok .tiktok-screen{position:relative;width:48.913%;aspect-ratio:270/548;overflow:hidden;border-radius:17.78% / 8.76%}.preview-tiktok .tiktok-screen img{position:absolute;top:-.76%;left:-1.02%;width:102.04%;height:101.76%;border-radius:0;aspect-ratio:auto;object-fit:fill}

@media(min-width:701px){.project p{font-size:18.7px}}

.project{position:relative}.project-trigger{display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-decoration:none}.project-trigger::after{content:'';position:absolute;inset:0;z-index:2}.project-trigger::before{content:'';order:1;flex:none;width:24px;height:24px;background:url('assets/project-arrow.svg') center/contain no-repeat;opacity:0;transform:none;transition:none}.project.selected .project-trigger::before,.project:hover .project-trigger::before,.project:focus-within .project-trigger::before{opacity:1;transform:none}.project-trigger:focus-visible{outline:none}.project:has(.project-trigger:focus-visible){outline:2px solid #aa4b6b;outline-offset:8px}
.project-page-nav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px;position:sticky;top:0;background:#fff;z-index:10}.back-link{font-size:15px;text-decoration:none}.project-page-content{width:calc(100% - 256px);max-width:1256px;margin:100px auto 80px}.project-page-content h1{font:500 44px/1.3 'Roboto Serif','Noto Serif JP',serif;text-transform:uppercase}.project-page-description{font-size:18.7px;line-height:1.7;max-width:760px;margin-top:32px}.case-study-screen{display:block;width:100%;max-width:1050px;height:auto;margin:72px auto 0}.case-study-screen.screen-tiktok{max-width:350px}html[lang="ja"] .project-page-description{line-height:1.8}@media(max-width:700px){.project-page-nav{padding:16px}.back-link{font-size:12px}.project-page-content{width:calc(100% - 48px);margin-top:64px}.project-page-content h1{font-size:28px}.project-page-description{font-size:15.3px}.case-study-screen{margin-top:40px}}@media(prefers-reduced-motion:reduce){.project-trigger::before{transition:none}}

/* White difference blending creates a black dot on white and inverts underneath. */
.custom-cursor{position:fixed;width:26px;height:26px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;transform:translate(-50%,-50%);z-index:2147483647;visibility:hidden}
@media(hover:hover) and (pointer:fine){html.custom-cursor-active,html.custom-cursor-active *{cursor:none!important}.custom-cursor-active .custom-cursor{visibility:visible}}

.case-study-slide-stack{display:flex;flex-direction:column;gap:24px;margin-top:64px}.case-study-slide-stack img{display:block;width:100%;height:auto;aspect-ratio:16/9}@media(max-width:700px){.case-study-slide-stack{gap:16px;margin-top:40px}}

html:has(.case-study-page){background:#f5f5f5}.case-study-page{background:#f5f5f5;min-height:100vh}.case-study-page .project-page-nav{background:#f5f5f5}.case-study-page .project-page-content{width:calc(100% - 64px);max-width:1256px;margin-left:auto;margin-right:auto}.case-study-page .case-study-slide-stack{width:100%;margin-left:auto;margin-right:auto;align-items:center}.case-study-page .case-study-slide-stack img{width:100%;max-width:100%;height:auto;object-fit:contain}@media(max-width:700px){.case-study-page .project-page-content{width:calc(100% - 32px)}}

.case-study-page .case-study-slide-stack{width:80%}

.case-study-page .project-page-content h1{width:80%;margin-left:auto;margin-right:auto}

.project-page-date{font-size:18.7px;line-height:1.7;margin-top:12px}.case-study-page .project-page-date{width:80%;margin-left:auto;margin-right:auto}@media(max-width:700px){.project-page-date{font-size:15.3px}}

.project-page-content h1{text-transform:none}

.back-link{display:inline-flex;align-items:center;gap:8px}.back-link img{display:block;flex:none}

/* Restrained case-study motion and reading position. */
.slide-reveal-pending{opacity:0;transform:translateY(10px)}.reading-progress{position:absolute;inset:auto 0 0;height:2px;background:var(--project-theme-color,#80535e);transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:100}.case-study-page .back-link img{transition:transform .2s ease}.case-study-page .back-link:hover img,.case-study-page .back-link:focus-visible img{transform:translateX(-4px)}@media(prefers-reduced-motion:reduce){.slide-reveal-pending{opacity:1;transform:none}.case-study-page .back-link img{transition:none}.case-study-page .back-link:hover img,.case-study-page .back-link:focus-visible img{transform:none}}

.project-ending{display:flex;justify-content:center;align-items:center;margin:64px auto 0;min-height:180px}.ending-cat{width:160px;height:160px;object-fit:contain;filter:none;mix-blend-mode:multiply}@media(max-width:700px){.project-ending{margin-top:40px;min-height:140px}.ending-cat{width:128px;height:128px}}

.case-study-page .project-ending{flex-direction:column;gap:16px;margin-top:112px}.project-ending p{font-size:17px;line-height:1.7;text-align:center;padding:0 16px}@media(max-width:700px){.case-study-page .project-ending{margin-top:80px}.project-ending p{font-size:15px}}

/* TikTok slide exports and page theme. */
html:has(.tiktok-page),.tiktok-page,.tiktok-page .project-page-nav{background:#FBFAFF}.tiktok-page .case-study-slide-stack img{border-radius:2% / 3.55556%}.tiktok-timeline-slide{position:relative;width:100%;container-type:inline-size}.timeline-emoji{position:absolute;width:2.5%;height:4.44444%;display:flex;align-items:center;justify-content:center;font:normal 2.5cqw/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;pointer-events:none}
