/* Workshop entrance and image-based process exploration. */
body.area-entering #welcome,body.area-entering #workshop-portals{opacity:0;transform:translateY(20px) scale(1.08);transition:opacity .35s,transform .7s;pointer-events:none}
body.area-entering #panorama{pointer-events:none}
body.area-entering header,body.area-entering #navigation{pointer-events:none}
body.area-entering .vignette{background:radial-gradient(ellipse at center,transparent 35%,#071d3560 100%)}
body.area-entering::after{content:'';position:fixed;inset:0;z-index:30;pointer-events:none;box-shadow:inset 0 0 10vw #071d3540;animation:arrivalLight 2.1s both}
@keyframes arrivalLight{0%{opacity:0}25%{opacity:.7}80%{opacity:.3}100%{opacity:0}}
body.workshop-home #welcome{left:7%;top:23%;bottom:auto;max-width:750px}
body.workshop-home #welcome h1{font:clamp(48px,5.5vw,88px)/1.08 Georgia,serif;margin:24px 0 34px;letter-spacing:-.025em}
body.workshop-home #welcome h1 em{color:#ead7af}body.workshop-home #welcome .eyebrow{font-size:10px;letter-spacing:.24em;color:#e8d8b4}
body.workshop-home .vignette{background:linear-gradient(90deg,#061b30e8,#071d3580 55%,#071d352a),linear-gradient(0deg,#071b30d9,transparent 65%)}
body.workshop-menu #welcome{top:15%;max-width:800px}body.workshop-menu #welcome h1{font-size:clamp(40px,4.5vw,67px);margin:15px 0}body.workshop-menu #enter,body.workshop-menu .welcome-hint{display:none}
#workshop-portals{position:absolute;left:7%;right:7%;bottom:10%;display:flex;gap:24px;z-index:4;height:36dvh;max-height:330px}
#workshop-portals button{position:relative;flex:1;min-width:0;padding:0;border:1px solid #eee0c266;border-radius:4px;background:#17334e;color:#fff;text-align:left;overflow:hidden;box-shadow:0 18px 50px #0004;animation:portalEnter .9s both;transition:transform .4s,border-color .4s}
#workshop-portals button:nth-child(2){animation-delay:.15s}#workshop-portals button:nth-child(3){animation-delay:.3s}
#workshop-portals button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform 1s,filter .5s}
#workshop-portals button::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061c30f2,transparent 90%);pointer-events:none}
#workshop-portals button:hover,#workshop-portals button:focus-visible{transform:translateY(-9px);border-color:#f9e1ac}#workshop-portals button:hover img{transform:scale(1.07);filter:brightness(.95)}
.portal-number,.portal-title,.portal-arrow{position:absolute;z-index:1}.portal-number{left:26px;top:23px;font-size:11px;letter-spacing:.2em;color:#f0dbb2}.portal-title{left:26px;bottom:29px;font:clamp(24px,2.3vw,35px)/1.2 Georgia,serif}.portal-arrow{right:24px;bottom:30px;font-size:28px;font-weight:200}
#workshop-back{position:absolute;left:42px;top:92px;z-index:4;color:#fff;border-color:#fff6;background:#0b233d8c;backdrop-filter:blur(12px);font-size:11px;padding:9px 14px}
.workshop-dialog{width:min(1250px,95vw);height:min(800px,90dvh);max-height:90dvh;overflow:auto;background:#f3efe5;color:#18364b;border-radius:12px;padding:32px 40px 25px}
.area-heading{margin-bottom:20px}.area-heading .eyebrow{font-size:10px;color:#857347;letter-spacing:.22em}.area-heading h2{font:36px/1.1 Georgia,serif;margin:12px 0 8px}.area-heading p{font-size:12px;color:#6b747a;margin:0}
#product-gallery{display:flex;gap:15px;height:calc(100% - 230px);min-height:250px;max-height:440px}
.product-piece{flex:1;min-width:0;position:relative;overflow:hidden;border:1px solid #dfd6c6;border-radius:4px;padding:0;background:#e9e3d8;transition:flex .55s,box-shadow .4s,transform .4s}
.product-piece .product-crop{position:absolute;inset:0;overflow:hidden}.product-piece img{height:100%;width:300%;max-width:none;position:absolute;top:0;left:calc(var(--product-index) * -100%);object-fit:fill}
.product-piece .product-crop{left:50%;right:auto;height:100%;aspect-ratio:1672/2823;transform:translateX(-50%)}
.product-piece .piece-name{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f9f1df;background:#112e48db;border:1px solid #f9efdc5a;border-radius:20px;padding:9px 18px;font-size:12px}
.product-piece.active{box-shadow:0 0 0 2px #355673,0 10px 25px #132d4720;transform:translateY(-3px)}.product-piece:not(.active){filter:saturate(.75)}
.product-caption,.craft-caption{display:flex;align-items:center;gap:22px;padding-top:23px}.product-caption>span,.craft-caption>span{font:italic 38px Georgia,serif;color:#ab9567}.product-caption h3,.craft-caption h3{font:25px Georgia,serif;margin:0 0 7px}.product-caption p,.craft-caption p{font-size:14px;margin:0;line-height:1.5;color:#556873}.image-note{position:absolute;bottom:12px;right:24px;font-size:9px;letter-spacing:.05em;color:#8b8d86}
#craft-gallery{display:flex;gap:12px;height:calc(100% - 245px);min-height:250px;max-height:440px}
.craft-step{flex:1;position:relative;overflow:hidden;padding:0;background:#e0d9ca;border:0;border-radius:4px;transition:flex .55s ease,filter .45s;filter:brightness(.78) saturate(.6)}
.craft-step.active{flex:1.7;filter:none;box-shadow:0 0 0 2px #476478}.craft-crop{position:absolute;inset:0;overflow:hidden}.craft-step img{position:absolute;top:0;left:calc(var(--step-index) * -100%);height:100%;width:500%;object-fit:fill;max-width:none}.craft-step::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0c283eed)}.step-number{position:absolute;top:13px;left:13px;z-index:1;background:#f2e7d1e6;color:#143a56;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font:12px Georgia,serif}.step-name{position:absolute;bottom:20px;left:15px;right:10px;font:19px Georgia,serif;color:#fff;text-align:left;z-index:1}.craft-caption>div{flex:1}#craft-next{white-space:nowrap;font-size:12px}
.craft-crop{left:50%;right:auto;height:100%;aspect-ratio:3/5;transform:translateX(-50%)}
.workshop-dialog .close{background:#15334aed;color:#fff;right:18px;top:18px;width:34px;height:34px;font-size:24px}
@keyframes portalEnter{from{opacity:0;transform:translateY(35px) rotateY(-9deg)}to{opacity:1;transform:none}}
#living-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}#dialogue-dialog.motion-ready #living-scene{display:block}#dialogue-dialog.motion-ready #conversation-scene{visibility:hidden}
#dialogue-dialog[data-speaker=guide] .conversation-image img,#dialogue-dialog[data-speaker=visitor] .conversation-image img{transform:none}
#photo-stage #image-zoom{position:absolute;right:18px;bottom:18px;margin:0;z-index:2}#photo-stage.enlarged #exhibit-image{width:145%;height:100%;object-fit:cover}
body.reduced #living-scene{display:none!important}body.reduced #dialogue-dialog #conversation-scene{visibility:visible!important}
@media(max-width:760px){#workshop-portals{left:5%;right:5%;gap:10px;height:35dvh;bottom:12%}.portal-title{font-size:20px;left:15px;bottom:22px}.portal-number{left:15px}.portal-arrow{display:none}body.workshop-menu #welcome{top:18%}body.workshop-menu #welcome h1{font-size:42px}.workshop-dialog{padding:28px 18px 20px}.area-heading h2{font-size:29px}#craft-gallery{gap:6px}.step-name{font-size:14px;left:8px}.step-number{left:8px}.craft-caption{gap:12px;flex-wrap:wrap}.craft-caption p,.product-caption p{font-size:12px}#workshop-back{left:24px}.product-piece .piece-name{padding:7px 10px;font-size:11px}}

/* Reference-style spherical entry followed by the three workshop entrances. */
#intro-sphere{position:fixed;inset:0;width:100vw;height:100dvh;z-index:40;pointer-events:none}
#skip-intro{position:fixed;bottom:30px;right:32px;z-index:41;border:1px solid #fff8;border-radius:30px;background:#132c4299;color:#fff;padding:12px 20px;backdrop-filter:blur(10px);font-size:12px}
.intro-active #welcome,.intro-active #workshop-portals,.intro-active header{visibility:hidden}
body.workshop-menu #welcome{left:10%;right:10%;top:13%;max-width:none;text-align:center}
body.workshop-menu #welcome h1{font-size:clamp(38px,4.1vw,64px);text-shadow:0 3px 28px #001629}
body.workshop-menu #workshop-portals{left:21%;right:21%;bottom:11%;height:39dvh;max-height:365px;gap:38px;perspective:1000px}
body.workshop-menu #workshop-portals button{background:#f3e8d2;border:1px solid #c7ae77;overflow:visible;color:#173b58;box-shadow:0 12px 36px #00182880, inset 0 0 0 6px #f0e2c5, inset 0 0 0 7px #bea775;transform-origin:50% 0}
body.workshop-menu #workshop-portals button::before{content:'';position:absolute;top:-27px;left:50%;height:27px;width:1px;background:#e5d4b0;box-shadow:0 0 0 1px #31455855}
body.workshop-menu #workshop-portals button img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);opacity:.15;filter:sepia(.2)}
body.workshop-menu #workshop-portals button::after{background:linear-gradient(180deg,#f7efdf60,#eee0c0bb);inset:8px}
body.workshop-menu .portal-number{color:#8e784b;top:25px;left:0;right:0;text-align:center}
body.workshop-menu .portal-title{left:10%;right:10%;top:40%;bottom:auto;text-align:center;font:clamp(24px,2.15vw,34px)/1.2 Georgia,serif}
body.workshop-menu [data-area=festival] .portal-title{top:31%;font-size:clamp(20px,1.8vw,29px)}
body.workshop-menu .portal-arrow{bottom:20px;right:0;left:0;text-align:center;color:#826b42;font-size:23px}
body.workshop-menu #workshop-portals button:hover{transform:rotateZ(-1.4deg) translateY(-5px)}

/* Narration stays inside the draggable panoramic scene; no dialog or photo frame. */
body.workshop-home .hotspot,body.scene-conversation .guide-hotspot{display:none!important}
body.entered .hotspot span{opacity:1}
#dialogue-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:white;overflow:visible;z-index:5;pointer-events:none;isolation:auto}
#dialogue-dialog .conversation-image,#dialogue-dialog .conversation-heading{display:none}
#dialogue-dialog .close{pointer-events:auto;top:105px;right:35px;font-size:0;width:auto;height:auto;padding:10px 16px;border-radius:24px;background:#102d4599;backdrop-filter:blur(12px)}
#dialogue-dialog .close::after{content:'← Explore the collection';font:12px Arial,sans-serif}
#dialogue-dialog .conversation-caption{left:8%;right:8%;bottom:103px;min-height:0;text-align:center;padding:26px 35px 16px;background:linear-gradient(0deg,#061b30e3,#061b3080,transparent)}
#dialogue-dialog .speaker-cue{justify-content:center;margin-bottom:9px}#dialogue-dialog .subtitle{max-width:1050px;margin:0 auto;text-align:center;font:clamp(18px,1.8vw,26px)/1.5 Georgia,serif}
#dialogue-dialog .conversation-copy{left:8%;right:8%;bottom:26px;padding:15px 25px;border:1px solid #f2e5ca44;border-radius:44px;pointer-events:auto;background:#09233cbb;backdrop-filter:blur(12px)}
#dialogue-dialog #dialogue-script #transcript{pointer-events:auto;bottom:85px}
#dialogue-dialog .conversation-copy progress{left:4%;right:4%;width:92%;bottom:1px}
body.scene-conversation .vignette{background:linear-gradient(180deg,#09243877,transparent 18%,transparent 74%,#09243888)}
body.scene-conversation #workshop-back{z-index:9}
@media(max-width:760px){body.workshop-menu #workshop-portals{left:6%;right:6%;gap:18px;height:35dvh;bottom:13%}body.workshop-menu .portal-title{font-size:24px}body.workshop-menu [data-area=festival] .portal-title{font-size:19px}body.workshop-menu #welcome{top:17%}#dialogue-dialog .conversation-copy{left:3%;right:3%;bottom:18px;border-radius:22px;padding:12px}#dialogue-dialog .conversation-caption{left:0;right:0;bottom:145px;padding:18px}#dialogue-dialog .close{top:102px;right:20px}}

/* Three Image-generated cloth signs; live text stays crisp at any display size. */
.product-caption h3,.craft-caption h3{font-size:30px}
.product-caption p,.craft-caption p{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:#304b5d}
.area-heading p{font-size:16px}
.step-name{font-size:22px;line-height:1.2}
.product-piece .piece-name{font-size:17px}
#craft-gallery{height:calc(100% - 290px)}
#product-gallery{height:calc(100% - 265px)}
.craft-caption,.product-caption{padding-top:20px;align-items:flex-start}
#craft-next{align-self:center}
body.workshop-menu #workshop-portals{left:10%;right:10%;bottom:5%;height:min(53dvh,490px);max-height:none;gap:36px;justify-content:center}
body.workshop-menu #workshop-portals button{flex:0 1 auto;height:100%;aspect-ratio:2/3;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 14px 18px #00132188);color:#fff4dc}
body.workshop-menu #workshop-portals button img{inset:0;width:100%;height:100%;object-fit:fill;opacity:1;filter:none;transform:none;clip-path:polygon(3% 5.8%,97% 5.8%,98% 7.8%,97% 9.8%,92% 9.8%,93% 92%,74% 95%,50% 97%,25% 95%,7% 92%,8% 9.8%,3% 9.8%,2% 7.8%)}
body.workshop-menu #workshop-portals button::before{top:-12px;left:14%;width:72%;height:calc(7% + 12px);border-left:1px solid #d6bd8f;border-right:1px solid #d6bd8f;background:none;box-shadow:none}
body.workshop-menu #workshop-portals button::after{display:none}
body.workshop-menu #workshop-portals button:hover,body.workshop-menu #workshop-portals button:focus-visible{transform:translateY(-7px) rotate(-.6deg);filter:drop-shadow(0 14px 25px #d3bf8466)}
body.workshop-menu #workshop-portals button:focus-visible{outline:2px solid #f8e6c5;outline-offset:6px}
body.workshop-menu .portal-number{top:68%;color:#ddc99b;font-size:10px;text-shadow:0 1px 3px #082439}
body.workshop-menu .portal-title{top:74%;left:11%;right:11%;font-size:clamp(24px,2.2vw,33px);line-height:1.13;text-shadow:0 2px 7px #061b32}
body.workshop-menu [data-area=festival] .portal-title{top:72%;font-size:clamp(19px,1.75vw,27px);line-height:1.15}
body.workshop-menu .portal-arrow{bottom:11%;font-size:21px;color:#ead6ab}
@media(max-width:760px){body.workshop-menu #workshop-portals{left:3%;right:3%;gap:10px;height:min(45dvh,390px);bottom:8%}body.workshop-menu .portal-title{font-size:20px}body.workshop-menu [data-area=festival] .portal-title{font-size:16px}body.workshop-menu .portal-number{font-size:8px}}