:root{color-scheme:light;--paper:#f7f6f3;--ink:#40393b;--muted:#797274;--rule:#dcd8d4;--inset:clamp(24px,4.45vw,64px);--page-width:1280px;--reading-width:720px;--ease:cubic-bezier(.22,.61,.36,1);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height,84px) + var(--chapter-nav-height,61px) + 24px)}
body{margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
img{display:block;width:100%;height:auto}
figure,p,h1,h2,h3,ol,dl,dd{margin:0}
[hidden]{display:none!important}
::selection{background:#ded9d2}
.skip-link{position:fixed;top:12px;left:24px;z-index:100;background:var(--ink);color:var(--paper);padding:12px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;min-height:84px;padding:20px max(var(--inset),calc((100% - var(--page-width))/2 + var(--inset)));background:linear-gradient(var(--paper) 60%,#f7f6f3ed 85%,#f7f6f300)}
.identity{display:flex;align-items:baseline;gap:12px;min-height:44px;padding-top:7px}
.name{font:26px Georgia,serif;letter-spacing:-1px}
.role{font-size:11px;letter-spacing:.025em;color:var(--muted)}
.site-header nav{display:flex;gap:28px;font-size:12px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;position:relative;color:var(--muted)}
.site-header nav a[aria-current]{color:var(--ink)}
.site-header nav a[aria-current]::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor}
.site-header nav a:hover{color:var(--ink)}
.hero,.chapter,.work-ending{width:100%;max-width:var(--page-width);margin:0 auto;padding-inline:var(--inset)}
.hero{padding-top:154px;padding-bottom:54px}
.eyebrow{font-size:10px;letter-spacing:.09em;line-height:1.6;color:var(--muted)}
h1{font:400 clamp(64px,8.9vw,126px)/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.055em;margin:32px 0 26px}
.hero-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px}
.hero-statement{font-size:clamp(20px,2.2vw,30px);line-height:1.75;font-weight:400;letter-spacing:.065em}
.hero-description{font-size:13px;line-height:2.15;letter-spacing:.035em;margin-bottom:5px;color:#6f686b}
.hero-bottom{display:flex;flex-direction:column;margin-top:52px}
.hero-figure{order:0;width:100%;margin:0}
.project-meta{order:1;width:100%;max-width:var(--reading-width);margin:32px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:40px;font-size:11px;line-height:1.9}
.project-meta dt{font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.project-meta dd{line-height:2.05}
.image-frame{display:block}
.image-frame img{border-radius:7px}
figcaption{padding-top:12px;font-size:10px;color:var(--muted);line-height:1.7;letter-spacing:.02em}
.work-detail .site-header{background:var(--paper)}
.chapter-nav{position:sticky;top:var(--header-height,84px);z-index:10;width:100%;max-width:none;margin:0;background:var(--paper);font-size:11px;letter-spacing:.025em}
.chapter-nav-inner{width:100%;max-width:var(--page-width);margin:0 auto;padding:0 var(--inset) 14px}
.chapter-progress-labels{display:flex;align-items:center;gap:30px}
.chapter-nav ol{list-style:none;padding:0;display:flex;flex:1;justify-content:space-between;gap:24px;margin:0}
.chapter-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color .25s}
.chapter-nav a[aria-current="location"]{color:var(--ink);font-weight:600}
.chapter-nav a:hover{color:var(--ink)}
.reading-progress{height:3px;overflow:hidden;border-radius:999px;background:var(--rule)}
.reading-progress-fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--ink);transform:scaleX(var(--read-progress,0));transform-origin:left center}
.chapter{padding-top:120px}
.section-opening{max-width:var(--reading-width);margin:0 auto}
.section-index{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ink);margin-bottom:24px}
h2{font-size:clamp(23px,2.5vw,34px);font-weight:400;line-height:1.65;letter-spacing:.045em}
.body-copy{margin-top:30px;font-size:14px;line-height:2.15;letter-spacing:.025em}
.body-copy p+p{margin-top:20px}
.research-overview{width:100%;margin:54px auto 0}
.findings{max-width:var(--reading-width);margin:48px auto 0}
.margin-note{font-size:11px;letter-spacing:.04em;color:var(--muted);line-height:1.7}
.finding-list{list-style:none;padding:0}
.finding-list li{border-top:1px solid var(--rule);padding:23px 0 28px}
.finding-list h3{font-size:16px;font-weight:400;line-height:1.8;letter-spacing:.02em}
.finding-list p{margin-top:8px;font-size:12px;line-height:2;color:#726a6d;letter-spacing:.015em}
.text-link{display:inline-flex;align-items:center;gap:24px;font-size:11px;line-height:1.7;min-height:44px;padding:5px 0}
.text-link span{transition:transform .3s var(--ease)}
.text-link:hover span{transform:translate(2px,-2px)}
.section-exploration{padding-top:132px}
.chosen{display:inline-block;vertical-align:middle;font:10px "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;margin-left:10px;color:var(--muted)}
.section-structure{padding-top:132px}
.process-story{margin-top:54px}
.process-story:first-child{margin-top:0}
.process-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin-bottom:80px}
.step-copy{max-width:420px}
.step-number{font:16px Georgia,serif;color:var(--muted);margin-bottom:20px}
.step-copy h3{font-size:18px;font-weight:400;line-height:1.8;letter-spacing:.025em}
.step-copy>p:not(.step-number):not(.section-index){margin-top:18px;font-size:13px;line-height:2.1;letter-spacing:.025em}
.step-copy .body-copy{font-size:13px;line-height:2.1}
.step-copy .findings{margin-top:30px}
.step-copy .discovery-note{margin-top:32px}
.step-copy .discovery-note h3{font-size:16px}
.step-copy .reflection-note>p:last-child{font-size:13px}
.step-copy h2{font-size:clamp(23px,2.5vw,32px)}
.process-story.scrolly-ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.scrolly-ready .process-step{display:flex;align-items:center;min-height:65svh;margin:0;padding:80px 0;opacity:.27;transition:opacity .7s var(--ease)}
.scrolly-ready .process-step.is-current{opacity:1}
.scrolly-ready .step-copy{width:100%}
.scrolly-ready .process-stage{position:sticky;top:calc(var(--header-height,84px) + var(--chapter-nav-height,61px) + 20px);height:min(68svh,680px);margin-top:max(0px,calc((65svh - min(68svh,680px))/2))}
.scrolly-ready .process-figure{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;opacity:0;filter:blur(3px);transform:translateY(10px);pointer-events:none;transition:opacity .7s var(--ease),filter .7s var(--ease),transform .9s var(--ease)}
.scrolly-ready .process-figure.is-current{opacity:1;filter:none;transform:none;pointer-events:auto}
.scrolly-ready .process-figure .image-frame{min-height:0;max-height:calc(100% - 44px);display:flex;justify-content:center;align-items:center}
.scrolly-ready .process-figure img{width:100%;height:100%;max-height:calc(min(68svh,680px) - 44px);object-fit:contain}
.scrolly-ready .process-figure figcaption{flex-shrink:0}
.section-reflection{padding-top:110px;padding-bottom:120px}
.reflection-note{border-top:1px solid var(--rule);padding-top:28px;margin-top:42px}
.reflection-note>.margin-note{margin-bottom:18px}
.reflection-note>p:last-child{font-size:14px;line-height:2.15;letter-spacing:.025em}
.work-ending{padding-top:54px;padding-bottom:30px}
.perspective-link{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--rule);font-size:clamp(20px,2.2vw,30px);line-height:1.65;letter-spacing:.025em;padding:32px 0}
.ending-arrow{font-size:1.2em;transition:transform .5s var(--ease)}
.perspective-link:hover .ending-arrow{transform:translate(4px,-4px)}
.ending-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:12px}
.ending-bottom .text-link{font-size:10px}
.work-detail .ending-bottom{justify-content:flex-end}
.reveal-pending{opacity:.16;filter:blur(6px);transform:translateY(9px)}
.reveal,.reveal-image{transition:opacity 1s var(--ease),filter 1.05s var(--ease),transform 1.15s var(--ease)}
.reveal-image.reveal-pending{opacity:.35;filter:blur(2px);transform:translateY(20px)}
.is-revealed{opacity:1;filter:none;transform:none}
.onboarding-page h1{font-size:clamp(52px,7.5vw,108px)}
.evidence-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:54px;align-items:start}
.discovery-note{margin-top:50px}
.discovery-note h3{font-size:19px;font-weight:400;line-height:1.85;letter-spacing:.025em}
.discovery-note .body-copy{margin-top:18px}
.reflection-figure{margin-top:34px}
.next-work{position:relative;display:block;border-top:1px solid var(--rule);padding:32px 0 35px}
.next-work-label{display:block;font-size:10px;color:var(--muted);letter-spacing:.04em;margin-bottom:18px}
.next-work-name{display:block;max-width:calc(100% - 54px);font-size:clamp(20px,2.6vw,32px);font-weight:400;line-height:1.65;letter-spacing:.025em}
.next-work-arrow{position:absolute;right:0;top:50%;font-size:25px;transition:transform .4s var(--ease)}
.next-work:hover .next-work-arrow{transform:translateX(6px)}
.next-work:hover .next-work-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.works-intro,.work-grid{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--inset)}
.works-intro{padding-top:154px}
.works-intro h1{font-size:clamp(48px,6vw,72px);margin:0 0 20px}
.works-intro>p{font-size:15px;letter-spacing:.04em;line-height:1.8}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 36px;margin-top:40px}
.work-item{min-width:0}
.work-entry{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:22px;min-height:148px;padding:18px 0;align-content:center}
.work-item:nth-child(n+3){border-top:1px solid var(--rule)}
.work-entry>*:not(.work-cover){grid-column:2}
.work-cover{grid-column:1;grid-row:1/5;align-self:center;aspect-ratio:8/5;background:#fff;border-radius:7px;overflow:hidden}
.work-cover img{width:100%;height:100%;object-fit:contain}
.work-entry-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:0}
.work-entry-heading h2{font-size:17px;font-weight:400;line-height:1.7;letter-spacing:.025em}
.work-entry-heading>span{display:none}
.work-entry:hover .work-entry-heading>span{transform:translateX(5px)}
.work-entry:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.work-description{font-size:12px;line-height:1.9;letter-spacing:.015em;margin-top:12px}
.work-category{font-size:10px;color:var(--muted);letter-spacing:.025em;line-height:1.7;margin-top:10px}
.work-project{font:16px/1.5 Georgia,serif;margin-top:5px}
.work-company{font-size:10px;color:var(--muted);line-height:1.7;margin-top:4px}
.hero h1.project-title{font-family:inherit;font-size:clamp(30px,4.3vw,56px);font-weight:400;line-height:1.65;letter-spacing:.03em;margin:24px 0 12px}
.project-name{font:24px/1.5 Georgia,serif;letter-spacing:-.01em}
.project-company{font-size:10px;color:var(--muted);line-height:1.9;margin-top:10px}
.project-company+.hero-intro{margin-top:44px}
.index-ending{max-width:1120px;margin-top:64px}
.index-ending .ending-bottom{border-top:1px solid var(--rule);padding-top:20px}
@media(min-width:980px){
  .chapter>.section-opening{max-width:calc((100% - 64px)/2);margin-left:0}
}
@media(min-width:980px) and (max-width:1100px){
  .chapter>.section-opening{max-width:calc((100% - 38px)/2)}
}
@media(max-width:1100px){
  .hero-description{font-size:12px}
  .process-story.scrolly-ready,.process-step{gap:38px}
  .step-copy h3{font-size:16px}
}
@media(max-width:979px){
  .hero{padding-top:140px}
  .hero-intro{gap:30px}
  .chapter{padding-top:100px}
  .section-reflection{padding-bottom:100px}
}
@media(max-width:760px){
  :root{--inset:24px}
  html{scroll-padding-top:calc(var(--header-height,74px) + var(--chapter-nav-height,57px) + 18px)}
  .site-header{min-height:74px;padding-top:14px;padding-bottom:14px}
  .name{font-size:23px}
  .identity{gap:8px}
  .role{font-size:9px}
  .site-header nav{gap:17px;font-size:10px}
  .hero{padding-top:125px;padding-bottom:35px}
  .eyebrow{font-size:9px;letter-spacing:.05em}
  h1{font-size:clamp(49px,12vw,86px);letter-spacing:-.055em;margin:30px 0 27px}
  .onboarding-page h1{font-size:clamp(45px,11.8vw,76px);line-height:1.12}
  .hero-intro{display:block}
  .hero-statement{font-size:22px;line-height:1.8;letter-spacing:.035em}
  .hero-description{font-size:11px;margin-top:24px;line-height:2.1}
  .hero-bottom{margin-top:35px}
  .project-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:24px;font-size:10px}
  .project-meta dt{font-size:9px;margin-bottom:6px}
  .project-meta dd{line-height:1.9}
  figcaption{font-size:9px;padding-top:10px}
  .chapter-nav{top:var(--header-height,74px);font-size:10px}
  .chapter-nav-inner{padding-bottom:10px}
  .chapter-progress-labels{gap:18px}
  .chapter-nav ol{gap:14px}
  .chapter-nav a{white-space:nowrap}
  .chapter{padding-top:76px}
  .section-index{font-size:9px;margin-bottom:22px}
  h2{font-size:23px;line-height:1.75;letter-spacing:.015em}
  .body-copy{margin-top:25px;font-size:13px;line-height:2.1;letter-spacing:.01em}
  .body-copy p+p{margin-top:18px}
  .research-overview{margin-top:30px}
  .findings{margin-top:30px}
  .finding-list li{padding:19px 0 23px}
  .finding-list h3{font-size:14px;line-height:1.8}
  .finding-list p{font-size:12px;line-height:2}
  .text-link{font-size:10px;gap:15px}
  .prototype-comparison{margin-top:30px}
  .process-story{margin-top:36px}
  .process-step{display:flex;flex-direction:column;align-items:stretch;gap:25px;margin-bottom:50px}
  .process-step:last-child{margin-bottom:0}
  .step-copy{max-width:none}
  .step-number{margin-bottom:14px;font-size:14px}
  .step-copy h3{font-size:16px}
  .step-copy>p:not(.step-number):not(.section-index){font-size:12px;line-height:2.1;margin-top:12px}
  .reflection-note{margin-top:30px;padding-top:22px}
  .reflection-note>p:last-child{font-size:13px;line-height:2.1}
  .section-reflection{padding-bottom:60px}
  .work-ending{padding-top:25px;padding-bottom:22px}
  .perspective-link{font-size:20px;gap:18px;padding:25px 0;letter-spacing:0}
  .ending-bottom{gap:12px;margin-top:0}
  .ending-bottom .text-link{font-size:9px;gap:8px}
  .evidence-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}
  .discovery-note{margin-top:34px}
  .discovery-note h3{font-size:16px}
  .reflection-figure{margin-top:27px}
  .next-work{padding:25px 0 30px}
  .next-work-label{font-size:9px;margin-bottom:14px}
  .next-work-arrow{font-size:22px}
  .works-intro{padding-top:125px}
  .works-intro>p{font-size:13px}
  .work-grid{grid-template-columns:1fr;gap:0;margin-top:28px}
  .work-item+.work-item{border-top:1px solid var(--rule)}
  .work-entry{grid-template-columns:84px minmax(0,1fr);column-gap:18px;min-height:144px;padding:18px 0}
  .work-entry-heading{margin-top:0;gap:12px}
  .work-entry-heading h2{font-size:16px}
  .hero h1.project-title{font-size:clamp(28px,7.6vw,42px);line-height:1.65;margin-top:22px}
  .project-name{font-size:21px}
  .project-company+.hero-intro{margin-top:32px}
  .work-description{font-size:12px;margin-top:10px}
  .work-category{font-size:9px;margin-top:8px}
  .work-project{font-size:15px}
  .work-company{font-size:9px}
  .index-ending{margin-top:50px}
}
@media(max-width:370px){
  :root{--inset:20px}
  .work-entry{grid-template-columns:76px minmax(0,1fr);column-gap:16px}
  .role{display:none}
  .hero-statement{font-size:20px}
  h1{font-size:12.2vw}
  .onboarding-page h1{font-size:12.2vw}
  h2{font-size:21px}
  .perspective-link{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal-pending{opacity:1;filter:none;transform:none}
}
@media print{
  .site-header,.chapter-nav{display:none!important}
  body{background:white}
  .hero,.chapter{padding:30px 0}
  .reveal-pending{opacity:1;filter:none;transform:none}
  .process-story.scrolly-ready{display:block}
  .scrolly-ready .process-step{min-height:0;padding:15px 0;opacity:1}
  .scrolly-ready .process-stage{position:static;height:auto}
  .scrolly-ready .process-figure{position:static;opacity:1;filter:none;transform:none;break-inside:avoid}
  .work-ending{padding-top:30px}
}