/* A quieter typographic scale and more space around each content group. */
@keyframes works-leave{to{transform:translateX(-100%)}}
@keyframes works-enter{from{transform:translateX(100%)}}
.works-transition::view-transition-old(root){animation:works-leave .65s cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
.works-transition::view-transition-new(root){animation:works-enter .65s cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
.works-transition::view-transition-group(root){animation-duration:.65s}
.horizontal .selected-card,.horizontal .selected-card .cover,.horizontal .project-caption{transition:none}
.horizontal .selected-card .cover{width:calc(var(--card) * (1 + .7791667 * var(--expand,0)))}
.horizontal .project-caption{opacity:var(--expand,0);transform:translate(-50%,calc(8px * (1 - var(--expand,0))))}
.horizontal .all-works{display:none}
body[data-page=all-works]>.site-header{background:#fff}
body[data-page=all-works] nav a{color:var(--muted);font-weight:400}
.reveal-column{opacity:0;transform:translateY(64px);transition:opacity .85s ease var(--reveal-delay),transform .85s cubic-bezier(.2,.7,.2,1) var(--reveal-delay)}
.reveal-column.is-visible{opacity:1;transform:translateY(0)}
#viewer{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;padding:0;overflow:hidden;background:#fff}
#viewer[open]{display:flex;align-items:center;justify-content:center}
#viewer .viewer-image{width:calc(100vw - 96px);height:calc(100svh - 120px);max-height:none;aspect-ratio:auto;background:transparent;flex:none}
.viewer-image img{width:100%;height:100%;object-fit:contain}
#viewer .viewer-controls{position:absolute;bottom:28px;left:0;width:100%;justify-content:center;font-size:12px;color:var(--muted)}
#viewer .viewer-close{z-index:2;right:var(--margin);top:28px;font-size:13px}
@media(max-width:800px){#viewer .viewer-image{width:calc(100vw - 32px);height:calc(100svh - 112px)}.reveal-column{transition-delay:0ms}}
@media(prefers-reduced-motion:reduce){.reveal-column{opacity:1;transform:none}}
:root{--margin:clamp(32px,3.7vw,64px);--card:clamp(280px,22vw,380px);--gap:24px}
body{font-size:14px;line-height:1.65}
h1,h2{font-size:24px;line-height:32px;letter-spacing:.12px}
h3{font-size:17px;line-height:24px}
.site-header{height:72px;background:linear-gradient(#fff 60%,#ffffff00)}
nav{font-size:14px;line-height:24px;gap:28px;padding-top:28px;letter-spacing:.12px}
.site-footer{font-size:12px;line-height:20px;bottom:28px}
.intro,.outro{width:250px;font-size:24px;line-height:31px;letter-spacing:.12px}
.intro{margin-right:calc(clamp(500px,40vw,700px) - var(--margin) - 250px - var(--gap));padding-bottom:4px}
.outro{margin-left:96px;padding-bottom:4px}
.outro .text-link{font-size:13px;line-height:22px;margin-top:24px;color:var(--muted)}
.project-caption{top:calc(100% + 8px)}
.project-caption h3{font-size:14px;line-height:20px}
.project-caption p{font-size:11px;line-height:17px;color:var(--muted);margin-top:2px}
.selected-stage{height:auto;overflow:hidden}
.horizontal .selected-stage{position:sticky;top:0;height:var(--stage-height,100svh)}
.horizontal .selected-track{top:50svh}
.horizontal .all-works{position:absolute;top:0;left:0;width:100%;min-height:100svh;will-change:transform;transform:translateX(100vw);background:#fff}
.all-works{padding-top:clamp(150px,19svh,210px);padding-bottom:140px}
.page-title{padding-bottom:40px}
.index-layout,.gallery-layout{grid-template-columns:minmax(300px,32vw) minmax(0,1fr)}
.category-menu{font-size:14px;line-height:24px;gap:8px;top:120px}
.work-grid{max-width:820px;width:calc(100% - 120px);gap:16px;justify-self:start;margin-left:0}
.work-card.architecture{background:#000}
.work-card .grid-caption{padding:18px 20px}
.grid-caption h3{font-size:16px;line-height:22px}
.grid-caption p{font-size:12px;line-height:19px}
.gallery-page{padding-top:clamp(150px,19svh,210px)}
.gallery-grid{margin:0 var(--margin) 0 0;gap:8px;max-width:1080px}
.gallery-menu .top-category{margin-top:28px}
.gallery-note{margin-left:32vw;font-size:12px}
.photo-placeholder span{font-size:12px}
.info-page{padding-top:clamp(200px,25svh,280px);padding-bottom:120px}
.about-statement{max-width:490px;font-size:26px;line-height:36px;letter-spacing:.12px}
.resume-grid{grid-template-columns:repeat(3,minmax(0,240px));gap:64px;margin-top:180px;max-width:none}
.resume-column>h2{font:400 18px/26px var(--heading);text-transform:none;margin-bottom:36px}
.resume-entry{margin-bottom:36px}
.resume-entry h3{font-size:17px;line-height:24px;margin-bottom:6px}
.resume-entry .related{margin-top:6px;font-size:12px}
.education-entry{grid-template-columns:32px minmax(0,1fr);gap:14px;margin-bottom:60px}
.school-logo{width:32px;height:32px}
.education-entry .year{min-height:32px;margin-bottom:10px;font-size:13px}
.education-entry h3{font-size:17px;line-height:24px;margin-top:10px}
.education-entry .related{font-size:12px}
.skills-list{padding-left:20px;margin-top:6px}
.skills-list li+li{margin-top:8px}
.contact{margin-top:200px}
.contact h2{font-size:24px;line-height:32px;margin-bottom:16px}
.contact p{font-size:13px;line-height:22px}
.project-page{padding-top:180px}
.project-meta{font-size:13px;margin-bottom:48px}
.project-description{max-width:490px;margin-top:120px}
.viewer-controls{font-size:13px}
@media(max-width:1200px) and (min-width:801px){
 :root{--margin:40px;--card:clamp(260px,24vw,320px);--gap:24px}
 .intro{width:220px;margin-right:120px}.outro{width:220px}
 .resume-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;gap:40px;margin-top:150px}
 .index-layout,.gallery-layout{grid-template-columns:28vw minmax(0,1fr)}
 .work-grid{width:calc(100% - 64px)}.gallery-note{margin-left:28vw}
}
@media(max-height:760px) and (min-width:801px){:root{--card:clamp(250px,43svh,340px)}.horizontal .selected-track{top:48svh}.intro,.outro{font-size:24px;line-height:31px}}
@media(max-width:800px){
 :root{--margin:24px;--card:calc(100vw - 48px);--gap:48px}
 body{font-size:14px;line-height:23px}nav{font-size:14px;padding-top:24px}
 .site-footer{font-size:12px;padding-bottom:24px}
 .selected-stage{position:relative;height:auto;overflow:visible;padding:0}
 .selected-track{position:static;display:flex;flex-direction:column;align-items:stretch;gap:48px;height:auto;margin:0;padding:164px var(--margin) 0;transform:none!important}
 .intro{font-size:24px;line-height:31px;width:250px;margin:0 0 40px;max-width:100%}
 .outro{font-size:24px;line-height:31px;width:100%;margin:40px 0 0}
 .selected-card{margin-bottom:44px}.project-caption h3{font-size:14px;line-height:20px}.project-caption p{font-size:11px;line-height:17px}
 .all-works{padding-top:140px;padding-bottom:48px}.page-title{font-size:24px;line-height:32px;padding-bottom:36px}
 .index-layout,.gallery-layout{display:block}.category-menu{font-size:13px;line-height:22px;gap:12px 20px;margin-bottom:36px}
 .work-grid{width:calc(100% - 48px);margin:0 var(--margin);max-width:none;gap:12px}
 .work-card{margin-bottom:78px}.work-card .grid-caption{padding:12px 0}.grid-caption h3{font-size:15px;line-height:20px}.grid-caption p{font-size:11px;line-height:17px}
 .gallery-page{padding-top:140px}.gallery-grid{margin:0 var(--margin);gap:6px}.gallery-note{margin:24px var(--margin);font-size:12px}
 .gallery-menu .top-category{margin-top:8px}
 .info-page{padding:180px var(--margin) 60px}.about-statement{font-size:24px;line-height:34px;max-width:440px}
 .resume-grid{display:block;margin-top:120px}.resume-column{margin-bottom:80px;max-width:440px}
 .resume-column>h2{font-size:18px;line-height:26px;margin-bottom:32px}
 .education-entry{grid-template-columns:32px minmax(0,1fr);gap:14px}.school-logo{width:32px;height:32px}
 .contact{margin-top:120px}.contact h2{font-size:24px;line-height:32px}
 .project-page{padding-top:164px}.project-description{margin-top:80px}
}
@media(prefers-reduced-motion:reduce) and (min-width:801px){
 .selected-stage{position:relative;height:auto;overflow:hidden}
 .selected-track{position:relative;top:auto;margin-top:0;padding:180px var(--margin) 120px;overflow-x:auto;align-items:flex-end}
 .all-works{position:relative;transform:none!important}
}

/* Homepage: a vertical portfolio sequence with a quiet, persistent introduction. */
body[data-page="design"] .selected-scroll{height:auto!important}
body[data-page="design"] .selected-scroll::after{content:"";display:block;height:clamp(460px,95svh,900px)}
body[data-page="design"] .selected-stage{position:relative;top:auto;height:auto;overflow:visible}
body[data-page="design"] .selected-track{position:relative;top:auto;left:auto;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,1fr);gap:clamp(48px,5vw,100px);align-items:start;width:min(100%,1440px);height:auto;margin:0 auto;padding:0 var(--margin);transform:none!important;will-change:auto}
body[data-page="design"] .intro{position:sticky;top:calc(50svh - 27px);justify-self:center;align-self:start;width:max-content;max-width:100%;margin:0;padding:0;font:400 clamp(22px,1.9vw,28px)/1.16 var(--heading);letter-spacing:-.025em}
body[data-page="design"] .intro span{display:block;color:#929292}
body[data-page="design"] .selected-list{display:flex;flex-direction:column;gap:clamp(24px,4svh,36px);padding:clamp(80px,14svh,130px) 0 0}
body[data-page="design"] .selected-card{display:block;width:min(75%,420px);height:auto;aspect-ratio:auto;margin:0 auto;transform:none!important;transition:none}
body[data-page="design"] .selected-card .cover,body[data-page="design"] .selected-card.is-active .cover{position:relative;left:auto;top:auto;display:block;width:100%;height:auto;aspect-ratio:1.08;transform:none;transition:none}
body[data-page="design"] .selected-card .cover img{display:block;width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--reel-y,0px),0) scale(1.06);will-change:transform}
body[data-page="design"] .selected-card .cover.architecture img{position:absolute;inset:0;object-fit:contain;padding:15%}
body[data-page="design"] .selected-card.placeholder .cover{background:#e6e6e6}
body[data-page="design"] .selected-card .project-caption{position:static;width:auto;max-width:none;margin-top:14px;text-align:left;opacity:1;transform:none;pointer-events:auto}
body[data-page="design"] .selected-card .project-caption h3{font-size:15px;line-height:22px;font-weight:700}
body[data-page="design"] .selected-card .project-caption p{font-size:12px;line-height:18px;color:#707070}
body[data-page="design"] .selected-card:focus-visible .cover{outline:2px solid #111;outline-offset:5px}
.work-card.mindwave .grid-cover{position:absolute;inset:0}
.work-card.mindwave img{display:block;width:100%;height:100%;object-fit:cover}
body[data-page="design"] .home-all-works{position:relative;top:auto;left:auto;width:100%;min-height:100svh;padding-top:clamp(140px,18svh,220px);transform:translateY(42px);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
body[data-page="design"] .home-all-works.is-visible{transform:translateY(0)}
body[data-page="design"] .site-header{opacity:0;pointer-events:none;transition:none}
body[data-page="design"]:not(.show-design-nav) .site-header nav{pointer-events:none}
body[data-page="design"].show-design-nav .site-header,body[data-page="design"] .site-header:focus-within{opacity:1;pointer-events:auto;transition:opacity .45s ease}
body[data-page="design"] .site-header:focus-within nav{pointer-events:auto}
.site-footer{position:relative;bottom:auto;left:auto;padding:0 var(--margin) 28px;pointer-events:auto}
.photo-placeholder img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@keyframes selected-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
body[data-page="design"] .selected-scroll.is-entering .intro{animation:selected-arrive .8s cubic-bezier(.22,.61,.36,1) both}
body[data-page="design"] .selected-scroll.is-entering .selected-card:first-child .cover{animation:selected-arrive .9s .12s cubic-bezier(.22,.61,.36,1) both}
@media(max-width:800px){
 body[data-page="design"] .selected-track{display:block;padding:0 var(--margin)}
 body[data-page="design"] .selected-scroll::after{height:clamp(600px,90svh,900px)}
 body[data-page="design"] .intro{position:relative;top:auto;justify-self:auto;padding:112px 0 16px;font-size:24px;line-height:1.16}
 body[data-page="design"] .selected-list{gap:32px;padding:24px 0 0}
 body[data-page="design"] .selected-card{width:75%}
 body[data-page="design"] .selected-card .cover,body[data-page="design"] .selected-card.is-active .cover{aspect-ratio:1.08}
 body[data-page="design"] .home-all-works{padding-top:110px}
}
@media(prefers-reduced-motion:reduce){
 body[data-page="design"] .home-all-works{transform:none;opacity:1;transition:none}
 body[data-page="design"] .selected-card .cover img{transform:none;will-change:auto}
 body[data-page="design"] .selected-scroll.is-entering .intro,body[data-page="design"] .selected-scroll.is-entering .selected-card:first-child .cover{animation:none}
}