/* Burgundy, starlight, and touches of textured gold. */
:root{--green:#300710;--dark:#21050c;--gold:#e5c36f;--white:#fffaf7;--muted:#e0cbd0;--line:#e5c36f38}
html,body{background:var(--dark);color:var(--white)}
.ambient-field{background:linear-gradient(115deg,#30071099,#30071044),url('assets/burgundy-stars.jpg') center/cover;opacity:1}
.vignette{background:radial-gradient(ellipse,transparent 35%,#18020870)}
.work,.film-section{background:#23040a22}
.about,.services,.instagram-work,.contact{background:#24050b55;color:var(--white)}
.instagram-project{background:#290610df}.project-image,.card-caption{background:#26050b}
.hero h1,h2,h3,.about-grid .large{color:var(--white)}
.hero .intro,.hero-top,.hero-bottom,.intro,.section-head>p,.about-grid p,.service p,.contact-bottom,.instagram-more{color:var(--muted)}
.wordmark,.hero h1 em,h2 em,.hero .arabic-line,.welcome-story h2 em,.welcome-bottom span[lang=ar]{color:var(--gold);background:url('assets/gold-texture.jpg') center/600px auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wordmark{display:inline-block;width:max-content;border:0;border-radius:0;box-shadow:none;padding:0;flex-shrink:0;background-color:transparent;line-height:1.4}
.wordmark:focus-visible{outline:none;text-decoration:underline;text-underline-offset:10px;text-decoration-color:var(--gold)}
#main-content:focus{outline:none}
.eyebrow,.experience span,.contact-mail,.about .eyebrow{color:var(--gold)}
.pill,.open-book,#motion-toggle,#cursor.over-project,#skip-films,.intro-film-choices button{background:#27060dd9;color:var(--gold)}
.pill:hover,.hero-actions .pill,#start-films{background:var(--gold);color:#26050b}
.hero-actions .pill:hover{background:#f3d992}
#reader,#film-intro,#intro-video,#film-error{background:#21050c}
dialog::backdrop,#film-intro::backdrop{background:#140208ed}
#loader{background:linear-gradient(#30071077,#22040999),url('assets/burgundy-stars.jpg') center/cover}
#skip-welcome{background:#30071077;border-color:var(--line)}
#menu-toggle{display:none}
.contact-mail{display:inline-block;overflow-wrap:anywhere;max-width:100%}
@media(max-width:760px){
 html{scroll-padding-top:24px}
 header{height:88px;margin:0 6%;gap:12px;z-index:10}
 header .wordmark{font-size:42px;line-height:1.05}
 #language{margin-inline-start:auto;min-height:44px;padding:8px 12px;font-size:16px}
 #menu-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:24px;background:#300710aa;color:var(--white);font-size:14px}
 header #main-navigation{display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;margin:0;padding:12px;background:#300710f5;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 45px #13010655;backdrop-filter:blur(18px)}
 header #main-navigation.is-open{display:flex;flex-direction:column;gap:0}
 header #main-navigation a,header #main-navigation a:nth-child(n){display:block;font-size:16px;padding:14px 12px;min-height:48px;border-radius:8px}
 header #main-navigation a:hover{background:#ffffff09}
 .hero{padding:20px 6% 24px}
 .hero-top{font-size:12px;line-height:1.7;letter-spacing:.6px}
 .hero-content,html[lang=ar] .hero-content{min-height:0;padding:55px 0 44px}
 .hero .eyebrow{font-size:12px;letter-spacing:.7px;line-height:1.7;margin-bottom:24px}
 .hero h1{font-size:clamp(40px,10.5vw,76px);line-height:1.12;letter-spacing:-.055em;margin-bottom:24px}
 .hero .arabic-line{font-size:clamp(21px,5.5vw,29px);line-height:1.85;max-width:100%;margin-bottom:18px}
 .hero .intro{font-size:16px;line-height:1.8;max-width:340px}
 .hero-actions{flex-wrap:wrap;gap:14px 20px;margin-top:25px}
 .hero-actions .pill{min-height:48px;margin:0;font-size:14px;padding:14px 20px}
 .hero-film{min-height:48px;font-size:14px}
 .hero-bottom{font-size:12px;gap:16px;letter-spacing:0;line-height:1.6}
 .hero-bottom>a{max-width:48%;text-align:end}
 .section{padding:64px 6%}
 .section-head{margin-bottom:32px}
 .section-head h2,h2{font-size:clamp(36px,9vw,58px);line-height:1.16;letter-spacing:-1.5px}
 .section-head>p{font-size:16px;max-width:100%}
 .collection-nav{margin:0 0 35px;gap:8px 22px;padding-bottom:20px;line-height:1.6}
 .collection-nav a{font-size:14px;min-height:44px;display:inline-flex!important;align-items:center}
 .projects{gap:48px}
 .project,.project:nth-child(even),html[lang=ar] .project:nth-child(even){width:100%;margin:0}
 .project-image{aspect-ratio:1.4}
 .project-info{gap:10px;padding-top:18px;flex-wrap:wrap}
 .project-info h3{font-size:28px}
 .project-info p,.project-story{font-size:16px;line-height:1.7}
 .project-info>span{font-size:12px;padding-top:4px}
 .open-book{font-size:14px;min-height:44px;padding:12px 16px;bottom:12px;inset-inline-end:12px}
 .film-grid{gap:30px}.film-caption{flex-wrap:wrap;gap:6px;padding-top:15px}.film-caption>span,.film-duration{font-size:12px;letter-spacing:.5px}
 .about-grid{gap:32px}.about-grid .large{font-size:24px}.about-grid p,.experience p,.service p{font-size:16px}
 .experience span{font-size:12px}.service{gap:12px;padding:25px 0}.service h3{font-size:28px}
 .contact h2{font-size:clamp(37px,9vw,60px);line-height:1.2;letter-spacing:-1.5px}
 .contact-mail{font-size:clamp(16px,4.6vw,26px)}.contact-bottom{font-size:16px;margin-top:30px}
 footer{padding:28px 0 85px;gap:22px;font-size:12px}footer .wordmark{width:auto}footer>a:last-child{min-height:44px;display:flex;align-items:center}
 #motion-toggle{bottom:max(12px,env(safe-area-inset-bottom));right:12px;width:44px;height:44px;justify-content:center;font-size:16px;padding:0}
 #reader{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0;border:0;border-radius:0;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
 .reader-top h2{font-size:24px}.reader-top .eyebrow{font-size:12px}#close-reader,.reader-controls button{min-width:44px;min-height:44px}
 .book-stage{height:calc(100% - 150px);padding:18px 0}.reader-controls{gap:12px;font-size:14px;flex-wrap:nowrap}.reader-controls input{font-size:16px;width:56px;min-height:44px}
 .welcome-top,.welcome-bottom{font-size:12px;letter-spacing:.5px}.welcome-bottom{bottom:max(22px,env(safe-area-inset-bottom))}.welcome-bottom>span:first-child{max-width:210px;line-height:1.7}
 .welcome-story h2{font-size:clamp(44px,11vw,72px)}.hello-note{font-size:12px}
 html[lang=ar] .hero h1{font-size:clamp(42px,10vw,68px);line-height:1.5;margin:0 0 16px}
 html[lang=ar] .hero .eyebrow{font-size:18px}html[lang=ar] .hero .intro{font-size:22px}html[lang=ar] h2{font-size:clamp(35px,9vw,58px);letter-spacing:0}
 html[lang=ar] #main-navigation a,html[lang=ar] #menu-toggle{font-size:20px}html[lang=ar] .hero-bottom{font-size:16px}
}
@media(max-width:360px){header{gap:7px}#menu-toggle{padding-inline:8px}#language{padding-inline:10px}.hero-actions{flex-direction:column}.hero-bottom{font-size:12px}.reader-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.ambient-field{background-position:center}#motion-toggle{display:none}}