body.hero-active{overflow:hidden;background:#000}
body.hero-active .site-header,body.hero-active .site-footer{display:none}
body.hero-active.hero-leaving .site-header{display:block;opacity:1;pointer-events:none;transition:none}
body.hero-active.hero-leaving .site-header nav{pointer-events:none}
body.hero-active.hero-leaving .theme-toggle{visibility:visible;pointer-events:none}
.portfolio-hero{position:relative;z-index:2;display:grid;place-items:center;height:100svh;width:100%;background:#000;color:#fff;overflow:hidden;touch-action:none}
.hero-composition{display:flex;align-items:center;justify-content:center;width:max-content;max-width:94vw;gap:12px}
body h1.hero-word{display:flex;align-items:center;margin:0;font-size:clamp(44px,9.5vw,144px)!important;line-height:1!important;font-weight:400;letter-spacing:-.025em!important;white-space:nowrap}
.hero-letter{display:inline-block;animation:hero-letter-in .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i)*95ms)}
.hero-letter.half-o{width:.32em;overflow:hidden}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;height:clamp(44px,9.5vw,144px);padding:4px 0;width:250px;flex-shrink:0;perspective:700px;animation:hero-copy-in .6s 1.1s both}
.hero-line{position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,1,.36,1);height:34px}
.hero-front,.hero-back{position:absolute;left:0;top:0;white-space:nowrap;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-front{white-space:normal;font:400 var(--type-body)/1.65 var(--body);color:#aaa;transform:rotateX(0deg)}
body .hero-back{font:400 16px/1.2 var(--heading)!important;color:#aaa;transform:rotateX(180deg);pointer-events:none;padding:4px 0}
.is-flipped .hero-line{transform:rotateX(-180deg)}
.is-flipped .hero-back{pointer-events:auto}
.hero-back:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.portfolio-hero:focus-visible,.hero-back:focus-visible{outline:1px solid #fff;outline-offset:6px}
body.hero-active .home-all-works{visibility:hidden}
body.hero-active .home-all-works.hero-works-enter{position:fixed;inset:0;z-index:3;visibility:visible;overflow:auto;background:var(--paper);min-height:100svh;padding-top:clamp(150px,19svh,210px);transition:none}
.works-return-layer{position:fixed!important;inset:0;z-index:6;background:var(--paper);overflow:hidden;margin:0!important;pointer-events:none}
.contact-heading{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:16px}
.contact .contact-heading h2{margin:0}
.contact-heading img{width:34px;height:34px;border-radius:50%;object-fit:cover}
body h1.intro{font:700 28px/1.2 var(--heading)!important}
@keyframes hero-letter-in{from{opacity:0;filter:blur(5px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes hero-copy-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.hero-composition{gap:8px}.hero-copy{width:180px;min-width:0;height:80px;padding:0}.hero-line{height:48px}body .hero-back{font-size:14px!important}body h1.hero-word{font-size:clamp(28px,8vw,56px)!important}.contact p{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.hero-letter,.hero-copy{animation:none}.hero-line{transition:none}}
@media(max-width:800px){body.hero-active .home-all-works.hero-works-enter{padding-top:140px}}
.title-word{display:inline-block;white-space:nowrap}
.title-letter{display:inline-block;animation:page-title-letter .55s cubic-bezier(.22,1,.36,1) var(--letter-delay) both}
.contact-reveal{opacity:0;transform:translateY(-14px);transition:opacity .65s ease var(--contact-delay),transform .75s cubic-bezier(.22,1,.36,1) var(--contact-delay)}
.contact-reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes page-title-letter{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.title-letter{animation:none}.contact-reveal{opacity:1;transform:none;transition:none}}
body #gallery-title{font-size:28px!important;line-height:1.2!important;font-weight:700;font-family:var(--heading)!important}
.index-title-enter{animation:index-drop .8s cubic-bezier(.22,1,.36,1) both}
.index-menu-enter{animation:index-drop .75s cubic-bezier(.22,1,.36,1) var(--menu-delay) both}
.index-content-enter{animation:index-content .95s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes index-drop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes index-content{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.index-title-enter,.index-menu-enter,.index-content-enter{animation:none}}
/* Gallery and Design share the same left gutter and grid starting line. */
.gallery-menu .photo-filter{padding-left:0}
.category-menu button:disabled{color:var(--muted);opacity:.5;cursor:default;text-decoration:none}
.photo-placeholder span{background:transparent;color:#fff;text-shadow:none;padding:4px 7px;max-width:calc(100% - 24px);left:12px;bottom:12px;text-align:left}
.photo-placeholder:focus-visible span{opacity:1}
.work-card.placeholder{background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
body #viewer .viewer-image{width:100%;height:100svh;max-height:none}
#viewer .viewer-image img{height:100svh;width:auto;max-width:none;flex:none;object-fit:contain}
body #viewer .viewer-close{display:grid;place-items:center;width:44px;height:44px;top:18px;right:calc(var(--margin) - 12px);color:var(--ink);background:transparent;border-radius:0}
#viewer .viewer-controls{pointer-events:none}
#viewer #viewer-caption{color:#fff;background:#0009;padding:3px 8px}
@media(min-width:801px){.gallery-menu{top:120px}}