:root{--paper:#f5f4f2;--ink:#232323;--muted:#74716f;--accent:#705355;--line:#d9d6d3;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif}body.viewing{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.3;cursor:default}.masthead{width:90%;max-width:1320px;margin:0 auto;padding:24px 0 15px;display:flex;align-items:center;justify-content:space-between;gap:20px}.identity{width:195px;display:flex;flex-direction:column;align-items:center;gap:3px}.identity img{display:block;width:100%;height:65px;object-fit:contain}.identity small{font-size:10px;letter-spacing:.35em}.masthead nav{display:flex;align-items:center;gap:30px;font-size:13px}.masthead nav a:hover,.masthead nav a[aria-current=page]{color:var(--accent)}#language{background:transparent;border:1px solid var(--line);border-radius:22px;padding:9px 17px;font-size:12px}
main{width:90%;max-width:1320px;margin:auto}.intro{display:grid;grid-template-columns:1fr 1.2fr;column-gap:9%;align-items:center;position:relative;min-height:680px;padding:30px 0 28px}.intro-copy{padding-inline-start:25px}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:.08em;margin:0 0 19px}.intro h1{font-family:"Traditional Arabic","Times New Roman",serif;font-size:clamp(52px,5.6vw,85px);font-weight:400;line-height:1.12;margin:0 0 28px;letter-spacing:-.025em}.intro-note{font-size:14px;line-height:1.9;color:#5c5856;margin:0;max-width:330px}.enter-link{display:flex;justify-content:space-between;align-items:center;gap:30px;width:fit-content;margin-top:28px;padding:15px 23px;background:var(--accent);color:white;border-radius:20px;font-size:12px}.enter-link:hover{background:#5d4547}.hero-art{position:relative;padding-inline-end:30px}.hero-button{background:transparent;padding:0;border:0;width:100%;display:block;cursor:zoom-in;position:relative}.hero-button img{width:100%;height:530px;object-fit:cover;display:block;border-radius:25px}.hero-button>span{position:absolute;bottom:18px;inset-inline-start:18px;background:#ffffffdd;backdrop-filter:blur(8px);padding:9px 14px;border-radius:18px;font-size:11px}.side-note{position:absolute;inset-inline-end:-16px;top:50%;margin:0;writing-mode:vertical-rl;font-family:"Traditional Arabic","Times New Roman",serif;font-style:italic;font-size:20px;letter-spacing:.05em;transform:translateY(-50%)}.hero-foot{grid-column:1/-1;display:flex;align-items:center;gap:35px;margin-top:36px;padding-bottom:25px}.hero-foot>span:first-child{font-family:"Traditional Arabic","Times New Roman",serif;font-size:22px}.foot-line{height:1px;background:#bcb5b0;flex:1;max-width:160px}.hero-foot a{font-size:11px;color:var(--muted);display:flex;gap:30px;direction:ltr}.collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px;padding:42px 0 35px;border-top:1px solid var(--line)}.collection-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:-12px}.collection-heading h2{font-family:"Traditional Arabic","Times New Roman",serif;font-size:30px;font-weight:400;margin:0}.collection-heading>span{font-size:11px;color:var(--muted);direction:ltr}.art-row{min-width:0}.scene-button{position:relative;display:block;background:transparent;padding:0;border:0;border-radius:25px;overflow:hidden;width:100%;cursor:zoom-in}.scene-button img{width:100%;height:auto;display:block}.image-action{position:absolute;bottom:17px;inset-inline-end:17px;display:flex;gap:14px;align-items:center;background:#f5f4f2ee;color:var(--ink);border-radius:24px;padding:11px 17px;font-size:11px;backdrop-filter:blur(8px)}.scene-button:hover .image-action{background:var(--accent);color:white}.art-copy{position:relative;padding:25px 8px 25px}.art-number{position:absolute;inset-inline-end:8px;top:26px;color:#a49890;font-family:Georgia,serif;font-size:17px}.art-number span{display:none}.art-copy .eyebrow{font-size:10px;margin-bottom:7px;padding-inline-end:35px}.art-copy h3{font-family:"Traditional Arabic","Times New Roman",serif;font-size:35px;font-weight:400;line-height:1.4;margin:0 0 9px}.medium{font-size:12px;color:var(--muted);margin:0}.text-button{background:none;border:1px solid var(--line);padding:11px 17px;border-radius:24px;display:flex;align-items:center;gap:25px;font-size:11px;margin-top:19px}.text-button:hover{border-color:var(--accent);color:var(--accent)}footer{width:90%;max-width:1320px;margin:20px auto 0;border-top:1px solid var(--line);padding:25px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.footer-signature{width:155px;height:50px;object-fit:contain;display:block}footer p,footer>a:last-child{font-size:11px}.about-main{padding:65px 0 60px}.about-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:10%;align-items:center}.about-intro h1{font-family:"Traditional Arabic","Times New Roman",serif;font-size:70px;font-weight:400;margin:0 0 15px}.about-subtitle{font-size:15px;color:var(--muted)}.bio-placeholder{margin:40px 0 30px;padding-top:25px;border-top:1px solid var(--line)}.small-label{font-size:12px;color:var(--accent)}.bio-placeholder p{font-size:15px;line-height:1.9;color:var(--muted)}.about-art{margin:0}.about-art img{width:100%;display:block;border-radius:25px}.about-art figcaption{color:var(--muted);font-size:11px;padding:15px 5px;line-height:1.6}
dialog{border:1px solid #ffffff22;padding:0;border-radius:30px;background:#171a18;color:#f3f1ed;width:calc(100vw - 40px);max-width:1600px;height:calc(100dvh - 40px);max-height:calc(100dvh - 40px);box-shadow:0 30px 100px #000b;overflow:hidden;color-scheme:dark}dialog::backdrop{background:#080b09eb;backdrop-filter:blur(15px)}dialog[open]{display:flex;flex-direction:column}.viewer-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;border-bottom:1px solid #ffffff16}.viewer-header .eyebrow{margin-bottom:4px;font-size:10px;color:#aaa}.viewer-header h2{font-size:20px;font-weight:400;margin:0;line-height:1.5}.close-dialog{flex-shrink:0;width:42px;height:42px;background:#ffffff0a;border:1px solid #ffffff20;border-radius:50%;font-size:27px}.close-dialog:hover{background:#ffffff20}.modal-art{flex:1;min-height:0;overflow:auto;direction:ltr;background:radial-gradient(ellipse,#343735,#111512);overscroll-behavior:contain}.art-surface{width:100%;height:100%;padding:22px;display:flex;align-items:center;justify-content:center}.modal-art img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;cursor:zoom-in;filter:drop-shadow(0 15px 25px #0006)}.viewer-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 25px;gap:15px;border-top:1px solid #ffffff16}.modal-navigation,.zoom-controls{display:flex;align-items:center;gap:8px}.viewer-toolbar button{background:#ffffff06;border:1px solid #ffffff20;border-radius:23px;padding:10px 17px;font-size:12px}.viewer-toolbar button:hover:not(:disabled){background:#ffffff15}.zoom-controls{direction:ltr}.zoom-controls button{min-width:40px;padding:8px 12px}.zoom-controls #zoom-in,.zoom-controls #zoom-out{font-size:20px}.zoom-controls #zoom-reset{font-size:11px;font-variant-numeric:tabular-nums;min-width:64px}#viewer-index{font-size:11px;color:#aaa;direction:ltr;margin:0 8px}html[lang=en] h1,html[lang=en] h2,html[lang=en] h3,html[lang=en] .hero-foot>span:first-child{font-family:Georgia,"Times New Roman",serif}html[lang=en] .intro h1{font-size:clamp(45px,5.2vw,78px)}html[lang=en] .art-copy h3{font-size:26px}html[lang=en] .about-intro h1{font-size:55px}
@media(max-width:950px){.masthead nav{gap:20px}.intro{column-gap:6%;min-height:560px}.hero-button img{height:430px}.intro-copy{padding-inline-start:0}.intro h1{font-size:58px}.intro-note{font-size:13px}.collection{gap:28px}.about-intro{gap:6%}}
@media(max-width:650px){.masthead{padding:15px 0;gap:10px;align-items:center}.identity{width:135px}.identity img{height:45px}.identity small{font-size:8px}.masthead nav{gap:12px;font-size:10px;flex-wrap:wrap;justify-content:end}.masthead nav>a:first-child{display:none}#language{font-size:10px;padding:7px 10px}.intro{grid-template-columns:1fr;min-height:0;padding:25px 0 15px;gap:28px}.intro-copy{padding:0 5px}.intro h1{font-size:58px;margin-bottom:17px}.intro .eyebrow{font-size:10px;margin-bottom:13px}.intro-note{font-size:13px;max-width:100%}.enter-link{margin-top:21px;padding:13px 21px}.hero-art{padding-inline-end:20px}.hero-button img{height:auto;aspect-ratio:1.12;object-fit:cover;border-radius:22px}.side-note{inset-inline-end:-5px;font-size:17px}.hero-foot{gap:18px;margin-top:0;padding-bottom:8px}.hero-foot>span:first-child{font-size:18px}.foot-line{max-width:65px}.hero-foot a{font-size:10px;gap:13px}.collection{grid-template-columns:1fr;gap:22px;padding-top:27px}.collection-heading{margin-bottom:0}.collection-heading h2{font-size:27px}.collection-heading>span{font-size:9px}.scene-button{border-radius:22px}.image-action{bottom:12px;inset-inline-end:12px;padding:9px 13px;font-size:10px}.art-copy{padding-top:20px}.art-copy h3{font-size:32px}.art-number{top:23px}.medium{font-size:11px}.text-button{font-size:11px}.footer-signature{width:120px;height:40px}footer{margin-top:5px;padding:20px 0;gap:12px}footer p{display:none}.about-main{padding-top:35px}.about-intro{grid-template-columns:1fr;gap:35px}.about-intro h1{font-size:57px}.bio-placeholder{margin-top:25px}.about-art img{border-radius:22px}html[lang=en] .intro h1{font-size:47px}html[lang=en] .about-intro h1{font-size:44px}dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:24px}.viewer-header{padding:15px 17px;gap:12px}.viewer-header h2{font-size:17px}.close-dialog{width:35px;height:35px}.art-surface{padding:10px}.viewer-toolbar{padding:12px;flex-wrap:wrap;justify-content:center;gap:12px}.modal-navigation{order:2;justify-content:center;flex:1 0 100%}.zoom-controls{order:0}.return-button{order:1}.viewer-toolbar button{padding:10px 14px;font-size:11px}.viewer-toolbar .zoom-controls button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero-button img{object-fit:contain;background:#eae8e5}
/* Keep all captions outside the artwork. */
.hero-caption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 5px 0;color:var(--muted);font-size:12px}
.hero-art{padding-inline-end:0}
.side-note{position:static;writing-mode:horizontal-tb;transform:none;font-size:19px;margin:0;flex-shrink:0;letter-spacing:0}
.hero-button img{height:auto;aspect-ratio:auto}
.hero-foot{flex-wrap:wrap}
@media(max-width:650px){
.masthead{flex-direction:column;align-items:stretch;gap:12px;padding-top:18px;padding-bottom:8px}
.identity{width:165px;align-self:center}
.identity img{height:55px}
.identity small{font-size:9px}
.masthead nav{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;font-size:13px;border-top:1px solid var(--line);padding-top:8px}
.masthead nav>a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 8px;white-space:nowrap}
.masthead nav>a:first-child{display:flex}
#language{min-height:44px;padding:9px 13px;font-size:12px;flex-shrink:0}
.intro{padding-top:27px;gap:25px}
.intro h1{font-size:clamp(42px,12vw,58px);line-height:1.22;margin-bottom:19px}
html[lang=en] .intro h1{font-size:clamp(37px,10.8vw,47px);line-height:1.12}
.intro-note{font-size:14px;line-height:1.85}
.enter-link{min-height:44px;font-size:13px}
.hero-art{padding:0;min-width:0}
.hero-button img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.hero-caption{font-size:12px;gap:12px;align-items:start;line-height:1.6}
.hero-caption>span{min-width:0}
.side-note{font-size:17px;line-height:1.4}
.hero-foot{gap:16px;justify-content:space-between}
.hero-foot>span:first-child{font-size:20px}
.foot-line{max-width:40px}
.hero-foot a{min-height:44px;align-items:center;font-size:11px}
.collection{gap:25px;padding-top:24px}
.collection-heading{align-items:center;gap:12px}
.collection-heading h2{font-size:26px}
.collection-heading>span{font-size:10px}
.art-copy{padding:20px 4px 15px}
.art-copy h3{font-size:clamp(28px,8vw,34px);line-height:1.5}
html[lang=en] .art-copy h3{font-size:25px;line-height:1.35}
.art-copy .eyebrow{font-size:11px}
.medium{font-size:13px;line-height:1.7}
.text-button{font-size:12px;min-height:44px;margin-top:16px}
.art-number{top:23px;inset-inline-end:4px;font-size:16px}
footer>a:last-child{min-height:44px;display:flex;align-items:center;font-size:12px}
.about-main{padding-top:30px}
.about-intro h1{font-size:clamp(45px,12vw,57px)}
.about-art figcaption{font-size:12px}
.bio-placeholder p{font-size:15px}
.viewer-header h2{font-size:16px;overflow-wrap:anywhere}
.close-dialog{width:44px;height:44px}
.viewer-toolbar button{min-height:44px;font-size:12px}
.viewer-toolbar{padding:10px;gap:8px}
.zoom-controls{gap:6px}
.viewer-toolbar .zoom-controls button{padding:8px 9px}
}
@media(max-width:360px){
.masthead nav{gap:1px;font-size:12px}
.masthead nav>a{padding-inline:4px}
#language{padding-inline:10px;font-size:11px}
.collection-heading{flex-wrap:wrap;row-gap:4px}
.hero-caption{flex-direction:column;gap:3px}
.hero-foot{gap:10px}
.foot-line{display:none}
.viewer-toolbar .return-button{padding-inline:10px;font-size:11px}
.zoom-controls #zoom-reset{min-width:52px}
}
/* Keep the right and left artwork columns on mobile too. */
@media(max-width:650px){
.collection{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:24px}
.collection-heading{grid-column:1/-1}
.scene-button{border-radius:16px}
.art-copy{padding:15px 2px 10px}
.art-copy .eyebrow{font-size:10px;line-height:1.5;padding-inline-end:22px;margin-bottom:8px}
.art-number{font-size:12px;top:17px;inset-inline-end:2px}
.art-copy h3{font-size:clamp(22px,6vw,29px);line-height:1.45;overflow-wrap:anywhere;margin-bottom:9px}
html[lang=en] .art-copy h3{font-size:clamp(17px,4.6vw,23px);line-height:1.4}
.medium{font-size:11px;line-height:1.7}
.text-button{width:100%;padding:10px 11px;gap:7px;font-size:10px;line-height:1.5;text-align:start;justify-content:space-between;min-height:44px}
.text-button>span:first-child{min-width:0}
.text-button>span:last-child{flex-shrink:0}
}
@media(max-width:360px){
.collection{column-gap:10px}
.art-copy .eyebrow{font-size:9px}
.text-button{padding-inline:8px;font-size:9px}
}
.painting-overlay{position:absolute;left:0;top:0;transform-origin:0 0;background:transparent;overflow:visible;pointer-events:none;visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.painting-overlay.ready{visibility:visible}
.painting-overlay .fitted-frame{position:relative;flex:none;padding:8px;background:linear-gradient(135deg,#37322b,#171713 55%,#484036);box-shadow:0 0 0 2px #514331,2px 4px 3px #0009}
.fitted-frame::before{content:"";position:absolute;inset:-15px;z-index:-1;background:#ffe4bfc9;filter:blur(38px);box-shadow:0 0 70px 40px #ffe0ada6,0 0 165px 75px #ffd79a50;pointer-events:none}
.fitted-frame::after{content:"";position:absolute;inset:8px;box-shadow:inset 2px 3px 4px #0008;pointer-events:none}
.painting-overlay img{width:100%;height:100%;object-fit:fill;display:block;border-radius:0}
.scene-plaque{position:absolute;left:84.6%;top:50.8%;width:9.8%;height:7.8%;background:linear-gradient(145deg,#d9c6a7,#c3b193);pointer-events:none}
.left .scene-plaque{left:4.1%;top:45.3%;width:9.2%;height:7.4%}
.art-row .scene-button{aspect-ratio:894/1075;background:#c0ae94}
.art-row .scene-background{width:100%;height:100%;object-fit:fill}
.left .scene-background{transform:scaleX(-1)}
.painting-reflection{position:absolute;padding:var(--reflection-spread);pointer-events:none;mask-image:linear-gradient(to bottom,#000e,#000c 35%,#0007 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000e,#000c 35%,#0007 70%,transparent 100%)}
.reflection-glow{position:absolute;inset:var(--reflection-spread);border:3px solid #ffe5b8d9;filter:blur(2px);box-shadow:0 0 8px 4px #ffdfb1b3,0 0 23px 10px #ffd19680,inset 0 0 10px 3px #ffe2b194;opacity:.85}
.scene-button .painting-reflection img{position:relative;width:100%;height:100%;object-fit:fill;transform:scaleY(-1);opacity:.3;filter:blur(1.6px);display:block}
.art-row:nth-last-child(1):nth-child(even){grid-column:auto}
@media(max-width:650px){

.viewer-toolbar .return-button{display:none}
.viewer-toolbar .zoom-controls{order:0}
}
.about-intro{align-items:start}
.about-intro h1{font-size:clamp(46px,4.8vw,68px);line-height:1.35;overflow-wrap:anywhere}
.bio-lead{font-size:17px;line-height:2;color:#57524f;margin:30px 0 0}
.about-art img{height:auto;aspect-ratio:auto}
.artist-biography{max-width:850px;margin:55px auto 0;padding-top:32px;border-top:1px solid var(--line)}
.artist-biography h2{font-family:"Traditional Arabic","Times New Roman",serif;font-size:33px;font-weight:400;margin:0 0 22px}
.bio-prose p{font-size:17px;line-height:2.1;color:#57524f;margin:0 0 25px}
html[lang=en] .about-intro h1{font-size:clamp(37px,3.8vw,54px);line-height:1.2}
html[lang=en] .bio-lead,html[lang=en] .bio-prose p{line-height:1.85}
@media(max-width:650px){
.about-intro{gap:30px}
.about-intro h1{font-size:clamp(40px,10.5vw,54px)}
.bio-lead{font-size:16px;line-height:2;margin-top:24px}
.artist-biography{margin-top:32px;padding-top:24px}
.artist-biography h2{font-size:29px;margin-bottom:18px}
.bio-prose p{font-size:16px;line-height:2;margin-bottom:23px}
html[lang=en] .about-intro h1{font-size:clamp(34px,9vw,44px)}
}