/* Spacious transition from the portrait to the work links. */
.disciplines{padding-top:55px}
nav a{display:inline-block;position:relative;touch-action:manipulation}a[href]{touch-action:manipulation}
.arrow,.line-link>span{display:inline-block}
@keyframes arrow-nudge{
  0%,76%,100%{transform:translate(0,0) rotate(0)}
  80%{transform:translate(3px,-3px) rotate(5deg)}
  84%{transform:translate(-1px,1px) rotate(-4deg)}
  88%{transform:translate(2px,-2px) rotate(2deg)}
  92%{transform:translate(0,0) rotate(0)}
}
@keyframes arrow-hover{
  0%,100%{transform:translate(0,0)}
  25%,65%{transform:translate(4px,-4px) rotate(7deg)}
  45%,85%{transform:translate(-1px,1px) rotate(-5deg)}
}
@keyframes nav-distort{
  0%,100%{text-shadow:none}
  15%{text-shadow:2px 0 #77dce8,-2px 0 #d28cae}
  30%{text-shadow:-2px 0 #77dce8,2px 0 #d28cae}
  45%{text-shadow:none}
  60%{text-shadow:1px 0 #77dce8,-1px 0 #d28cae}
  80%{text-shadow:-1px 0 #77dce8,1px 0 #d28cae}
}
@media(prefers-reduced-motion:no-preference){
  .discipline .arrow{animation:arrow-nudge 5s ease-in-out infinite}
  .discipline:nth-child(2) .arrow{animation-delay:.35s}
  .discipline:nth-child(3) .arrow{animation-delay:.7s}
  nav a:focus-visible{animation:nav-distort .48s steps(1,end) both}
  .discipline:focus-visible .arrow,.line-link:focus-visible>span{animation:arrow-hover .6s ease both}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  nav a:hover{animation:nav-distort .48s steps(1,end) both}
  .discipline:hover .arrow,.line-link:hover>span{animation:arrow-hover .6s ease both}
}
@media(max-width:640px){.disciplines{padding-top:30px}}
@media(prefers-reduced-motion:reduce){nav a,.arrow,.line-link>span{animation:none!important;transform:none!important}}

/* Touch navigation activates immediately without a hover animation. */
@media(hover:none),(pointer:coarse){nav a,nav a:hover,nav a:focus-visible{animation:none!important;transform:none!important;text-shadow:none!important}.discipline:hover .arrow,.line-link:hover>span{animation:none;transform:none}}

.arrow,.line-link>span{pointer-events:none}

/* Shared identity: interlocking line monogram, stable link hit area. */
.brand{gap:18px;min-height:44px;touch-action:manipulation}
.brand-monogram{display:block;width:44px;height:42px;flex:none;overflow:visible;pointer-events:none}
.brand-name{pointer-events:none}
.monogram-j,.monogram-c{transform-box:fill-box;transform-origin:center}
.contact-emails a span:last-child{display:inline-block;pointer-events:none}
@keyframes monogram-snake-j{0%,100%{transform:translate(0,0) rotate(0) skewY(0)}25%{transform:translate(1px,-1px) rotate(4deg) skewY(5deg)}50%{transform:translate(0,1px) rotate(-2deg) skewY(-3deg)}75%{transform:translate(-1px,0) rotate(-4deg) skewY(-5deg)}}
@keyframes monogram-snake-c{0%,100%{transform:translate(0,0) rotate(0) skewY(0)}25%{transform:translate(-1px,1px) rotate(-4deg) skewY(-5deg)}50%{transform:translate(1px,0) rotate(2deg) skewY(3deg)}75%{transform:translate(0,-1px) rotate(4deg) skewY(5deg)}}
@keyframes name-dither{0%,100%{opacity:1;mask-position:0 0;-webkit-mask-position:0 0}35%{opacity:.55;mask-position:1px 1px;-webkit-mask-position:1px 1px}65%{opacity:.8;mask-position:2px 0;-webkit-mask-position:2px 0}}
@media(prefers-reduced-motion:no-preference){
 .contact-emails a span:last-child{animation:arrow-nudge 5s ease-in-out infinite}
 .contact-emails a:nth-child(2) span:last-child{animation-delay:.4s}
 .contact-emails a:focus-visible span:last-child{animation:arrow-hover .6s ease both}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .brand:hover .monogram-j{animation:monogram-snake-j 3.6s ease-in-out infinite}
 .brand:hover .monogram-c{animation:monogram-snake-c 3.6s ease-in-out infinite}
 .brand:hover .brand-name{mask-image:radial-gradient(circle,#000 65%,transparent 75%);-webkit-mask-image:radial-gradient(circle,#000 65%,transparent 75%);mask-size:3px 3px;-webkit-mask-size:3px 3px;animation:name-dither 2.4s ease-in-out infinite}
 .contact-emails a:hover span:last-child{animation:arrow-hover .6s ease both}
}
@media(max-width:640px){.brand-monogram{width:34px;height:32px}.brand{gap:14px;min-height:34px}}
@media(prefers-reduced-motion:reduce){.monogram-j,.monogram-c,.brand-name,.contact-emails a span:last-child{animation:none!important;transform:none!important}}

/* Original typographic JC, with the existing slow hover motion. */
.brand{gap:24px}.brand .brand-initials{display:inline-flex;align-items:center;gap:0;font:inherit;font-size:30px;letter-spacing:-3px;line-height:normal;flex:none;pointer-events:none}.brand .brand-initials>span{display:inline-block;font:inherit;letter-spacing:inherit;transform-origin:center;pointer-events:none}
@media(max-width:640px){.brand .brand-initials{font-size:23px;letter-spacing:-2px}}

/* Vector arrows prevent iOS from substituting blue emoji glyphs. */
.link-arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.discipline .arrow,.line-link>span,.contact-emails a span:last-child{color:#eeeae3;-webkit-text-fill-color:#eeeae3}

/* Snake follows the original letter contours; the logo never shifts. */
.jc-pipeline{display:block;width:38px;height:36px;flex:none;overflow:visible;pointer-events:none;color:#eeeae3}.jc-pipeline text{font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:400;letter-spacing:-3px}.jc-base{fill:currentColor;transition:opacity .3s ease}.jc-trail{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 72;stroke-dashoffset:0;opacity:0;transition:opacity .25s ease}
@keyframes jc-pipeline-run{to{stroke-dashoffset:-90}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.brand:hover .jc-base{opacity:.22}.brand:hover .jc-trail{opacity:1;animation:jc-pipeline-run 3s linear infinite}}
@media(prefers-reduced-motion:no-preference){.brand:focus-visible .jc-base{opacity:.22}.brand:focus-visible .jc-trail{opacity:1;animation:jc-pipeline-run 3s linear infinite}}
@media(max-width:640px){.jc-pipeline{width:29.13px;height:27.6px}}
@media(prefers-reduced-motion:reduce){.jc-trail{display:none}.jc-base{opacity:1;transition:none}}

/* Individual flipboard letters: stationary hit area, rotating face. */
.hero .hero-sub .flip-letter,.hero .hero-sub .flip-face,.contact-details h2 .flip-letter,.contact-details h2 .flip-face{font:inherit!important;letter-spacing:inherit!important;color:inherit;text-transform:inherit}
.flip-letter{display:inline-block;position:relative;perspective:500px;white-space:pre}
.flip-face{display:inline-block;transform-origin:center 52%;backface-visibility:visible}
.flip-letter.is-flipping .flip-face{animation:letter-flap .65s cubic-bezier(.4,0,.2,1) both}
.flip-letter.is-flipping:after{content:"";position:absolute;left:0;right:0;top:52%;height:1px;background:#09090977;pointer-events:none}
@keyframes letter-flap{0%{transform:rotateX(0);opacity:1}45%{transform:rotateX(-90deg);opacity:.45}55%{transform:rotateX(-270deg);opacity:.45}100%{transform:rotateX(-360deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.flip-face{animation:none!important;transform:none!important}.flip-letter:after{display:none}}

/* Image-only video choices. */
.video-showcase .showcase-bar{justify-content:flex-end}.video-showcase .video-choices{padding-top:22px}.video-showcase .video-choice{padding:0}.video-showcase .video-choice img{height:auto}@media(max-width:640px){.video-showcase .video-choices{padding-top:14px}}

/* Full-window artwork viewer, without navigating away. */
.still-top{justify-content:flex-end}.still-top #still-full{border:0;padding:4px 0;background:transparent;font-family:inherit;font-size:8px;letter-spacing:1.2px;color:#c7b8a6;cursor:pointer}.still-top #still-full:focus-visible{outline:2px solid #d5b7a6;outline-offset:5px}
.art-lightbox-open{overflow:hidden}#art-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:70px 70px 60px;border:0;background:#080909fa;color:#eeeae3}#art-lightbox[open]{display:flex;align-items:center;justify-content:center}#art-lightbox::backdrop{background:#080909}#lightbox-image{display:block;max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none;user-select:none}#art-lightbox button{position:absolute;z-index:1;background:#14191ce6;color:#eeeae3;border:1px solid #50595b;border-radius:4px;min-width:44px;min-height:44px;cursor:pointer;font:14px Arial,sans-serif}#art-lightbox button:focus-visible{outline:2px solid #d5b7a6;outline-offset:3px}#lightbox-close{right:20px;top:calc(16px + env(safe-area-inset-top,0px));padding:8px 16px}#lightbox-prev{left:12px;top:50%}#lightbox-next{right:12px;top:50%}#lightbox-count{position:absolute;bottom:15px;left:0;right:0;text-align:center;margin:0;font-size:11px;letter-spacing:2px}.gallery img,.gallery video{-webkit-touch-callout:none;user-select:none}@media(max-width:640px){#art-lightbox{padding:75px 12px 90px}#lightbox-prev,#lightbox-next{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px))}#lightbox-count{bottom:calc(34px + env(safe-area-inset-bottom,0px))}#lightbox-prev{left:20px}#lightbox-next{right:20px}}

/* Keep punctuation with its word while letters animate independently. */
.flip-word{display:inline-block;white-space:nowrap;font:inherit;letter-spacing:inherit;color:inherit}

.contact-details h2{max-width:none;white-space:nowrap;font-size:clamp(28px,2.5vw,44px)}
@media(max-width:1000px){.contact-details{grid-template-columns:1fr;gap:28px}.contact-details h2{font-size:clamp(21px,5.5vw,40px)}}
#video-full{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;min-height:44px;padding:8px}
#video-full:focus-visible,#video-close:focus-visible{outline:2px solid #d5b7a6;outline-offset:3px}
#video-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:70px 20px 20px;border:0;background:#080909;color:#eeeae3}
#video-lightbox::backdrop{background:#080909}
#video-lightbox[open]{display:flex;flex-direction:column}
#video-close{position:absolute;right:20px;top:calc(16px + env(safe-area-inset-top,0px));min-height:44px;padding:8px 16px;background:#14191c;color:#eeeae3;border:1px solid #50595b;border-radius:4px;cursor:pointer}
#video-full-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#video-full-stage video{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;background:#000}
@media(max-width:640px){.showcase-bar{gap:8px;flex-wrap:wrap}#video-lightbox{padding:75px 8px 16px}}

.mocap-photo{display:block;width:100%;height:auto;border:1px solid #252a2c;background:#000}

@media(max-width:640px) and (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference){.brand .jc-base{opacity:.22}.brand .jc-trail{opacity:1;animation:jc-pipeline-run 3s linear infinite}}