/* Art & Shok Atelier V2, isolated progressive enhancement. */
#app .gsStudioFacts>div.atelierDirectionInteractive{
  position:relative;cursor:pointer;
  isolation:isolate;
  transition:transform .38s cubic-bezier(.18,.7,.22,1),box-shadow .38s ease,background-color .38s ease;
}
#app .gsStudioFacts>div.atelierDirectionInteractive .atelierDisciplineText{display:none}
#app .atelierDirectionHint{
  align-self:flex-start;display:inline-flex;align-items:center;
  margin-top:auto;padding:9px 12px;
  color:#e1d0f4;background:rgba(169,130,194,.11);
  border:1px solid rgba(202,174,223,.24);border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.015em;
  transition:background .3s ease,border-color .3s ease,transform .35s ease;
}
@media(hover:hover){
 #app .gsStudioFacts>div.atelierDirectionInteractive:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 40px rgba(0,0,0,.32),0 0 0 1px rgba(202,174,223,.25);
  background-color:rgba(173,125,189,.08)
 }
 #app .atelierDirectionInteractive:hover .atelierDirectionHint{
  transform:translateX(5px);background:rgba(184,138,213,.21);
  border-color:rgba(212,181,233,.45)
 }
}
#app .atelierDirectionInteractive:focus-visible{
 outline:3px solid #dab7fb;outline-offset:4px
}
#app .atelierDirectionInteractive:active{transform:scale(.994)}
#app .atelierDisciplineImage img{object-fit:contain!important}
#app .atelierContinuousViewport,.atelierDirectionDialog .atelierContinuousViewport{
 display:flex!important;flex-wrap:nowrap!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scroll-snap-type:none!important;scroll-behavior:auto!important;
 scrollbar-width:none!important;overscroll-behavior-x:contain;
 -webkit-overflow-scrolling:touch;touch-action:pan-x;
 position:relative;min-width:0;max-width:100%;
}
#app .atelierContinuousViewport::-webkit-scrollbar,.atelierDirectionDialog .atelierContinuousViewport::-webkit-scrollbar{display:none}
#app .atelierContinuousViewport .atelierLoopGroup,.atelierDirectionDialog .atelierContinuousViewport .atelierLoopGroup{
 display:flex;flex:0 0 auto;gap:10px;min-width:max-content;
 align-items:stretch;padding:3px 5px;
}
#app .atelierContinuousViewport .atelierLoopGroup .s4aWorkItem{
 flex:0 0 148px!important;width:148px;max-width:148px;
 scroll-snap-align:none!important;min-width:0;
}
#app .atelierContinuousViewport .s4aWorkThumb{
 width:100%!important;height:145px!important;object-fit:contain!important
}
#app .atelierContinuousViewport .atelierLoopCopy[aria-hidden=true] .s4aWorkItem{
 /* Clones remain mouse/touch clickable; omitted from sequential keyboard focus. */
}
#app .s4aTeacherMediaColumn .s4aTeacherShowcase{min-width:0;overflow:hidden}
.atelierDirectionDialog,.atelierDirectionImageDialog{
 width:min(820px,94vw);max-width:94vw;max-height:92dvh;overflow:auto;
 background:#171a20;color:#f5f1ed;border:1px solid rgba(211,188,225,.31);
 border-radius:18px;padding:clamp(15px,3vw,27px);
 box-shadow:0 25px 85px rgba(0,0,0,.65)
}
.atelierDirectionDialog::backdrop,.atelierDirectionImageDialog::backdrop{
 background:rgba(2,4,8,.86);backdrop-filter:blur(5px)
}
.atelierDirectionClose{
 display:block;margin:0 0 14px auto;min-height:44px;
 background:#292935!important;color:#f3ebf4!important
}
.atelierDirectionEyebrow{font-size:11px;color:#c6a3dd;letter-spacing:.13em;font-weight:700}
.atelierDirectionDialogHead h2{font-size:clamp(25px,4vw,36px);margin:7px 0 11px}
.atelierDirectionDescription{font-size:16px;line-height:1.7;max-width:68ch;color:#d4d0d7}
.atelierDirectionDialog h3{margin:24px 0 12px;font-size:18px}
.atelierDirectionDialog .atelierDirectionTrack{
 border:1px solid rgba(187,163,199,.23);border-radius:14px;
 min-height:225px;background:linear-gradient(120deg,#23222a,#14171c);
 padding:10px 0
}
.atelierDirectionDialog .atelierContinuousViewport .atelierLoopGroup{gap:15px;padding:6px 7px}
.atelierDirectionDialog .atelierDirectionWork{
 display:flex;flex-direction:column;gap:8px;
 flex:0 0 clamp(154px,27vw,205px);width:clamp(154px,27vw,205px);
 padding:8px;color:#e8e5e7;text-align:left;cursor:zoom-in;
 border:1px solid #3e3946;border-radius:13px;background:#20222a;
}
.atelierDirectionDialog .atelierDirectionWork:hover{border-color:#d9b4f6}
.atelierDirectionDialog .atelierDirectionWork:focus-visible{outline:3px solid #d9b4f6}
.atelierDirectionDialog .atelierDirectionWork img{
 display:block;width:100%;height:178px;object-fit:contain;
 background:#191b21;border-radius:9px
}
.atelierDirectionDialog .atelierDirectionWork span{
 display:block;line-height:1.4;font-size:12px;overflow-wrap:anywhere
}
.atelierDirectionDialog .atelierDirectionNote{
 font-size:12px;color:#b4adb9;line-height:1.5;margin-top:12px
}
.atelierDirectionFallback{
 display:flex;align-items:center;gap:20px;padding:17px!important
}
.atelierDirectionFallback .atelierDirectionPreview{
 display:block;width:40%;height:200px;min-width:0;object-fit:contain
}
.atelierDirectionFallback p{flex:1;color:#c6c2cc;line-height:1.5}
.atelierDirectionImageDialog{width:min(1060px,96vw);max-width:96vw}
.atelierDirectionImage{display:block;width:100%;height:auto;max-height:73dvh;object-fit:contain}
.atelierDirectionImageCaption{text-align:center;color:#d5d0d9;margin:12px auto 0}
#app .atelierContentPage{padding:35px 0 60px}
#app .atelierContentTop{max-width:780px;margin-bottom:22px}
#app .atelierContentTop h1{font-size:clamp(24px,3.5vw,38px);margin-bottom:9px}
#app .atelierContentTop p{color:#c4c0c7;line-height:1.55}
#app .atelierContentStatus{color:#e5d1f2;min-height:20px;margin-bottom:15px}
#app .atelierContentCard{margin:18px 0;padding:20px}
#app .atelierContentCard h2{font-size:22px}
#app .atelierContentCard label{display:block;margin:16px 0}
#app .atelierContentCard textarea{display:block;width:100%;min-width:0;margin:8px 0}
#app .atelierContentUpload{
 display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0
}
#app .atelierContentUpload input[type=file]{flex:1 1 240px;min-width:0;max-width:100%}
#app .atelierContentUpload input[type=text]{flex:1 1 200px;min-width:0}
#app .atelierContentCount{color:#c4beca;margin:0 0 10px}
#app .atelierContentMedia{display:flex;gap:12px;flex-wrap:wrap}
#app .atelierContentMediaItem{
 display:flex;flex-direction:column;gap:8px;padding:8px;
 border-radius:12px;border:1px solid rgba(200,170,214,.23);width:150px;max-width:100%
}
#app .atelierContentMediaView{
 display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;
 border:0;background:transparent;color:inherit;text-align:center;cursor:zoom-in
}
#app .atelierContentMediaView img{width:100%;height:116px;object-fit:contain}
#app .atelierContentMediaView span{font-size:12px;overflow-wrap:anywhere}
#app .atelierContentMediaActions{display:flex;gap:4px;flex-wrap:wrap}
#app .atelierContentMediaActions button{min-width:36px;min-height:38px;padding:6px}
@media(max-width:560px){
 #app .gsStudioFacts>div.atelierDirectionInteractive{min-height:232px}
 .atelierDirectionFallback{flex-direction:column}
 .atelierDirectionFallback .atelierDirectionPreview{width:100%;height:180px}
 #app .atelierContentCard{padding:12px}
 #app .atelierContinuousViewport .atelierLoopGroup .s4aWorkItem{flex-basis:128px!important;width:128px;max-width:128px}
 #app .atelierContinuousViewport .s4aWorkThumb{height:122px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .atelierDirectionInteractive,#app .atelierDirectionInteractive *{transition:none!important;animation:none!important}
 #app .gsStudioFacts>div.atelierDirectionInteractive:hover{transform:none}
}

/* Atelier V2: gallery on homepage becomes a continuously moving row, no arrows. */
#app .gsStudioPreview .atelierHomeConveyor{
 width:100%;min-width:0;display:flex;flex-direction:column;gap:0;
 overflow:hidden;background:linear-gradient(125deg,#1d1f26,#14171c);
}
#app .atelierHomeConveyorHead{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:8px 14px;padding:18px 21px 9px;color:#efe9f2
}
#app .atelierHomeConveyorHead span{font-size:11px;font-weight:800;letter-spacing:.13em;color:#d8bae8}
#app .atelierHomeConveyorHead small{font-size:12px;color:#aaa4b0}
#app .atelierHomeConveyorTrack{
 width:100%;max-width:100%;min-height:300px;padding:11px 0 17px;
 background:radial-gradient(ellipse at center,#24232a,#16181e 80%)
}
#app .atelierHomeConveyorTrack .atelierLoopGroup{gap:16px;padding:0 8px}
#app .atelierHomeConveyorItem{
 display:flex;flex-direction:column;flex:0 0 clamp(220px,30vw,330px);
 width:clamp(220px,30vw,330px);min-width:0;
 padding:9px;gap:10px;text-align:left;cursor:zoom-in;color:#f1edf0;
 border:1px solid rgba(211,175,221,.19);border-radius:14px;
 background:linear-gradient(155deg,#26252d,#171a20);
}
#app .atelierHomeConveyorItem:focus-visible{outline:3px solid #d8b7e7}
#app .atelierHomeConveyorItem:hover{border-color:rgba(224,190,242,.57)}
#app .atelierHomeConveyorItem img{
 display:block;width:100%;height:clamp(210px,28vw,350px);
 object-fit:contain!important;object-position:center;
 background:#14171b;border-radius:9px
}
#app .atelierHomeConveyorCaption{display:flex;flex-direction:column;gap:3px;padding:1px 4px 7px}
#app .atelierHomeConveyorCaption b{font-size:15px;line-height:1.3}
#app .atelierHomeConveyorCaption span{font-size:12px;line-height:1.4;color:#b1a9b6}
#app .atelierHomeConveyorNote{
 font-size:12px;color:#bcb6c2;margin:0;padding:12px 21px 16px;
 border-top:1px solid rgba(180,157,194,.13)
}
@media(max-width:560px){
 #app .atelierHomeConveyorHead{padding:14px 12px 8px}
 #app .atelierHomeConveyorTrack{min-height:280px}
 #app .atelierHomeConveyorItem{flex-basis:210px;width:210px}
 #app .atelierHomeConveyorItem img{height:240px}
 #app .atelierHomeConveyorNote{padding:10px 12px 13px}
}

/* Atelier V3: return to the original numbered four-tile visual. No image, caption, or CTA until opening. */
#app .gsStudioFacts>div.atelierDirectionInteractive{
 min-height:142px;padding:24px 28px;display:flex;justify-content:space-between;
 align-items:flex-start;gap:10px;position:relative;
 background:transparent;border-radius:0;box-shadow:none;
 transition:background-color .28s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
#app .gsStudioFacts>div.atelierDirectionInteractive::after{
 content:"+";display:grid;place-items:center;position:absolute;right:24px;top:20px;
 width:22px;height:22px;color:#a78bbb;font:400 23px/1 system-ui,sans-serif;
 transition:transform .32s ease,color .32s ease;pointer-events:none
}
#app .gsStudioFacts>div.atelierDirectionInteractive b{
 font-size:clamp(18px,2vw,24px);font-weight:750;color:#f6f1e9;
 margin-top:auto;
}
#app .gsStudioFacts>div.atelierDirectionInteractive small{color:#a78bbb}
#app .gsStudioFacts>div.atelierDirectionInteractive .atelierDisciplineImage,
#app .gsStudioFacts>div.atelierDirectionInteractive .atelierDisciplineText,
#app .gsStudioFacts>div.atelierDirectionInteractive .atelierDirectionHint{display:none!important}
@media(hover:hover){
 #app .gsStudioFacts>div.atelierDirectionInteractive:hover{
  transform:translateY(-3px);background:rgba(166,114,193,.08);box-shadow:none
 }
 #app .gsStudioFacts>div.atelierDirectionInteractive:hover::after{
  transform:rotate(90deg);color:#e0c6f3
 }
}
@media(max-width:560px){
 #app .gsStudioFacts>div.atelierDirectionInteractive{min-height:112px;padding:16px}
 #app .gsStudioFacts>div.atelierDirectionInteractive::after{right:14px;top:12px}
}
@media(prefers-reduced-motion:reduce){
 #app .gsStudioFacts>div.atelierDirectionInteractive,
 #app .gsStudioFacts>div.atelierDirectionInteractive::after{transition:none;transform:none!important}
}

/* V4: no empty caption row below directions. */
.atelierDirectionDialog .atelierDirectionNote[hidden]{display:none!important}