/* Native type and original artwork; one quiet introduction, no new media. */
#intro #qr-curtain{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6vw;align-items:center;padding:70px max(42px,6vw) 100px;box-sizing:border-box;background:#11120f;cursor:default;transition:none}
#intro #qr-curtain[hidden]{display:none}
#intro .company-opening{max-width:760px;color:#f4f1e8;position:relative;z-index:2}
#intro .company-opening p{margin:0;font-family:var(--sans);font-weight:500;letter-spacing:-.035em;text-wrap:balance}
#intro .company-opening .company-name{font-size:clamp(32px,4.15vw,64px);line-height:1.08}
#intro .company-opening .company-purpose{margin-top:28px;color:#b7b9b2;font-size:clamp(22px,2.65vw,38px);line-height:1.22}
#intro #qr-curtain>.qr-painting{position:relative;inset:auto;width:100%;height:min(66svh,560px);max-width:620px;aspect-ratio:auto;margin:0;transform:none;align-self:center}
#intro #qr-curtain .qr-art{position:absolute;inset:0;width:100%;height:100%;opacity:1;transition:none}
#intro #qr-curtain .qr-art img{width:100%;height:100%;object-fit:contain}
#intro #qr-curtain .qr-brand{left:14px;top:12px;gap:3px;max-width:90%}
#intro #qr-curtain .qr-brand span{font-size:12px;letter-spacing:.09em}
#intro #qr-curtain .qr-brand>a{font-size:10px;min-height:24px}
#intro #qr-curtain .qr-actions{display:none}
#intro.is-qr-waiting .intro-actions{visibility:visible;z-index:30;mix-blend-mode:normal}
#intro.is-qr-waiting .intro-actions button{color:#f4f1e8;background:#181916cc;border:1px solid #f4f1e840;text-shadow:none}
#exhibition #ecosystem .eco-heading .ecosystem-positioning{max-width:780px;margin:22px 0 0;font:400 clamp(19px,2.1vw,26px)/1.4 var(--sans);letter-spacing:-.015em;color:var(--ink)}
#exhibition #ecosystem .ecosystem-positioning span{display:block}
#exhibition #ecosystem .ecosystem-positioning span+span{color:var(--quiet);margin-top:6px}
@media(max-width:760px){
 #intro #qr-curtain{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:22px;padding:max(40px,env(safe-area-inset-top)) 24px 88px}
 #intro .company-opening{text-align:center;margin:auto;max-width:550px}
 #intro .company-opening .company-name{font-size:clamp(27px,6.8vw,42px);line-height:1.12}
 #intro .company-opening .company-purpose{font-size:clamp(19px,4.8vw,28px);margin-top:16px;line-height:1.25}
 #intro #qr-curtain>.qr-painting{height:100%;min-height:0;max-width:100%;justify-self:center}
 #intro #qr-curtain .qr-brand{left:4px;top:4px}
 #intro .intro-actions{right:18px;bottom:max(18px,env(safe-area-inset-bottom));gap:12px}
 #exhibition #ecosystem .eco-heading .ecosystem-positioning{font-size:19px;margin-top:18px}
}
@media(max-height:620px) and (orientation:portrait){
 #intro #qr-curtain{gap:14px;padding:26px 22px 76px}
 #intro .company-opening .company-name{font-size:25px}
 #intro .company-opening .company-purpose{font-size:18px;margin-top:12px}
}
@media(max-height:500px) and (orientation:landscape){
 #intro #qr-curtain{padding:24px 30px 70px;gap:30px}
 #intro .company-opening .company-name{font-size:29px}
 #intro .company-opening .company-purpose{font-size:20px;margin-top:15px}
 #intro #qr-curtain>.qr-painting{height:100%}
}

/* A two-line company identity, followed by the founder's purpose. */
#hud-controls,#site-header.chapters-open~#hud-controls{bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 8px));right:max(14px,env(safe-area-inset-right,0px))}
#intro .company-opening .company-name>span{display:block;text-transform:none}
#intro .company-opening .company-brand{font-size:clamp(44px,5.2vw,76px);line-height:1.04;letter-spacing:-.035em}
#intro .company-opening .company-category{font-size:clamp(16px,1.8vw,27px);line-height:1.3;letter-spacing:.005em;margin-top:15px;white-space:nowrap}
@media(max-width:760px){
 #hud-controls,#site-header.chapters-open~#hud-controls{bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 8px));right:max(10px,env(safe-area-inset-right,0px))}
 #intro .company-opening .company-brand{font-size:clamp(40px,10.5vw,60px)}
 #intro .company-opening .company-category{font-size:clamp(12px,3.5vw,18px);letter-spacing:.005em;margin-top:12px}
}
@media(max-height:500px) and (orientation:landscape){
 #intro .company-opening .company-brand{font-size:36px}
 #intro .company-opening .company-category{font-size:13px;margin-top:10px}
}

/* Fade only the painting perimeter into the existing opening background.
   Intrinsic image bounds make the mask follow the art, not its letterbox. */
#intro #qr-curtain .qr-art{display:flex;align-items:center;justify-content:center}
#intro #qr-curtain .qr-art img{width:auto;height:auto;max-width:100%;max-height:100%;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect}